Hitched Wordpress Documentation

Thank you for purchasing Hitched. What's included in your downloaded files
We sincerely hope you enjoy using
Besides the theme itself, the downloaded files
it and that it works a charm for your also include this documentation and a folder
wedding website. containing a few plugins that are used alongside
Hitched. These are located in the plugins folder,
While putting together your website, you may
and are:
find it useful to compare your work in progress
against the demo site. The direct link to the ›› Image Widget by Modern Tribe. See http://
demo is: wordpress.org/extend/plugins/image-widget/

http://164a.com/hitched-wp/ ›› Visual Form Builder by Matthew Muro. See

http://wordpress.org/extend/plugins/visual-
form-builder/

›› Simple Google Maps Short Code by Pippin

Williamson. See http://wordpress.org/extend/
plugins/simple-google-maps-short-code/

›› Font Awesome for Wordpress by Studio164a

(that's us!). Currently unreleased elsewhere.

HITCHED WP / page 1
Getting Started
To install this theme you must have a working version of WordPress already installed.
For information about installing the WordPress platform, please see the WordPress Codex –
http://codex.wordpress.org/Installing_WordPress

Installation

When you are ready to install the Hitched theme, you must first upload the theme files and then
activate the theme itself. You can upload the theme files in two ways:

›› FTP Upload: Using your FTP program, upload the un-zipped theme folder into the /wp-content/
themes/ folder on your server.

›› WordPress Upload: From the Wordpress Admin Dashboard, navigate to Appearance > Add New
Themes > Upload. Go to browse, and select the zipped theme folder. Click "Install Now" and the
theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate the
Hitched theme.

Installing Plugins

Once the Hitched theme is installed, you are ready to add the plugins.

From the Wordpress Admin Dashboard, navigate to Plugins > Add New. Go to Upload, click Choose File,
then select the zipped plugin located under the plugins folder in the unzipped folder you downloaded
from ThemeForest when you purchased Hitched.

Click "Install Now" and the plugin will be uploaded and installed.

Once the plugin is uploaded, you need to activate it.

Please note that some features of the theme as you see it on the demo site will not work unless the
four plugins included in the plugins folder are installed and activated.

HITCHED WP / page 2
Creating your site menu

By default, the horizontal navigation at the top of your site will include links to all the pages you
create. Often, this won't be quite what you're after. Thankfully, customising the menu is very easy in
Wordpress.

Go to Appearance > Menus.

Enter a name for the menu and click the Create Menu button.

You can now add menu items by adding custom links or including pages, galleries or categories. Once
you're finished, click Save Menu.

The final step is to assign the menu you just created to the correct theme location. At the top left of the
page, under the Primary Navigation field, select the menu you just created. Click Save.

The Wordpress Codex has more information about creating and managing menus:

http://codex.wordpress.org/Appearance_Menus_Screen

General settings

In your Wordpress dashboard, go to Appearance / Hitched Theme Settings. 

On this page, you can choose the skin you want to use and the background texture. You can also enter
the basic details about your wedding (bride, groom, date and location of the wedding), which are used
in the site design.

Set up a homepage

Go to Pages / Add new.

Create a page called Homepage (or whatever you'd like to call it) and select the Homepage template.
Click Save as Draft or Publish. 

Now you'll see that there are a few extra boxes in the page editing screen. The two text-based panels
each get their own text editor, and both work exactly the same as the regular Wordpress text editor. 

The Carousel and Slider tabs let you select a gallery to use for the homepage carousel and slider. You'll
first need to create the galleries. See below.

The final step is to tell Wordpress that the page you just created should act as your front page. To do
this, go to Settings > Reading. For the first setting (Front page displays), select A static page and for
the Front page setting, choose the page you just created.

Click Save Changes.

HITCHED WP / page 3
Set up the blog

Go to Pages / Add new.

Create a page called Blog (or something else, if you'd prefer) and leave it blank. Click Publish.

Go to Settings > Reading and for the first setting (Front page displays), select A static page (you may
already have done this if you've already set up your homepage, as per the instructions above). For the
Posts page setting, select the page you just created.

Click Save Changes.

Create galleries for homepage slider and homepage carousel

Go to Galleries / Add new. 

Give your gallery a title, then click the Add Media button. Create the gallery in the usual Wordpress
manner. See: http://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages

Once you have inserted the gallery, you should see the Gallery icon fill the editor, indicating that the
Wordpress [gallery] shortcode has been added. 

Click Publish. 

To change the gallery size, you need to change the shortcode in the Worpress editor. Switch to
the Text view of the editor (this is called HTML if you're using a version of Wordpress before 3.5).
You'll see something like [gallery]. Change this to include a size value. Example: [gallery
size="medium"]. Other values you can use for the size are "thumbnail" (the default) and "large". 

[gallery] is a Wordpress shortcode. More details about implementation can be found at 
http://codex.wordpress.org/Gallery_Shortcode

Note about image sizes: For the homepage slider, the recommended dimensions for images are
900px by 340px.

Create a guestbook

Go to Pages / Add New.

Give your page a title and add text or images to be displayed before the guestbook messages.

Below the text editing area, look for the Discussion metabox (if it’s not there, click on Screen Options
at the top right of the page and ensure that “Discussion” is ticked). Make sure that “Allow comments”
is ticked.

In the Page Attributes meta box, select Guestbook for the Template setting.

Click Publish.

HITCHED WP / page 4
Advanced theme customisation
If you want to make more substantial changes to the way the theme looks, the best approach is to
use a child theme. This allows you to create changes without modifying the core theme files, which
means that when the theme is updated, you can update to the latest version without worrying about
overriding the changes you have made.

Please note that basic familiarity with HTML and CSS is expected. For some customisations you will also
benefit from being familiar with PHP and Wordpress’ core functions as well.

For convenience, we have bundled a child theme skeleton with the downloaded theme. To start
using it, upload it to your themes folder (just as you did with the main Hitched theme), navigate to
Appearance > Themes in your Wordpress dashboard and click Activate for the theme.

For detailed information about child themes, see the Wordpress Codex article:

http://codex.wordpress.org/Child_Themes

CSS changes

CSS changes should be added to the custom.css file included in the child theme directory. This loads
after all the parent theme stylesheets, so any rules you apply here will override the rules in the parent
stylesheet.

If you find that your changes are not working as expected, try clearing your browser cache. If the
problem persists, it may be that your CSS rule is being overridden by one of the parent stylesheets
because of the order of specificity. For more information about that, see this useful introduction on
Nettuts:

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css-specificity/

To assist with debugging problems like this, get a web developer toolbar for your browser (like Firebug
in Firefox), if it doesn’t have one already, and try to identify which CSS rule is overriding yours.

Template changes

You may want to make changes to the basic layout of specific parts of the page. With child themes, this
is relatively easy.

First of all, identify which template file in the parent theme you need to change. Once you have done so,
create a copy of this template file in the child theme directory. Be sure to give it the exact same name.

Next, open up the copy you created in your child theme and edit it as you wish. You should see the
change reflected immediately.

HITCHED WP / page 5
Custom styles
Hitched comes with a number of custom styles which you can apply to different text elements.

To use these, make sure you are using the Visual mode while editing your page content. If you only see
one line of buttons, click the second last button on the row, or the button that looks like this:

After clicking that, you should see two rows of buttons. At the far left of the second row is a drop
down menu labelled Styles. This is the one you will be using to apply custom styles to your text.

Under the hood, applying a style to a text element like a header simply gives it a special CSS class. If
you need to remove a custom style you've applied, you can do this by going into the Text (or HTML)
mode and removing the class name.

Note: You may find it helpful to look at http://164a.com/hitched-wp/elements/ while working through
this section.

Custom styles for headers

Header font variation

By default, all headers inside your page content use the Biter font, which is a serif font. You can change
a header to use the Helvetica Neue font (sans-serif) by creating a header (any of Header 1 - Header 6),
selecting it and then selecting "Header font variation" from the Styles menu. Class applied: alt

Header with underline

This will apply a divider below the heading. It can be applied to any header. Class applied: underline

Header with overline

This will apply a divider above the heading. It can be applied to any header. Class applied: overline

Section header
This styles the header as a section header. Examples of this are the Our Story, Wedding and From the
Blog headers on the homepage of the demo (http://164a.com/hitched-wp/). It can be applied to any
header, but note that section labels are always the same size visually, regardless of which header you
choose. Class applied: section_label

Custom styles for lists

Horizontal list
Turns a list into a horizontal list. It can only be applied to unordered lists. Class applied: horizontal

List with icons

Turns a list into a list where you can use FontAwesome icons as the list bullet. You have to add the
FontAwesome icon at the start of each list item. It can only be applied to unordered lists. Class applied:
icons

Centered list
Centers a list. It can be applied to both ordered and unordered lists. Class applied: centered

HITCHED WP / page 6
Custom styles for paragraphs

Intro paragraph
Enlarges the text of the paragraph selected. For an example, see the Our Story page on the demo site
(http://164a.com/hitched-wp/our-story/), where the first paragraph of both columns are given this
style. Class applied: intro

Custom styles for block quotes

Left aligned block quote

Simply aligns a block quote to the left side of the page, with other text wrapping around it. Class
applied: float_left

Right aligned block quote

Aligns a block quote to the right side of the page, with other text wrapping around it. Class applied:
float_right

HITCHED WP / page 7
Shortcodes

Column shortcode

Hitched comes with a [column] shortcode you can use to generate column-based layouts.
A basic two column structure can be created like this: 

[column]
This is text in the first column
[/column]

[column last="true"]
This is text in the second column
[/column]

Note the last="true" value passed to the second column – this is required to ensure they sit nicely
alongside each other. 

To change the width of a column, set the width parameter. Examples:

[column width="1/3"]
[column width="1/4"]
[column width="66%"]

Valid values are 1/2, 1/3, 1/4, 1/5, 2/3, 2/5, 3/4, 3/5, 4/5 and any percentage (with the percent sign). You
can also set a custom width as a pixel measurement, like 300px. Note that to preserve the template's
responsiveness, you should avoid pixel widths and instead use the fractions or percentages. 

Additional parameters for the column shortcode: 

class
Give the column a custom class. 
Usage: class="my_class"

style
Pass a block of inline styles. 
Usage: style="background-color: #bbb;"

divider
Whether to give the column a right divider. This is off by default. 
Usage: divider="true"

id
Give the column a custom HTML ID. 
Usage: id="my_id"

HITCHED WP / page 8
Recent posts shortcode

On the homepage of the demo, you'll see a little block displaying the three latest posts from the blog.
This is added using the recent_posts shortcode. Basic usage: 

[recent_posts]

Parameters: 

count
Set how many posts should be displayed. Default is 5
Usage: count=3

post_type
Choose which post type should be displayed. Set to 'post' by default. 
Usage: post_type="post"

excerpt_length
Set how many words the excerpt should be. The default is 18. 
Usage: excerpt_length=20

Note that non-standard post formats are excluded from display. 

Flickr shortcode:

Hitched comes bundled with Flickr integration through a custom shortcode, as well as a Flickr widget.

Before you can use the Flickr tools, you need to get an API key from Flickr. This is easier than it sounds.

1. Go to http://www.flickr.com/services/apps/create/apply/. If you are asked to login, do so.

2. Choose the non-commercial key option unless you're sure you need the commercial key.

3. Fill out the fields about your "app", tick the boxes and submit. Your API key will be displayed on the
next screen.

Once you have the API key, go to your site's dashboard and go to Appearance > Hitched Theme
Settings. Scroll to the bottom and enter your Flickr API key.

Now that you have set your API key, you can use the Flickr shortcode or widget. The shortcode takes
the following format:

[flickr username="your_username"]

Parameters:

count
The number of images to display. The default is 12.
Usage: count=10

size
The image size to use. You can use any of the options specified at http://www.flickr.com/services/api/
misc.urls.html. The default is s (75 x 75).
Usage: size="m"

HITCHED WP / page 9
height
Set an arbitrary height for the images to be displayed at. Note that this will scale the image to the
specified height. By default, this is blank.
Usage: height=100

width
Set an arbitrary width for the images to be displayed at. Note that this will scale the image to the
specified width. By default, this is blank.
Usage: width=100

Instagram shortcode

Hitched comes bundled with Instagram integration through a custom shortcode, as well as an
Instagram widget.

First of all, you need to obtain and set your Instagram access token. Here's how:

1. In your site's dashboard, go to Appearance > Hitched Theme Settings. Scroll to the bottom where
you will see the field Instagram access token. Below the input field is a link to obtain an access
token. Click it.

2. A popup will open. Click the button to take you to Instagram, where you will authorise the Hitched
theme to access your basic Instagram account information.

3. Next, you will be redirected back a screen where your access token is displayed. Copy and paste this
into the field in your theme settings page.

You are now ready to use the Instagram shortcode or widget. The shortcode takes the following format:

[instagram username="your_username"]

Parameters:

count
The number of images to display. The default is 12.
Usage: count=10

height
Set an arbitrary height for the images to be displayed at. Note that this will scale the image to the
specified height. By default, this is 75.
Usage: height=100

width
Set an arbitrary width for the images to be displayed at. Note that this will scale the image to the
specified width. By default, this is 75.
Usage: width=100

cache
How many minutes you would like to cache the images for. By default, this is set to 60.
Usage: cache=30

HITCHED WP / page 10
Button shortcode

Hitched has three different button styles you can use in your theme, through the use of a simple
shortcode. The shortcode takes the following format:

[button link="http://164a.com"]Text inside button[/button]

This creates a button with the default style, which links to http://164a.com.

Parameters:

link
The page you want to link to.

variation
Use one of the variations by setting variation to 1 or 2. This is blank by default.
Usage: variation=1

large
Set this to true if you want to use the wider button. This is false by default.
Usage: large="true"

HITCHED WP / page 11
Twitter widget
In order to use the Twitter widget, you have to create a Twitter application. This is much easier than it
sounds!

Follow these simple steps:

1. Go to https://twitter.com/apps to register your app. You may be asked to log in.

2. Once you are logged in, click the button that says Create a new application.

3. Complete the form, tick the terms and conditions and solve the Captcha. Create your application.

4. You have now created a Twitter application. The final step is to create an access token. Do this by
clicking the button at the bottom of the page.

5. Finally, copy and paste the relevant details about your Twitter application into the provided fields on
the theme settings page.

Creating posts

Create gallery post

Go to Posts / Add new

Click the Add Media button, select the photos you want to add and insert them into the post. 

Once you have inserted the gallery, you should see the Gallery icon fill the editor, indicating that the
Wordpress [gallery] shortcode has been added. 

Under Format, select Gallery.

Click Publish. 

You'll see that this is all pretty similar to the way you created galleries for the homepage slider and
carousel. The main difference between a post with the gallery format and a gallery created through the
Galleries / Add new method is that the former will be displayed in the blog feed.

Create quote post

Go to Posts / Add new. 

The title of the quote should be the name of the person who said it (i.e. Mary Poppins). The content of
the quote is the actual quote text. 

Under Format, select Quote. 

Click Publish. 

HITCHED WP / page 12
Forms

Create a contact form

First, make sure that Visual Form Builder has been installed and activated. See the Installing Plugins
section if you're not sure how to do this.

Once Visual Form Builder is activated, a new menu section will appear in the sidebar in the Wordpress
dashboard, towards the bottom. Click Add New Form.

Enter the details about your form, as per the

example shown above.

Next, you will be taken to a page where

you can visually edit the form. For the
contact form we use on our demo version of
Hitched, this is how we configured the form:

HITCHED WP / page 13
To add a field to your form, click on one of the field options in the left box titled Form Items. Once the
field is added to the form, you can collapse the field to reveal extra settings you can define for each
field. These are the fields we have added:

›› Name – Text field with Name set to "Name". Select "Yes" for Required to make sure that people
enter a name when filling out the form.
›› Email – Email field with Name set to "Email". Select "Yes" for Required.
›› Phone – Phone field with Name set to "Phone".
›› Message – Textarea field with Name set to "Message". Select "Yes" for Required.

The verification fields are added in by Visual Form Builder by default.

After you have created the form, go to Pages > Add New Page and create a page called Contact Us (or
any other name you'd prefer). For Template under Page Attributes, select Fullwidth Page.

Above the page area, you'll see a little extra icon next to the Add media button. Click this button, which
will bring up a window where you can select the form you just created and insert it into the page as a
shortcode. See the screenshot below:

HITCHED WP / page 14
Create an RSVP form
First, make sure that Visual Form Builder has been installed and activated. See the Installing Plugins
section if you're not sure how to do this.

Once Visual Form Builder is activated, a new menu section will appear in the sidebar in the Wordpress
dashboard, towards the bottom. Click Add New Form.

Enter the details about your form, as per the

example showed above.

Next, you will be taken to a page where you

can visually edit the form. For the RSVP form
we use on our demo version of Hitched, this
is how we configured the form:

HITCHED WP / page 15
To add a field to your form, click on one of the field options in the left box titled Form Items. Once the
field is added to the form, you can collapse the field to reveal extra settings you can define for each
field. These are the fields we have added:

›› Are you attending? – Open the Fieldset that is included in the form by default and set Legend to
"Are you attending?". In order to split the form into two columns, we also add the class column_40
to the CSS classes field. Example shown:

Under the Are you attending? fieldset,

add a Radio field. Leave Name and
Description blank and provide two
options: "Yes, I / we will be there" and
"No, I / we cannot make it". (As with
all these settings, feel free to change
it to your own wording. This is purely
for example's sake.) Set Required to No
and select the One Column layout for
Options Layout.

Next, add a new Fieldset and give it the Name "Name(s)".

Under CSS classes, add column_60 column_last float_right.

HITCHED WP / page 16
Under this fieldset, add a few Text fields with blank Name and Description. On our demo site, we
added three, but you may want to add more. For each one, we also set a default value to clarify what is
expected in each field.

The verification fields are added in by

Visual Form Builder by default.

After you have created the form, go to

Pages > Add New Page and create a
page called RSVP (or any other name
you'd prefer). For Template under Page
Attributes, select Fullwidth Page.

Above the page area, you'll see a little

extra icon next to the Add media button.
Click this button, which will bring up a
window where you can select the form you
just created and insert it into the page as a
shortcode. See the screenshot below:

HITCHED WP / page 17
Credits
›› colorBox – http://www.jacklmoore.com/colorbox

›› Responsive Slides – http://responsive-slides.viljamis.com/

›› flexNav – https://github.com/indyplanets/flexnav

›› hoverIntent – http://cherne.net/brian/resources/jquery.hoverIntent.html

›› Selectivizr – http://selectivizr.com/

›› CSS3PIE – http://css3pie.com/

›› FontAwesome – http://fortawesome.github.com/Font-Awesome/

›› Image Widget – http://wordpress.org/extend/plugins/image-widget/

›› Visual Form Builder – http://wordpress.org/extend/plugins/visual-form-builder/

›› Simple Google Maps Short Code – http://wordpress.org/extend/plugins/simple-google-maps-short-code/

More help

We are more than happy to assist with any theme-related bugs or issues that we've overlooked. If you
have a basic Wordpress, HTML, CSS or Javascript question, please Google it first to see if you can find
the answer yourself. While we strive to respond to all questions quickly, theme issues will get priority.

Email: [email protected]

Twitter: @studio164a

HITCHED WP / page 18