Anda di halaman 1dari 27

1 7 T H AV E N U E

th eme i nstallat io n guide

Hello! Thank you so much for purchasing the Rowan theme from 17th Avenue. We hope you
enjoy it! Scroll down for a comprehensive guide that will walk you through how to set up your
new Wordpress theme. Questions or concerns? Click here for support info.

TABLE OF CONTENTS

part one: basic theme setup


part two: widgets setup
part three: everything else
PART ONE

Basic Theme Setup


Recommended plugins .................................. 3
How to install a plugin .................................. 3
Install Genesis framework ............................. 4
Install Rowan theme ...................................... 4
Regenerate Thumbnails ................................. 4
Import demo content .................................... 5
Site title & tagline ......................................... 5
Upload a custom logo ..................................... 5
Set up navigation menu ................................ 6

(click to jump to section)


RECOMMENDED PLUGINS

The following plugins are required to set up the theme like the demo:

Genesis eNews Extended This is for the subscription/newsletter areas in the theme

Meta Slider This is for the slider on the Rowan home page

Ninja Forms This is the recommended contact form plugin

Column Shortcodes This is used for setting up the two column format on the contact page

Regenerate Thumbnails This is used to regenerate (or re-crop) your sites thumbnails after
the new theme is installed essential for proper image display

Widget Importer & Exporter This imports the widgets from the demo and makes set up much
simpler

WooCommerce* This plugin adds a shop/ecommerce area to your site

Genesis Connect for WooCommerce* If using WooCommerce, this plugin is needed for
proper compatibility between it and Genesis

* Only install these plugins if you plan to set up an ecommerce shop on your website.

HOW TO INSTALL A PLUGIN

From your Wordpress dashboard, go to Plugins > Add New. In the search bar on the right, type
in the name of the plugin you would like to install. Click install now, then activate on the
next page.
INSTALL GENESIS FRAMEWORK

1. From your Wordpress dashboard, go to Appearance > Themes. At the top, click Add
New, and then click Upload Theme on the next page.

2. Click Choose File. Locate the Genesis.zip file that came in your Rowan download file and
upload.

3. Click Install Now and wait for the framework to install. Do not activate it.

Note: You may update Genesis any time in the future as updates become available. Updating
will not affect the Rowan theme, however it is always advised that you back up your site before
installing any updates.

INSTALL ROWAN THEME

1. From your Wordpress dashboard, go to Appearance > Themes. At the top, click Add
New, and then click Upload Theme on the next page.

2. Click Choose File. Locate the rowan-theme.zip file that came with your theme and
upload it.

3. Click Install Now and wait for the theme to install. Activate the theme.

Optional but highly recommended: go to Wordpress > Settings > Permalinks. Choose post
name and then save. This will give your site clean links, i.e. http://yourwebsite.com/about
instead of http://yourwebsite.com/?p=245

REGENERATE THUMBNAILS (DO NOT SKIP!)

The Rowan theme calls for new image sizes, so its essential that you regenerate your
thumbnails if you have existing images on your site, otherwise your images may appear
stretched or compressed. Once the Regenerate Thumbnails plugin is installed, go to Tools >
Regen. Thumbnails and click Regenerate All Thumbnails. If you have a lot of images, it may
take a while. Do not close the page until the regeneration is 100% complete.
IMPORT DEMO CONTENT (OPTIONAL)

If there is no content on your site, we recommend importing the demo content so you can set
up your website and get a feel for how all the features work (be sure to import content after the
theme and plugins are installed). Only import demo content if your site has no content.

1. From your Wordpress dashboard, go to Tools > Import. Choose Wordpress.

2. When prompted, install the Wordpress Importer and click activate plugin & run
importer.

3. Click Choose File and select the demo-content.XML file in your Rowan theme file (inside
the demo folder). Click upload file & import.

4. Assign the posts to your username. Check download and import file attachments, then
Submit. Demo content is now imported!

SITE TITLE & TAGLINE

These title instructions (and the instructions for the custom logo below) are only applicable in
Wordpress 4.3 or later. If you are using an older version, we recommend updating back up
your site first!

1. Go to Appearance > Customize > Site Indentity.

2. Type your site title and tagline (optional) into the respective text boxes. Click Save &
Publish.

UPLOAD A CUSTOM HEADER OR LOGO

The recommended header size for the Rowan theme is 800x200 px (PNG format). If you need a
larger or smaller header area, here are instructions.

1. Go to Appearance > Customize > Site Indentity. Uncheck Display Header Text.

2. Click the back arrow in the Customize panel, and then click on Header Image.

