visit demo site here
Table of Contents
- List of plugins used
- Color Scheme/Main Hex Codes
- Font List
- Uploading and installing theme
- Importing Demo Content
- Adding header or logo
- Customize the colors
- Navigation menus
- Homepage widgets
- Recent posts widget
- Adding social media icons – navigation bar
- Adding social media icons – home, sidebar, footer
- Adding in Subscription Box/Genesis eNews Extended
- Adding in Top Footer widget
- Adding footer widgets
- Setting up the Portfolio
- Setting up the Shop
- Setting a page to display your blog posts
- Using the landing page
- Using the Post List by Category Template
- Setting up the Pin-It Hover Button
- Setting up share icons at bottom of posts
- Video Set-Up
- FAQ Color Tips
- Better Font Awesome: for icons on homepage areas
- 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
- * WooCommerce: ecommerce plugin if you want a shop
- * Genesis Connect for WooCommerce: required if WooCommerce is installed
Color Scheme Main Hex Codes
Text & Heading color: #9a9894
Main color: #6f6c65
Main color 2: #f3f3f3
Storm (Storm color scheme): #a5b7b2
Wine (Wine color scheme): #bc8999
Mustard (Mustard color scheme): #dac98e
Peach (Peach color scheme): #ecccb6
Icicle (Icicle color scheme): #8b969e
Uploading & Installing the Theme
See our video on installing our WordPress themes.
Importing Demo Content
If you want to use the demo content to help set your site up, click here for instructions.
Adding the header or your logo 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. (You can also access this by clicking on Appearance >> Customize and then clicking “Site Identity”)
UPLOAD YOUR OWN HEADER: In your WordPress admin area, click on Appearance >> Header and then click on Header Image and upload your header. Your header should be 325 x 160 pixels for best results!
Customize the Colors
To use one of our premade color schemes, go to Appearance >> Customize and click on Color Scheme. Select one from the dropdown box and save.
If you want to use your own colors, first make sure your Color Scheme is set on “Default”. Click on Appearance >> Customize and then click on Colors. Change the colors to your liking and save! See FAQ – Color Tips below for tips.
Go to Appearance >> Menu. Create and save a menu with your desired links. For a video tutorial on adding in navigation menus, click here.
Secondary navigation menu: This is the navigation menu at the top of the page that shows up when you scroll down the page.
Navigation menu next to header: To get this one to appear, go to Appearance >> Widgets and drag and drop a Custom Menu widget to the Header Right widget area and save.
This theme features a widgetized home page with five areas:
- Home Top
- Home Featured: reserved for recent posts grid
- Home Left, Home Center, and Home Right: featured pages or text widgets
- Home Bottom
Control what shows up here by going to Appearance >> Widgets and dragging and dropping widgets into these areas.
Homepage Recent Posts Grid
The demo site features seven recent posts showcased in a 3-column grid. In order for the grid to appear correctly on your website, a few conditions must be met:
- You must have at least seven published posts. If you don’t have at least this amount, the grid will appear incorrectly.
- You must have a “featured image” selected for each post. The grid will not display posts if they do not have a featured image selected.
If your website meets the above conditions, you’re ready to add the grid! To do so, go to Appearance >> Widgets and drag and drop a blank text widget into the Home Featured widget area.
Home Left, Center, & Right Widget Options
Option 1: Text Boxes
(looks like this)
Go to Appearance >> Widgets and drag and drop a Text widget to the home-left, home-center, or home-right area. Copy and paste the following code, editing where necessary:
<center> <h3>Heading Here</h3> Your text here </center>
To add the icons download and install the Better Font Awesome plugin. Add icons to the text widget via shortcode, e.g.
[icon name="fa-bolt" size="2x"]<br /><br />
right after the first < center > tag. Use the Font Awesome cheat sheet to see all your choices.
Option 2: Featured Pages
(looks like this)
Go to Appearance >> Widgets and drag and drop a Genesis – Featured Page widget to the home-left, home-center, or home-right area. Make sure your settings look like this:
Recent Posts Widget – Sidebar
Use the Recent Posts widget in the sidebar to highlight recent or featured posts. (To highlight featured posts, create a new category for your posts called “Featured” (to do this, just go to the Posts >> Categories page and add a new one) and mark each one you want to feature. Or, leave “all categories” selected to highlight all recent posts.) To add the widget in the sidebar, go to Appearance >> Widgets and add a Genesis – Featured Posts widget to the primary sidebar. Use these settings:
Recent Posts Widget – After Entry
Use the Recent Posts widget after a blog entry to highlight recent or featured posts. (To highlight featured posts, create a new category for your posts called “Featured” (to do this, just go to the Posts >> Categories page and add a new one) and mark each one you want to feature. Or, leave “all categories” selected to highlight all recent posts.) To add the widget after entry, go to Appearance >> Widgets and add a Genesis – Featured Posts widget to the after entry widget area. Use these settings:
Adding in the Social Media Icons – Navigation Bar
First, download and install Simple Social Icons. To add, go to Appearance >> Widgets >> drag and drop a “Simple Social Icons” widget to the Nav Bar Social Icons widget area. No need to change the color or size–just enter in your desired social media URLs and save. For best results, make sure Alignment is set to “Align Right”.
Adding in the Social Media Icons – Home, Sidebar or Footer
First, download and install Simple Social Icons. To add, go to Appearance >> Widgets >> drag and drop a “Simple Social Icons” widget to the Primary Sidebar widget area, one of the Home widget areas, or one of the Footer Widget areas. Change settings and enter in your URLs as necessary.
Genesis Enews (Subscription Box)
You can add in a subscription box in several different areas: home top, home bototm, the sidebar, widget above content widget area, after entry content area, or a footer widget. Do this by 1) installing Genesis eNews Extended plugin followed by 2) dragging and dropping a Genesis – eNews Extended widget into the widget area of your choice on the Appearance >> Widgets page. This tutorial covers how to set up your subscription box.
For best results, keep the button text as “Go” or something short.
Adding in Top Footer Widget
We’ve coded in a widget called “Top Footer” that lays on top of the three-column footer widgets. Ideas to best utilize this space include: a subscription box (see above for set up instructions), instagram widget via snapwidget, or message/quote by going to Appearance >> Widgets and drag and drop a “Text widget” into the spot. Type in your message. Wrap in H3 tags for cursive, like
<h3>your cursive message here</h3>
Adding in Footer Widgets
This theme features a 3-column footer widget area on the bottom. Control what shows up here by going to the Appearance >> Widgets page 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”.
To watch a video tutorial on this set-up process, click here.
Setting up the Shop
This theme has built-in WooCommerce styling. For configuration, please 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 Attributes section, make sure “Blog” is selected under “Template.”
Using the Landing Page
The landing page template removes all other elements (like the navigation bars, footers, etc.) from the page so only your content shows up. To use, create a new page by going to Pages >> Add New. In the Page Attributes section, make sure “Landing” is selected under “Template.”
Using the Post List by Category Template
For fun, we’ve built in this custom template that, when used, will produce a list of all your posts sorted alphabetically by category. To use, create a new page by going to Pages >> Add New. In the Page Attributes section, make sure “Post List by Category” 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:
If you’re struggling with the set-up process or are a visual learner, we’ve also made a quick set-up video. Click here to view.
Q. My images aren’t displaying properly/are the wrong sizes.
Please install Regenerate Thumbnails plugin and run through the images in question to “reset” them.
Q. My images are still appearing blurry and unsharp.
Make sure you don’t have Jetpack’s Photon activated.
Q. How do I change the favicon?
Navigate to Appearance >> Customize and click on Site Identity. If you upload a site icon, it will appear as the favicon.
Q. What if I don’t want to use the recent post grid or widget areas on the homepage?
Just leave all “Home” widgets empty with no widgets in them and the regular WordPress blog post feed will show up.
FAQ – Color Tips
- The color customizer works best if you use colors that are around the same lightness/darkness as the default colors.
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.