WORDPRESS THEME

INSTALLATION GUIDE

Thank you for your purchase of the Blushing WordPress Theme!
Following is the installation guide to help you set up.

VIEW THE LIVE DEMO

Once you’ve downloaded your purchase, you’ll find these files inside:

  • blogpixieblushing.zip (do not unzip)
  • genesis.zip (do not unzip)
  • Installation-Guide-Blushing.pdf
  • aboutme_template.pdf
  • contact_envelope.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 the Bluehost Website Builder plugin and theme are deleted before you start. You can find these in Appearance > Themes, and in the Plugins section. 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 Slider / Featured Pages
8. Set Up Your Side Bar
9. Add Your Instagram Feed
10. Add Contact Form
11. Remove Genesis Footer

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.

2. Install Theme

To install your theme, do the same steps above (Appearance > Themes > Add New > Upload Theme) and upload the blogpixieblushing.zip file. Once uploaded, you can activate this one!

Next, in your WordPress menu go to Dashboard > Updates and update Genesis so that you have the latest version.

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.
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.
Slider by Soliloquy β€“ Adding the homepage slideshow
Woocommerce – Only if you intend on running an online store 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,

  1. Go to Tools > Regenerate Thumbnails. 
  2. Click Regenerate Thumbnails for All Attachments
  3. 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 1105px by 288px.

If you’d like to make your header image in the same font as the demo, the fonts used are:

You can upload the Bonjour font to Canva to create your header image if you have Canva Pro (I highly recommend). They have a free trial available if needed.

If you already have a logo and it’s a different size, simply use Canva to create a new design at custom dimensions of 1105Γ—288. Add your logo image onto the background and save to upload.

6. Set Up Your Menu

Page Links + Categories

Before creating your menu, make sure you’ve created some pages first. In your WordPress menu go to Pages > Add New and create your first page (eg. About). Give it a title and some content. Repeat for each page you need.

If you’d like the Categories drop down in your menu, you’ll need to make sure you’ve created some by going to Posts > Categories and add the categories you’ll be posting about there.

If you’ve done neither of these things above, you’ll have nothing to add to your menu yet.

Creating Your Menu:

1. Go to Appearance > Menus 
2. Give your menu a name (eg. β€œTop Menu”) and click Create Menu 
3. Add the pages/categories you want to have in your menu.
4. Under Menu Settings (at the bottom of the page), select β€œPrimary Navigation Menu”
5. Click β€œSave Menu”

To create your Home link:

In the left under Pages, click “View All” and you’ll find the Home link to add in.

To add your pages:

In the left under Pages, the pages you have created will be there to select from. Select what you want to add to your menu and click the β€œAdd to Menu” button.

To create a drop down, eg Categories:

  1. Add a custom link to your menu (give it the title β€˜Categories’ and link it to your blog URL)
  2. Add your Categories to your menu (you can select them from the left side), eg. Beauty, Lifestyle, Personal
  3. Make sure the Categories you add 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.
  4. 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.

Wishlist Page

If you’d like to add a wishlist page, you’ll need an account at Rewardstyle or Shopstyle Collective.

If you have a Rewardstyle account, you’ll need to install the Rewardstyle Plugin for WordPress. Then you can create a “Boutique”, grab the code for WordPress and paste it into your Wishlist page.

7. Set Up Slider + Featured Pages

Now you need to set up your homepage slider and featured pages.These are all optional.

In your WordPress menu go to Appearance > Widgets. Find the section called β€˜Before Content’.

Drag the widgets from the left into this section in the same order as shown below.

Custom HTML: This is the code box for your slider. You’ll need to go in your WordPress menu to Soliloquy > Add New.

Give your new slider a Title, select images you would like to add to your slider, then click on the Config tab to the left. Fill out the settings as below:

Click β€˜Publish’ on the right. To the right you’ll see β€˜Soliloquy Slider Code’. Copy the first code.

Go to Appearance > Widgets and paste the code in the β€˜Custom HTML’ widget that you added to the β€˜Before Content’ section.

Genesis – Featured Page: You will have added 3 of these widgets to the β€˜Before Content’ section. Each one can link to a different page of your blog

You need to make sure you’ve already created some pages (go to your WordPress menu and click Pages) and set a featured image for each one (as you’re creating a new page, see the featured image section to the right of the page editor where you will need to upload an image).

You can use plain colored images, or you can use photos. If you would like the same pink boxes as shown in the demo, please download that image to use here.

Give them the settings as below but choose a different Page for each one:

8. Set Up Your Side Bar

In your WordPress menu go to Appearance > Widgets. This section shown below is your side bar. You can add the following widgets into this section (drag them from the left into the Primary Sidebar box). Remove any unnecessary widgets that were already sitting in there.

Image Widget: This is your profile pic and bio. Upload a photo of yourself (it will change to a circle). In the β€œsize” drop down, select β€œprofile-pic”.

If it’s not changing to a circle, you’re probably using the widget called “Image” instead of the widget called “Image Widget”.

Add this code to the β€˜Caption’ section and replace with your info.

This is where you write a short bio about yourself. Let your readers know who you are, where you're from and what your blog is about.

<a class="more-link" href="http://YOURABOUTMEPAGELINK">About me</a>

Save the widget.

Custom HTML: This is where you can place the bonus blush contact envelope. Copy the code below and paste into the widget:

<center><a href=https://YOURCONTACTPAGELINKHERE><img src=https://blushingwordpress.blogpixie.com/wp-content/uploads/2020/08/envelope.png></a></center>

Save the widget.

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”)

Custom HTML: Add 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="280" data-pin-scale-width="80" href="https://www.pinterest.com/YOURUSERNAME"></a></center>

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

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: Here is where you can paste the code for a Google Adsense ad (instructions here) or an image link for any sponsors you may have.

9. 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 and in the content box type the following code:

10. 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 and paste it into your Contact page.

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.

Extra Things To Know

Change Theme 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.

Read More Button

To add the Read More button into your posts, you need to add a new block under your first paragraph of text in a post, and search for the β€œMore” block.

Homepage Display

For everything to look correct, go to Settings > Reading and choose to show the “Latest Posts” (not a static page).

Contact Page

To add the envelope that came in your download to your Contact page, simply add it as an image to your Contact page above the contact form code.

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.