3. Click Add New Image, upload your image, and click Select and Crop. Crop your image.
Save & Publish.
SET UP NAVIGATION MENU

1. If you havent yet set up any pages on your site, do that first at Pages > Add New.

2. Go to Appearance > Menus. To create a new menu, give it a name and then click Create
Menu (skip this step if youve already created a menu).

3. On the left, there are several content categories you can use in your menu pages,
categories, posts, custom links, and more. To add a new link to your navigation menu,
place a checkmark by any page/category/etc and click Add to Menu.

4. Anything you add to your menu will show up in the menu preview on the right.

5. You can rearrange your menu by dragging the menu items on top or below one another.
To create a drop-down menu, drag a menu item to the bottom and right of another
menu item.

6. Once you have configured your menu how youd like, check the Primary Navigation
Menu box under Theme Locations. Save Menu.

HELPFUL MENU TIPS

How to create a Home link

Click on Custom Links on the left. In the URL box, paste in your website front page URL. In the
text box, type Home. Add to Menu.
How to create a Categories tab (that doesnt lead anywhere) with several categories that
drop down

Click on Custom Links on the left. In the URL box, type a # sign. In the text box, type
Categories. Add to Menu. Click on the Categories section on the left. Place a checkmark by the
categories you want to add and click Add to Menu. Drag the categories below and to the right
of your Categories link.

Secondary Navigation Menu


The Rowan theme also supports a secondary menu above the header. To use this, create a new
menu, add your pages, and then set the Theme Location to Secondary Navigation Menu.

Navigation Social Icons

Instructions here.
PART TWO

Widgets Setup
Import widgets ............................................. 9
Set up homepage ........................................ 9-12
Configure pages ..................................... 9
Image slider .......................................... 10
Special Day Text ................................... 10
Page Buttons ........................................ 11
Featured Posts ...................................... 12
Sidebar widgets ............................................ 13
Social media icons ........................................ 15
Blog sidebar photo ....................................... 16
Footer widgets ........................................... 17

(click to jump to section)


IMPORT WIDGETS (THE EASY WAY)

Importing widgets makes theme setup a whole lot easier. And who doesnt love easy? All you
have to do is install the Widget Importer & Exporter plugin, and all the widgets from the Rowan
demo will be loaded onto your site.

If you prefer to set up your own widgets, instructions are provided for every widget area in this
installation guide.

1. Go to Plugins > Add New. Install and activate the Widget Importer & Exporter plugin.

2. Go to Tools > Widget Importer and Exporter.

3. Under Import Widgets, click Choose File. Select the rowan-widgets.wie file in the
demo folder in your theme and upload it.

4. The homepage, sidebar, and footer widgets will all be automatically set up on your
Widgets page.

SET UP ROWAN HOMEPAGE

A homepage is entirely optional. If you would prefer to use the Rowan theme as a blog, skip
the next three pages. If you would like to not have a homepage, but have the slider display
above your blog posts, follow only Step 2: Image Slider.

H OM E PAG E ST E P 1 : CO N F I G U R E PAG ES

Only complete this step if you wish to have a static homepage with a blog on a separate page
(like the demo is set up).

1. From your Wordpress dashboard, go to Pages > Add


New. Name the page Home. Do not put any content on
the page. Scroll down and find Layout Settings. Select the
full-width layout. Publish.

2. Add another new page. Name the page Blog and


publish it do not put any content on the page.

3. Go to Wordpress > Settings > Reading. Tick a static page. For the Front Page, choose
the Home page you created. For the Posts Page, choose the Blog page you created.
Save changes.
H OM E PAG E ST E P 2 : I M A G E S L I D E R

1. The Rowan theme uses the Meta Slider


plugin for the homepage slider. Once
installed, click the Meta Slider tab in your
dashboard.

2. Click the + to create a new slider.

The Rowan slider uses images sized 1030 x


650px. It is recommended that you crop
your slide images to this size before
uploading them (you can do this in
Photoshop or a free program like
PicMonkey).

3. Upload your images.

4. Configure your settings as seen here:

5. Once your slider is created and saved, go


to Wordpress > Appearance > Widgets.

6. Drag the Meta Slider widget into the Home - Slider widget area. Save. Your slider is now
installed!

H OM E PAG E ST E P 3 : S P E C I A L D A Y T E X T

1. Go to your Wordpress dashboard > Widgets.

2. Drag a Text widget into the Home - Top widget area. Paste the following code:

! <div class="home-title">capturing your <em>special day...</em><div>

