WORDPRESS THEME
INSTALLATION GUIDE
Thank you for your purchase of the Coffee And Sundays WordPress Theme!
Following is the installation guide to help you set up.
Once you’ve downloaded your purchase, you’ll find these files inside:
- blogpixiecoffeeandsundays.zip (do not unzip)
- genesis.zip (do not unzip)
- Installation-Guide-Coffee.pdf
- Contact-Divider.png
- Marble-Divider.png
If your computer is automatically unzipping files when you download them (can happen if using Safari on a Mac), please see these instructions.
IMPORTANT
If you have Bluehost – make sure both the Bluehost Website Builder Plugin and Theme are deleted before you start. You can find these in Appearance > Themes, and in the Plugins section. If you need help you can ask Bluehost to remove them. Their website builder will cause your site to crash as soon as you upload a custom theme.
You will need to follow the instructions step-by-step to install the theme successfully.
Steps To Follow
1. Install Genesis
2. Install Theme
3. Install Plugins
4. Regenerate Thumbnails
5. Add Your Header Image
6. Set Up Your Menu
7. Set Up Your Side Bar
8. Add Your Instagram Feed
9. Add Contact Form
10. Add Read More Button
1. Install Genesis
Firstly you will need to install the Genesis Framework. In your WordPress menu go to Appearance > Themes > Add New > Upload Theme. Upload the genesis.zip file. Do not activate it.
Next, in your WordPress menu go to Dashboard > Updates and update Genesis so that you have the latest version. If you can’t see an update available, it means you have the latest version of Genesis installed. Move onto step 2.
2. Install Theme
To install your theme, do the same steps above (Appearance > Themes > Add New > Upload Theme) and upload the blogpixiecoffeeandsundays.zip file. Once uploaded, you can activate this one!
3. Install Plugins
Following are the Plugins you’ll need to install and activate to run with your theme. Go to Plugins > Add New > then use the Search bar to search the names of the ones mentioned below. For each one, click “Install Now” then “Activate”.
Contact Form 7 – You can add a contact form to your Contact page.
Classic Widgets – So you can set up your site widgets easily
Image Widget (the one by “The Events Calendar”) – Used for your side bar profile pic.
Smash Balloon Social Photo Feed – Display your Instagram Feed.
Portfolio Post Type – Enables a portfolio post type and taxonomies.
Regenerate Thumbnails – Regenerate the thumbnails of your images.
Simple Social Icons – Add social media icons to top menu and side bar.
Woocommerce – Only install this one if you want to run a shop on your blog.
4. Regenerate Thumbnails
If your blog is brand new / doesn’t have any images then you can skip this step!
If you have existing images on your website, your images don’t know yet that they are supposed to be using the new image sizes of your new theme. You’ll need to resize your images using the Regenerate Thumbnails plugin so they can have the same size as the images shown in the demo,
- Go to Tools > Regenerate Thumbnails.
- Click Regenerate Thumbnails for All Attachments
- Do not exit the page until the process has completed 100%
5. Add Your Header Image
Go to Appearance > Header and click Add New Image. Upload your header image / logo. It will need to be 1123px by 300px.
If you already have a logo and it’s a different size, simply use Canva to create a new design at custom dimensions of 1123×300. Add your logo image onto the background and save to upload.
The font used for the header in the demo is Signature Collection.
I have a FREE header image offer – please see the listing images here for more information (limited time only).
6. Set Up Your Menu
Page Links + Categories
Before creating your menu, make sure you’ve created some pages in the Pages section of your WordPress menu.
If you’d like the Categories drop down in your menu, you’ll need to make sure you’ve created some categories by going to Posts > Categories and add your categories there.
If you’ve done neither of these things, you’ll have nothing to add to your menu.
Create Your Menu
1. Go to Appearance > Menus
2. Give your menu a name (eg. Main Menu) and click Create Menu
3. Add the pages/categories you want to have in your menu by selecting them from the left side.
4. Under Menu Settings (at the bottom of the page), select “Primary Navigation Menu”
5. Click “Save Menu”
To create a drop down, eg Categories:
- Add a custom link to your menu (give it the title ‘Categories’ and link it to your blog URL)
- Add your Categories to your menu (you can select them from the left side), eg. Beauty, Lifestyle, Personal
- Make sure the Categories (Beauty, Lifestyle, Personal) are sitting just under the Categories title, then drag each of them slightly to the right and you will see them snap lock to be sitting underneath Categories but off to the right (see image below). This means these words will drop down under the title that’s sitting above them.
- Click Save Menu
Social Media Icons
Go to Appearance > Widgets and click the drop down arrow on the Nav Social Menu section. Drag the Simple Social Icons button from the options on the left into the Nav Social Menu section.
Add your URLS for all the social accounts you have and click save.
7. Set Up Your Side Bar
In your WordPress menu go to Appearance > Widgets. This section here is your side bar:
Image Widget: This is your profile pic and bio. Upload a square profile pic (it will change to a circle) and add your bio into the ‘Caption’ section. In the “size” drop down, select “profile-pic”. Save the widget.
To add the About Me button, add this code under your bio (make sure you add in the link to your about page):
<a class="more-link" href="https://linktoyouraboutpage">About me</a>Custom HTML: This is where you can add the pink contact envelope shown on the live demo. Paste in the following code:
<center><a href=https://LINKTOYOURCONTACTPAGE><img src=https://coffeeandsundays.blogpixie.com/wp-content/uploads/2020/10/envelope.png></a></center>Simple Social Icons: You’ll need to drag this widget into this section, like you did earlier for the top menu. Then fill out your social URLs again.
Search: Add a title if needed (eg. “Search The Blog”)
Categories: Add the Categories widget
Genesis – Featured Posts: You will need to drag this widget into this section, then give it the title Popular Posts. Use the following settings:
Custom HTML: And the last widget you’ll need to drag in is another Custom HTML widget. Give it the title Pinterest. Add in the following code and replace YOURUSERNAME with your Pinterest username.
<center><a data-pin-do="embedUser" data-pin-board-width="280" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/YOURUSERNAME"></a></center>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>8. Add Instagram Feed
1. To add your Instagram feed to your website’s footer, in your WordPress menu go to Instagram Feed and connect your account
2. Go to the Customize tab and configure as below:
In your WordPress menu go to Appearance > Widgets and find the Footer 1 section. Drag a Custom HTML widget into that section, give it the title “FOLLOW” and in the content box type the following code:
9. Add Contact Form
To add a contact form to your Contact Page (assuming you’ve already created a page with the title ‘Contact’ in the Pages section):
1. In your WordPress menu go to Contact > Add New.
2. Enter a title for your contact form.
3. Go the Mail tab and make sure the “To:” email is your email address.
5. Save your contact form.
6. Copy the shortcode of your contact form.
7. Go to Pages > Contact and add the image of the Contact-Divider to your page first.
8. Under that, paste the shortcode you copied above and publish the page.
10. Add Read More Button
Adding the read more button is a manual step you’ll need to do to each post (unless you’ve done it already).
While in the post editor, add a new block, click the + icon, go to Layout Elements and click the “More” button. This will add a Read More line where the Read More button will appear when you publish the post.
11. Remove Genesis Footer
With the new Genesis update, they add some text to your footer that isn’t needed. To remove it, in your WordPress menu go to Appearance > Customize > Theme Settings > Footer. Delete all the coding from the box and re-publish your blog.
12. Extra Things To Know
Changing Color
To change the main color of your theme, go to Appearance > Customize
To change the color of the social media icons, go to Appearance > Widgets and you’ll find the color options in the Simple Social Icons widgets that you’ve added.
Site Icon
To add your own site icon (little square pic that shows up at the top of your web browser when you’re visiting your site), go to Appearance > Customize > Site Identity.
Number of Posts
To set how many posts you want to be displayed on your homepage go to Settings > Reading and set the number for “Blog Pages To Show At Most”. I recommend 3 posts.
Make a Page Full Width
Go to Plugins > Add New, install and activate the Classic Editor plugin.
Go to a Page you’d like to change the layout of, scroll down under the area where you add content to the page, you’ll find 3 layout options. Choose the full width layout and publish the page.
Add Your Copyright to Footer
PLEASE NOTE: You must keep the theme credit link to Blog Pixie in the footer of your blog as per the license of the product.
Go in your WordPress menu to Appearance > Theme Edit. Select the functions.php link on the right.
Scroll to the bottom of the coding page. Just before it says “Theme by”, type your blog title and |
So it should say Your Blog Title | Theme by
Click “Update File” at the bottom.
Blog Doesn’t Look Right?
If your blog doesn’t look right after completing installation, make sure you go to Settings > Reading and choose to show the “Latest Posts” instead of a “Static Homepage”.