Congratulations on Purchasing your new theme!
You will need the genesis framework to use this theme, if you don’t already own it, click here to download it, make sure to UPDATE the genesis framework as soon as you install it.
First of all, unzip the file you downloaded to your computer (not the genesis framework, the theme you purchased), all of your theme files are inside.
Before you get started with the install, here are a few things to note.
You will need photoshop to edit the blog header. You will also need to download and install the fonts provided in the theme installation folder. If you do not have photoshop, click here to contact us and request your blog header.
Now, On to the fun stuff! Click on each step below to install your new wordpress theme.
Step 1 - Install the theme and Genesis Framework
Log into your wordpress dashboard, click on appearance > Themes.
At the top of the page, click on “Add New”
Then click on “Upload Theme”
In the box that opens up, click on “Choose File” and upload the genesis.zip file.
NOTE: (If you are using a mac or safari and you can’t find the genesis.zip file after downloading it and it’s showing you a variety of different files instead of one zip file, you will need to disable safari automatically unzipping your files and redownload genesis. Click here to learn how to disable that feature.)
Activate it and if it asks you to update it, then go ahead and do so.
Next, upload your theme, when you purchased your theme you should have downloaded a zip file, unzip that file and inside it is your wordpress theme and all of the extras. Your theme file should be named something like themename-tinselpop.zip and it’s in a zip file. Upload that and activate it.
Step 2: Install Your Header
Click on Appearance > Customize
On the page that opens up, click “Header Image” on the left side of the screen.
Then click on “Add New Image”
In the box that opens up click on “Upload Files”
Upload the blog header you edited in photoshop or if you didn’t have photoshop, upload the header I sent over. On the next page press the “Skip Cropping” button, then hit “Save and Publish”.
Step 3: Set up your navigation menu
First of all, you will need to have your pages and categories created, if you don’t already have these created, click the links below for a tutorial on adding pages and categories.
How to add a page.
How to add Categories.
Now that your pages and categories have been created you can go ahead and create your navigation menu, the primary menu allows you to add social media icons (which we will explain later on) and the secondary menu allows you to add more pages and categories.
This theme uses only the secondary navigation menu section for pages and categories, so when you create your menu, make sure to only check the “Secondary Navigation Menu” section.
If you are unsure how to create and arrange your navigation menu click here for a tutorial.
Step 4: Set up your widgets
First of all, install your plugins located in the plugins folder of your theme files that you downloaded from us. If you are unsure how to add plugins and install widgets, read the following tutorials –
How to upload and update Plugins
How to add Widgets to wordpress
Social Media Icons
Upload and update the Simple Social Icons plugin in your theme plugins folder, navigate to appearance widgets and drag it to the section named “Nav Social Menu”.
In your theme folder, you will find a PDF file with the social settings information for your theme, it will give you the color codes and icon sizes needed for your icons. You need to add this information into the box that shows up and makes sure it’s exactly the same.
Once you have your colors and icon sizes set up, scroll down a bit and add the links to your social media sites into the spaces provided.
Make sure to add http:// before any social media URL and make sure to add mailto: before your email address with no space in between.
Once you have everything added and set up, hit “SAVE” at the bottom of the widget.
Once you have set those up, go to appearance > Menus and create a new menu (do not add any pages or categories), assign it to the primary navigation menu section and hit save.
If you would like your icons in the sidebar instead or as well as in the nav menu, do the same as above but drag the widget or another simple social icons widget to the primary sidebar area.
Adding a Search Box to the Navigation Menu
Go to Appearance > Widgets and drag the search widget into the header left widget area, do not give it a name or it won’t look correct. Hit Save.
Adding a Welcome Image
Locate the plugin named “Image Widget” in your plugins folder and upload it. Navigate to appearance > widgets
Drag the widget titled “Image Widget” over to the “Primary Sidebar Area” and set it up like below, then hit “Save”. I recommend a size of 300 x 300px for image widgets.
Add an instagram widget to the Top or Bottom of your blog
Upload the plugin, “Instagram Feed” from your theme plugins folder, activate it.
Then click on “Instagram Feed” to the bottom left of your wordpress admin panel.
On the page that opens up, click the big blue button that says log in and get my access token and ID, authorize it then it will take you back to wordpress.
Copy the access token and ID that has shown up into the boxes below where it says “Access token and Show Photos from – User id”.
Once that’s done scroll down and hit “save changes”. Next click on “Customize” at the top of the instagram feed page.
In the customize section make sure the first area of settings are as shown below.
Once you do that, scroll down a little more and uncheck the following boxes “Show the Header”, “Show the Load More Button” and “Show the Follow Button”. Hit save.
Next click on “Display Your Feed” which is right next to the customize button.
Copy the code in the box that looks like this –
Click on “Appearance > Widgets” and drag a “Custom HTML” widget into the widget area that says Instagram Feed, paste the shortcode from above into that area then hit save. Your instagram feed should now show up perfectly at the top, (Note: set your instagram to public, if it’s private images won’t show up.)
Social Share buttons at bottom of posts
Upload the plugin named “Genesis Simple Share” and activate it. Next, navigate to Genesis > Simple Share
In the page that opens up, make sure the settings look exactly like they are shown below, then hit “Save”.
Install, activate and if needed up date the GS Pinterest Portfolio Plugin from your plugins folder.
Click On Appearance > Widgets, drag the GS Pinterest Profile Widget (There are 4 different widgets make sure it’s the profile one) into the primary sidebar area. Set it up like the screenshot below but change the username to your pinterest username.
Subscribe, facebook and twitter Widget
Make sure Jetpack is installed and activated. (Click here for a tutorial on activating jetpack).
Drag the subscriptions widget, facebook widget and twitter widget into the primary sidebar area, set them up as you wish or for facebook and twitter, here’s a screenshot of the demo settings (replace url’s and usernames with your own).
Shop My Style Widget
To use this widget you need to sign up for an affiliate network https://www.rewardstyle.com
Once you are accepted in they will provide further instructions on widget installation.
Step 5: Genesis Theme Settings
To set up your posts so they show a “Read More” button and a featured image like the example template, click on Genesis > Theme Settings > Content Archives.
Change your Content Archive settings so they look exactly like the screenshots below.
When you create a new post you must set a featured image for your theme to show up like the demo, there is no specific featured image size, images will stretch to fit the section.
Step 6: Install your slider
Go to Plugins > Add New and Locate “Genesis Responsive slider” in your theme plugins folder, upload it and activate it.
Go to Appearance > Widgets and drag the “Genesis Responsive Slider” Widget into the “Home Slider” Area, It should look like this: –
Don’t give it a title, just hit “Save”.
Click on Genesis > Slider Settings and set up your slider the exact same way as shown below, make sure everything is the same.
Hit Save! Congratulations, your slider is now installed!
Featured Categories Widget
Install the plugin in your plugins folder named “Widget Context” and activate it. This will ensure that the featured posts widget only shows up on your homepage.
The Featured Categories widget is designed to show on your homepage underneath your header and bottom navigation menu. If set up correctly it will show 3 posts, you can choose to display all categories or an individual category.
Go to Appearance > Widgets and drag the widget “Genesis Featured Posts” into the “Category Top” widget section. Set it up like below (If you want to feature an individual category, select it from the Category menu on the widget instead of selecting “All Categories”. Also make sure to have a featured image on each post so it shows up correctly.
Once you are done, hit “Save”!
Customize Theme Colors
This is completely optional but if you would like to change your theme colors, go to your wordpress admin area, click on appearance > customize > colors and from there you will see a list of areas with dropdowns, you can change the colors of your theme using this customizer (Some elements such as background images and the blog header cannot be customized using this.)
Change Theme Layout
Overall Layout Options
To change the overall layout of your theme to full width or have the sidebar on the left, go to appearance > customize > site layout, then you will see a dropdown menu with 3 different options.
Single Post and Page Options
If you only want to change the layout for a single page or a single post, go to your pages or posts area, click on the page or post you want to edit. Scroll down until you see “layout settings” and click on the layout diagram you want to use, then save your page. (Don’t worry about the sections under it).
To change the way a certain category archive looks, go to Posts > Categories then click on the category you wish to edit then scroll down to the bottom until you see the layout section again.