3. You can change the highlighted text to whatever you would like it to say. Keep all of your
text between <div class=home-title> and </div>. If you would like any part of your
text to be italicized, put it between <em> and </em>.
H OM E PAG E ST E P 4 : P A G E B U T T O N S

1. First, resize/crop three images for the buttons to 325 x 210px exactly. The easiest way to
do this is to first resize the photo to 325px with relative height, and then crop to 210px
height. This method will ensure your images arent stretched or distorted, and can be done
in Photoshop or a free online program like Picmonkey.

2. Upload your three images into your Media Library at Media > Add New. After your images
are uploaded, leave the tab open.

3. Open your Wordpress dashboard in a new tab. Go to Appearance > Widgets.

4. To set up your first button, drag a text widget into your Home - Middle Left widget area.
Paste the following code in the text box:

<div class="home-featured"><a href="LINK/URL TO PAGE">


<img src="IMAGE FILE URL"/>
<div class="featured-title">BUTTON TEXT</div></div>

5. Once pasted, leave the tab open and go back to your uploaded images page (step 2) and
click Edit on the first image you would like to use. On the next page, copy the File URL.

6. Return to your Widgets page tab. Paste the File URL to replace IMAGE FILE URL.

7. Add your page link/url to replace LINK/URL TO PAGE. Be sure its a full link with http://, i.e.
http://yourwebsite.com/about

8. Replace BUTTON TEXT with what you want the button to say.

9. Here is an example of how a Gallery button would look:

<div class="home-featured"><a href="http://demo.17thavenuedesigns.com/rowan/


gallery/">

<img src="http://demo.17thavenuedesigns.com/rowan/wp-content/uploads/2015/09/
image.jpg">

<div class="featured-title">Gallery</div></div>
10. Repeat steps 1-3 for the other two buttons. The second button should be placed in the
Home - Middle Center widget area, and the third button in the Home - Middle Right
widget area.

H OM E PAG E ST E P 4 : L A T E S T P O S T S

1. Go to Appearance > Widgets and drag the Genesis - Featured Posts widget into the Home -
Bottom widget area.

2. Configure the widget as follows, then save.


SIDEBAR WIDGETS

To add sidebar widgets to your site, go to Appearance > Widgets. Drag widgets into the
Primary Sidebar area to place them in your sidebar.

SIDEBAR WIDGETS USED IN THE DEMO:

Social icons Instructions on page 15

Sidebar photo Instructions on page 16

Search bar

Archives

Categories

Genesis eNews Extended widget This is the Join the List widget in the demo. Setup
instrcutions here.

Genesis Featured Posts This is the Popular Posts widget in the demo (see next page)
Here is the configuration for the Popular Posts sidebar widget:
SOCIAL MEDIA ICONS

BASIC TIPS

A social profile link is the direct URL to your profile on Facebook, Twitter, etc. Your social
profile link can be obtained by visiting your public profile page in your browser and copying
the URL from your address bar.

You must use the full link when setting up your icons, meaning your link should include http://
and look something like this: http://www.facebook.com/17thavenuedesigns If you just use
facebook.com/17thavenuedesigns, youll get a page error when you click on the icon.

1. In your theme download file, go to the Social folder and open the sidebar-social-icons
file. This is an editable document and this is where youll be connecting each social icon
to your social profiles.

2. Inside the social-icons file, you will see several spaces that say YOUR FACEBOOK LINK
or YOUR TWITTER LINK. Visit your social profiles, grab each link, and paste the links to
replace the corresponding text marker. Make sure that you are keeping everything
around the link the exact same. Sample code: <a href=http://facebook.com/
17thavenuedesigns.com/>

3. For the email icon, you can use the link to your contact page or use this format to link
directly to your email address: <a href=mailto:YOUR EMAIL ADDRESS>

4. After you have added all of your links, highlight the code in your social-code
document and copy it.

5. Go to Appearance > Widgets in your Wordpress dashboard. Drag a text widget into the
primary sidebar area.

6. Paste the code in the text box. Save.

N AV I G AT I O N S O C I A L I C O N S

Before you can add the navigation social icons (above the header, on the right), youll need to
set up a secondary navigation menu. Here are instructions.

1. In your download file, open the navigation-social-icons file in the Social Icons folder.

2. Follow steps 2-4 from the social media icons section above.
3. Go to your Wordpress dashboard > Appearance > Widgets.

4. Drag a text widget into the Nav Social Icons widget area.

5. Paste the code in the text box. Save.

BLOG SIDEBAR PHOTO

1. Crop your image into a square at least 250 by 250 px (it can be larger than this, but keep
in mind super-large images will slow your site). Your photo must be square if you would
like it to turn into a circle as seen in the demo. You can use a program like Photoshop or
PicMonkey to crop your image into a square.

