visit demo site here
Table of Contents
- List of plugins used
- Color Scheme/Main Hex Codes
- Uploading and installing theme
- Adding header
- Changing the color scheme
- Navigation menus
- Before Header Widget Area
- Header Right Widget Area
- Homepage widgets
- Setting up the Page Link Buttons on Home Page
- Featured posts wdget
- Adding social media icons
- Adding in Rotating Photo Areas on Homepage
- Adding in Subscription Box/Genesis eNews Extended
- Recent posts widget (sidebar widget)
- Adding footer widgets
- Setting up the Portfolio
- Setting a page to display your blog posts
- Setting up the Pin-It Hover Button
- Setting up share icons at bottom of posts
- Contact Form 7: for the contact form on the contact page
- Genesis eNews Extended: for the subscribe areas
- Jetpack: for sharing icons at bottom of posts
- jQuery Pin It Button For Images: for the Pin-it hover button
- Portfolio Post Type: to support the portfolio
- Regenerate Thumbnails: if your images are looking wonky, you’ll need this
- Simple Social Icons: for all social media icons
- Soliloquy Lite: for the sliders on the homepage
- Enhanced Text Widget: needed to add in HTML code for homepage buttons
Color Scheme Main Hex Codes
Light grey (hover): #e0e0e0
Light pink (hover): #ffccc4
Light forest (hover): #507c73
Light limeade (hover): #c5d696
Uploading & Installing the Theme
See our video on installing our WordPress themes.
Adding the header in WordPress
Add your site title and tagline in WordPress by going to Settings >> General. For this theme, the site title is the top line, and the tagline is the bottom line.
UPLOAD YOUR OWN HEADER: You will need to have two header sizes: one desktop version and one mobile responsive version (retina-friendly). The retina-friendly version should be double the size of the normal version. We have the theme set up to accept a 265×265 px logo (530×530 px for retina-friendly), but you can easily change this.
Go to Appearance >> Editor >> style.css and search for “.header-image .site-header .wrap“. The comments in the file will walk you through the process of changing your logo. After you’ve changed that, change the mobile logo by searching for the second two instances of “.header-image .site-header .wrap” (these are under the Media Queries section). You will also have to go to Genesis >> Theme Settings >> Header and selecting “Image logo” instead of “Dynamic text” (see image):
Having trouble? Please review this video.
Changing the color scheme
On your Genesis >> Theme Settings page, you have the option to select your color scheme under “color style.”
Go to Appearance >> Menu. Create and save a menu with your desired links. For a video tutorial on adding in navigation menus, click here.
Primary navigation menu: This is the main navigation menu under the header area.
Secondary navigation menu: This is the navigation menu at the top of the page that shows up when you scroll.
Header right navigation menu: If you want a navigation menu to the right of the header, go to Appearance >> Widgets >> drop a “Custom Menu” into the Header – Right widget area.
Before Header Widget Area
There is a widget area that is located above the header. You can drop a widget here by going to Appearance >> Widget. Things like social media icons, a subscription form, or a banner advertisement can go here.
Header Right Widget Area
There is a widget area that is located to the right of the header. You can drop a widget here by going to Appearance >> Widget. In our demo, we have the social media icons located here. You can also add a second navigation menu here.
This theme features a widgetized home page with six areas:
- Home Top
- Home – Slider – Left, Home – Slider – Center, Home – Slider – Right
- Home Middle
- Home Bottom
Control what shows up here by going to Appearance >> Widgets and dragging and dropping widgets into these areas. You have lots of options! Click on the following thumbnails to see how to configure each layout. More information on the widgets you need can be found throughout this installation guide. You can create other alternatives, too, but these are what we think looks best!
Setting up the Page Link Buttons on Home Page
This part involves a little bit of coding, but it’s very customizable in the sense that you can link to whatever page you want with whatever text you want. First, ensure you have the Enhanced Text Widget installed and activated. Go to Appearance >> Widgets and drag and drop a new Enhanced Widget into the Home Middle widget area. Here is the code you will need:
Start off with this:
<div class="links"> add stuff here </div>
To add your first button, replace ‘add stuff here’ with this, replacing ‘http://URLOFPAGEHERE’ with your full page link, ‘read more’ with your top line of text and ‘about me’ with the second line of text:
<a href="http://URLOFPAGEHERE"> <div class="page"> <div class="text"> <div class="text2"> read more <h4> about me </h4> </div> </div> </div> </a>
Repeat this two more times, replacing the content as necessary. In the end, your code will look like this (this is all in the same single Text widget):
<div class="links"> <a href="http://URLOFPAGEHERE"> <div class="page"> <div class="text"> <div class="text2"> read more <h4> about me </h4> </div> </div> </div> </a> <a href="http://URLOFPAGEHERE"> <div class="page"> <div class="text"> <div class="text2"> read more <h4> about me </h4> </div> </div> </div> </a> <a href="http://URLOFPAGEHERE"> <div class="page"> <div class="text"> <div class="text2"> read more <h4> about me </h4> </div> </div> </div> </a> </div>
Featured Posts Widget
The featured posts widget you’ll need for most of the homepage layout options is built right into Genesis. To add it, go to Appearance >> Widgets >> Genesis Featured Posts and match the settings to the settings for your chosen homepage layout option.
Adding in the Social Media Icons
First, download and install Simple Social Icons. To add, go to Appearance >> Widgets >> drag and drop a “Simple Social Icons” widget to where you want it to appear. Use these settings (colors are for the default color scheme–use the hex codes included at the top of this page depending on what color scheme you’re using):
Adding in Rotating Photo Areas on Homepage
To create the three rotating photo areas on the homepage, you first need to install the Soliloquy Lite plugin (got to Plugins >> Add New and search for “Responsive WordPress Slider – Soliloquy Lite”).
Once installed, you’ll see a new tab called “Soliloquy” in the sidebar within your WordPress admin area. Click Soliloquy >> Add New to add a new slider. You will need to add three different sliders; each slider has settings that need to be configured differently. Click “config” and modify your settings as outlined below for each slider:
click to enlarge
Upload your images. Once your sliders are ready, copy and paste their shortcodes into a text widget (Appearance >> Widgets) under the respective widget area (Home – Slider – Left, Home – Slider – Center, or Home – Slider – Right).
Adding in Subscription Box/Genesis eNews Extended
You can add in a subscription box in several different areas: the sidebar, homepage widget, before header widget area, after entry widget area, etc. This tutorial covers how to set up your subscription box.
Recent Posts Widget (Sidebar Widget)
Add your own ‘recent posts’ widget in your sidebar by going to Appearance >> Widgets >> Genesis Featured Posts. Make sure ‘Order by: Date’ is selected and that you only have the post title showing (no content, excerpts, or thumbnails).
Adding in Footer Widgets
This theme features a 3-column footer widget area on the bottom. Control what shows up here by going to Appearance >> Widgets and dragging and dropping widgets into the Footer 1, Footer 2, and Footer 3 widget areas.
Setting up the Portfolio
First, you will need to install the Portfolio Post Type plugin and activate it. Once you’ve done that, you should see a “Portfolio” tab in the sidebar of your WordPress administration area. From here, you can add in your posts. I like to set up my categories first, and then you can add in posts and tag them in their specific category. The featured image that you set for each post is what displays on the portfolio category pages.
You can view your main portfolio at http://yoururl.com/portfolio/, and your category pages at http://yoururl.com/portfolio_category/your-category/
If you’re receiving a 404 error page when you view your portfolio, you might need to reset your Permalinks. To do this, go to Settings >> Permalinks and click “save” on the bottom, without making any changes.
To ensure your title displays on the portfolio page, go to your main category page and edit that category. Add your title where it says “Archive Headline”. Control how many portfolio items show up on the portfolio page by going to Settings >> Reading >> Blog pages show at most (best if it’s a number divisible by 3).
To watch a video tutorial on this set-up process, click here.
Setting a Page to Display your Blog Posts
If you’re using the front page layout but still want to have a page that displays recent blog entries, go to Pages >> Add New and create a new page called “Blog.” In the Page Attributions section, make sure “Blog” is selected under “Template.”
Setting up the Pin-It Hover Button
We’ve included a custom pin-it button with this theme. To set it up, you’ll need to install the jQuery Pin It Button For Images plugin. Once activated, click on Settings >> JQuery Pin It Button for Images and configure your settings. On the “Visual” tab, upload one of the pin-it buttons found in the /images folder of your theme download.
Setting up Share Icons at Bottom of Posts
You might have noticed the share icons that appear at the bottom of each post. To set this up, you’ll need to install the Jetpack plugin by going to Plugins >> Add New and searching “Jetpack.” The instructions will walk you through syncing Jetpack with your WordPress.com account (if you don’t have one, you can create one from free). Once you have it set up and synced, go to Settings >> Sharing and ensure your settings match the following:
Still need help? Contact us via our contact form for additional support. Please note that we are only able to provide support for getting your theme set up like our demo: if you need additional support for increased customization, we will need to charge accordingly for our time.
How do I center the menus?
– Edit the style.css file for the theme by going to Appearance >> Editor in your WordPress admin area.
– Control + F (find): /* Primary Navigation You’ll see a block of code directly under it that looks like this:
margin: 0 auto;
border-top: double #d8d8d8;
border-bottom: 1px solid #d8d8d8;
– Change text-align: left; to text-align: center; (must be spelled “center”, not “centre”)
– Repeat for /* Secondary Navigation