2. Go to Wordpress > Media > Add New and


upload your image.

3. Once your image is uploaded, click edit


next to the image file name. On the next
page, copy the File URL from the right
column.

4. In your theme download file, open the


sidebar-photo file.

5. Paste your image link to replace YOUR


IMAGE LINK HERE in the code. Keep the
quotation marks around the link. If youd like,
you can link the image to your about page,
or you can remove that portion of the code.
You can also write a blurb about yourself in
the designated spot.

6. Copy the contents of the sidebar-photo file. Go to Appearance > Widgets in your
Wordpress dashboard. Drag a text widget into the Primary Sidebar area.

7. Paste the code in the text box. Save.


FOOTER WIDGETS

1. FOOTER MENU

Create a new menu at Appearance > Menus (furhter instructions here for creating a menu). Do
not apply any theme location to the menu.

Once your menu is created and saved, go to Appearance > Widgets. Drag a Custom Menu
widget into the Footer 1 widget area. Select the menu you just created. Save.

2. JOIN THE LIST

The footer join the list subscription widget uses the Genesis eNews Extended plugin. For
setup instructions, visit this tutorial on our website.

Go to Appearance > Widgets. Drag the Genesis eNews Extended widget into the Footer 2
widget area. Configure the widget how you would like, and then save.

3. I N S T A G R A M W I D G E T

To set up the footer Instagram widget, go to snapwidget.com and click Get Your Free Widget.
Configure your settings as seen below:
Click Get Widget and copy the code. Go to Appearance > Widgets in your Wordpress
dashboard. Drag a text widget into the Footer 3 widget area. Paste your Instagram code in the
text box, and then save.

3. A B O U T U S T E X T W I D G E T

Drag a text widget into the Footer 4 widget area. Use the following code and input your details
to replace the highlighted text.

First paragraph text here. First paragraph text. First paragraph text. First
paragraph text.

<br/><br/>

Second paragraph text here. Second paragraph text. Second paragraph text. Second
paragraph text.

<br /><br />

<em>

<a href="LINK/URL TO PAGE"> Some linked text here > </a>

</em>

_______________

Example: here is the code used in the demo and how it looks on the front end of the theme.
PART THREE

Everything Else
Category index page ..................................... 19
Gallery Page .................................................. 20
Set up excerpt posts ...................................... 21
Use a custom background .............................. 21
Change the color scheme .............................. 21
Set up a contact page .................................... 22
Set up a shop ................................................. 24

(click to jump to section)


CATEGORY INDEX PAGE

The category index page that allows you to add featured post widgets to a page on your blog.
You can display the categories you blog about most and make it easy for visitors to browse your
content!

1. Go to your Wordpress dashboard > Pages > Add New.

2. In the right sidebar of the page editor, find the Template section and choose Category
Index for the page template. Publish the page (do not add any content).

3. Go to > Appearance > Widgets. Drag the Genesis Featured Posts widget into the
Category Index widget area.

4. Configure your settings as follows:


GALLERY PAGE

A Gallery page will automatically be set up when you install the Rowan theme. You should see a
new Gallery tab in your Wordpress dashboard. You can access your Gallery page on your site at
http://yourwebsite.com/gallery

Heres how the Gallery works: The main Gallery Page will display your gallery entries in three
columns. When you click on one of the images on the Gallery page, you are taken to a page
where more images/content/etc can be displayed. The individual gallery entries have a back
to gallery button at the bottom so vistors can easily navigate back to your main Gallery page.

GALLERY SETUP

1. For the Gallery to work correctly, youll need to first reset your Permalinks. Go to your
Wordpress dashboard > Settings > Permalinks. Click the save changes button that
will reset your Permalinks.

2. To add a new Gallery entry, go to Gallery > Add New.

3. In the right sidebar area, add a featured image. This is what will display on your main
Gallery page.

4. In the large content area, you can add images, text, an image gallery whatever youd
like. This is what will display after the gallery entry is clicked on.

G A L L E RY F I LT E R S / T Y P E S

The Rowan theme features a filterable gallery (filter menu shown above). To set up the filters,
youll use a built-in feature called Gallery Types. In this case, a Type simply means a Category.

To add a new Gallery Type, go to Gallery > Types and create a new type. A list of all of your
active types is on the right. Once youve added all the types you want, you can categorize your
gallery entries under the different types you set up.

You must have at least two different types assigned to two different gallery entries for the
filter menu to display.
A D D G A L L E RY PAG E T O N AV I G AT I O N M E N U

On your Menus page, click Custom Links. In the URL box, add your site URL + /gallery. It should
look like this: http://yourwebsite.com/gallery. In the Link Text box, enter the text you want to
show in your menu (i.e. Gallery). Click Add to Menu.

SET UP EXCERPT POSTS

Would you like your blog to automatically display a continue reading button on your blog
posts? This is a popular feature, and its easy to implement!

1. Go to your Wordpress dashboard > Genesis > Theme Settings.

2. Find the Content Archives settings.

3. Click on the drop-down box and choose Display Post Excerpts.

4. Tick Include the Featured Image. Select the blog-excerpt (700 x 450) image size. Save
settings.

CHANGE THE COLOR SCHEME

The Rowan theme comes with four color scheme options. To change the color scheme, go to
Genesis > Theme Settings. Under Color Style, click on the drop-down menu to choose a
different color scheme. Save settings.

USE A CUSTOM BACKGROUND

To upload a custom background image, go to Appearance > Customize > Background Image
and upload your background image.

To use a custom background color, go to Appearance > Customize > Colors and select a color
under background color.
SET UP A CONTACT PAGE

This will show you how to set up the two-column contact page as seen in the Rowan theme
demo. If you would like a full-width contact form, just place your Ninja Forms shortcode by
itself in a Contact page.

1. Install and activate the Ninja Forms and Column Shortcodes plugins.

2. Go to Pages > Add New and create a Contact page.

3. Scroll down and find the Layout Content settings. Choose the full-width layout option.

4. Below the page title field, find the Column Shortcodes button (it looks like two grey
brackets). Click One Half.

5. This will be inserted into your page: [one_half][/one_half]

6. Put your cursor between the two shortcodes and make a couple spaces, like this:

[one_half]

your content/images here

[/one_half]

7. To add the Hello & Welcome text as seen in the demo, click over to HTML mode and
paste the following code between the shortcodes: <h4 class="contact">Hello &
Welcome!</h4>

8. Add an any additional content/images you would like between the shortcodes. This will
be your lefthand column.

9. Keep your contact page open and start a new tab. Go to your Wordpress dashboard >
Ninja Forms > Add New and follow this tutorial for configuration instrcutions of the
contact form (steps 7-10).
10. With your shortcode for the contact form copied per the tutorial instructions, return to
your contact page.

11. Click the shortcode button. Give the shortcode a left padding of 30, like this:

12. Click One Half - Last.

13. This will be inserted into your page: [one_half_last padding="0 0 0 30px"][/
one_half_last]

14. Make a couple spaces between the two shortcodes, like this:

[one_half_last padding="0 0 0 30px"]

your ninja forms shortcode here

[/one_half_last]

15. Paste your Ninja Forms shortcode between the two shortcodes. Publish/update page.
SET UP AN ECOMMERCE SHOP

1. Install and activate the WooCommerce and Genesis Connect plugins by searching for
them at Plugins > Add New.

2. After installing the newest version of WooCommerce, you will be taken through a setup
portal where you can set up your pages and configure the plugin. You must set up your
pages immediately. If the WooCommerce pages arent set up, you may see some page
content issues on your site.

3. You can add products from your Wordpress dashboard > Products > Add New.

For any questions about the plugin, please refer to the plugin documentation. We arent able to
provide woocommerce-related support as it was not developed by us -- best to contact
WooCommerce with questions!
Congratulations! Your theme is now fully installed.
Cue happy dance.

NEED SUPPORT?

If you have a problem installing any portion of your theme, please submit a support ticket on
our website. Wed be more than happy to assist!

Rather have us install your theme for you? You can purchase installation on our website or in
our Etsy shop.

We hope you enjoy your new Wordpress theme!

xoxo
17th Avenue
LOVE YOUR THEME?

Share It + Earn
17th Avenue is a creative web design studio focued on feminine WordPress
themes for bloggers and women-owned small businesses. Our themes are
versatile, mobile responsive, and easy to use. We offer all kinds of design
styles to fit different tastes, ranging from minimalist to rustic chic. Just about
anyone can find a theme they love in our shop!

So whether youre a blogger, web designer, or business owner, our new


affiliate program is a perfect way to make some extra income on your site
while promoting the WordPress platform, Genesis Framework, and 17th
Avenue. Wed be so thrilled to have you on board!

For more information and to apply, click here.

_________________________

SAY HELLO!

! twitter @17thavedesigns
" fb.com/17thavenuedesigns
# instagram @17thavedesigns
$ pinterest.com/17thave

Anda mungkin juga menyukai