North WordPress Theme

Created: 3/27/2013
By: Mike McAlister

Thank you for purchasing North! If you have any questions that are beyond the scope of this help file, please feel free to check out the Support Forum.


North Installation Video

Recommended Plugins

North uses a few plugins to provide extra functionality to the theme.

  • Contact Form 7 - This plugin creates a fully functional contact form for your site. You can install it directly from your dashboard in the Plugins menu, or grab it from the WordPress.org plugin repository.

    1. Log in and navigate to Plugins → Add New.
    2. Type "Contact Form 7" into the Search input and click the "Search Widgets" button.
    3. Locate Contact Form 7 in the list of search results and click "Install Now".
    4. Click the "Activate Plugin" link at the bottom of the install screen.
    5. There will now be a Contact menu item on the WordPress admin menu. See below for more instructions on using this plugin with the theme.
  • Okay Toolkit - This plugin provides the Portfolio section (via a custom post type) and several social media widgets including Twitter, Dribbble, Flickr and social media icons. Once installed and enabled, you can find the social media widgets in your Widgets section. You can install it directly from your dashboard in the Plugins menu, or grab it from the WordPress.org plugin repository.

    1. Log in and navigate to Plugins → Add New.
    2. Type "Okay Toolkit" into the Search input and click the "Search Widgets" button.
    3. Locate the Okay Toolkit in the list of search results and click "Install Now".
    4. Click the "Activate Plugin" link at the bottom of the install screen.
    5. Navigate to Settings → Okay Toolkit to modify the plugin's settings. The widgets will be available in Appearance → Widgets.

Menu Setup

WordPress menus can be found under Appearence → Menus.

  • You'll need to create at least one new menu for the header. North also supports a custom menu, which you could use in the widget area. Click the + to add a new menu.

  • Now, on the left hand side, select the pages you would like to have added to the menu. You can then click "Add to Menu" and they will show up on the right side of the page. You can drag the pages around to arrange them the way you'd like.

  • Create a drop menu by dragging menu items under and to the right of another menu item.

  • Save the menu when finished.

  • Now that you have the menu created, you need to assign it in the Theme Locations window located on the left. From the drop down menu, select the appropriate menu for the header and save.

Contact Page

The Contact Page uses the Contact Form 7 plugin, which can grab for free on the WordPress plugin repository. See installation instructions above. Once installed, you'll see there is a Contact link in the left hand sidebar of your WordPress admin.

  • If you haven't already, create a new page called Contact.

  • Go to the Contact menu on the left admin menu to configure your contact form. By default they give you a simple form with Name, Email, Subject and Message. To keep things simple, I suggest using the default form. Otherwise, to customize this form even further, check out the Contact Form 7 docs page here.

  • After you've configured and saved your contact form in the Contact menu, you will be given a small shortcode like this: [contact-form 1 "Contact form 1"]. Copy this shortcode. We'll use this to add the form to our Contact page.

  • Now head back to your Contact page. Paste the Contact 7 shortcode that you copied into the body of the post. Update the post. You should now see the form on the contact page.

Portfolio Page

North comes with a Portfolio page template, which can be used as a portfolio page for images and videos. Follow the steps below to setup the Portfolio page. I'll go over how to populate this page below.

  • Create a new page called Projects (or your own title). Note: North uses a custom post type called 'portfolio', so you won't be able to use that as the title for your portfolio page. You can name your page Portfolio, but the slug should be something other than portfolio. For example, I've used Portfolio as the page title, but changed the slug to projects. See an example.

  • On the right hand side of the page under the Page Attributes window, apply the Portfolio page template.

  • The Portfolio page doesn't output post content, so you won't need to add any content to this page.

  • Publish the page when finished.

Homepage

North comes with a Homepage template, which is used to setup the homepage. Follow the steps below to setup the Homepage. I'll go over how to populate this page below.

  • Create a new page called Home (or your own title).

  • On the right hand side of the page under the Page Attributes window, apply the Homepage page template.

  • The Homepage page doesn't output post content, so you won't need to add any content to this page.

  • Publish the page when finished.

  • Finally, we need to tell WordPress to use this page as the homepage. Go to Settings → Reading and set your Home page as the Front page. See this screenshot for an example.

Blog Page

By default, the blog will be your homepage and will show your latest posts. However, North uses the Homepage template for the homepage. You need to tell WordPress which page to use as the blog.

  • Create a new page called Blog. You don't have to add any content or apply any templates to this page. You just need to create the page so we can utilize it in the next couple steps. Publish the page.

  • Next, we need to tell WordPress to use this page as the blog page where your posts will show up. Go to Settings → Reading and set your Home page as the Front page. See this screenshot for an example.

  • Finally you need to add this page to your menu so users can access the blog page. Just go to Appearance → Menus and add your Blog page to the menu.

  • Moonwalk to the refrigerator and get a soda. You've earned it.

Archive Page

North comes with an Archive page template which displays all of your latest posts, pages and categories.

  • Create a page called Archives (or whatever title you'd like).

  • On the right hand side of the page under the Page Attributes window, apply the Custom Archive page template.

  • Once finished, publish the page.

  • You'll also need to add this page to your menu so users can access the Archive page. Just go to Appearance → Menus and add your Archive page to the menu.

Using the Theme Customizer

North is customizable via the WordPress customizer. Here, you can set a custom background image, upload a logo and set your link/accent color, and setup the homepage.

  • To access the theme customizer, click Appearance → Customize in the WordPress admin menu.
  • You should now be in a live preview of North, with the customizer on the left.
  • North Styling
    • Logo Upload - Upload your logo image here.
    • Link Color - Change the color of links throughout the theme. Defaults to blue.
    • Accent Color - Change the color of buttons, pull quotes, title logo and anything else that uses the blue color you see by default.
    • Custom CSS - Add your own CSS to modify the theme.
    • Footer Logo & Tagline - Add a text logo and site tagline to the footer of your site.
  • North Homepage Settings
    • Header Slider Title - Add a large title above the slider on the homepage. See an example.
    • Header Slider Subtitle - Add a smaller title above the slider on the homepage. See an example.
    • Title Block Text - Add text in styled block under the homepage slider. See an example.
    • Title Block Icon - Add an icon to the title block area. To choose an icon, head to the FontAwesome site and take a look at the available icons. When you find one you like, copy the name of it (i.e. icon-check or icon-plus) and paste it into the option field. See an example.
    • Portfolio Title - Add a title to the homepage portfolio sectin.
    • Portfolio Subtitle - Add a subtitle to the homepage portfolio sectin.
    • Portfolio Page Link - Select a page for your View Portfolio button to link to.
  • When you're finished making changes, click Save & Publish to save the settings.
  • Check out your site to confirm your changes.

Widgets

North utilizes a few different widgetized areas. Make sure you have the Okay Toolkit plugin installed to get all the widgets you see on the demo.

  • Sidebar - Widgets placed here will show up on standard posts and pages. On the demo, I used a search widget, recent posts, Okay Sidebar Portfolio widget and a Twitter widget. (For info on setting up the new Twitter widgets, see the video above, around the 28 minute mark.)
  • Footer - Widgets placed here will show up in the footer of all pages. On the demo, I used a text widget and a few menu widgets. If you want to utilize the footer for more widgets, you may want to turn off the footer logo and tagline in the Customizer.
  • Footer Social Icons - Add the Okay Social Icons widget here to add your social media links. If you don't see the widget, make sure you've enabled it in Settings → Okay Toolkit.

Adding Portfolio Items

To activate the Portfolio Items section of the theme, you need to first install the Okay Toolkit plugin as outlined above. The plugin will provide the theme with the Portfolio post type, which populates the Portfolio page.

  • Install the Okay Toolkit plugin using the steps above in the Recommended Plugins section. Once installed, activate the plugin.

  • Go to Settings → Okay Toolkit. At the bottom of the Okay Toolkit Options page, you'll see the Enable Portfolio Items section. Select Enable from the drop down and click Save Changes.

  • Once activated, you'll see there is now a Portfolio Items section on the admin menu.

Now that you've activated the Portfolio, you can start adding posts to it. It's very similar to adding images and video to the Blog section.

Featured Image Post

  • Create a new post and add a title and description.

  • Write your content and add whatever styling you want.

  • On the right hand side of your page, you'll see the Featured Image pane. Click Set Featured Image and upload your image. Once uploaded, scroll down and click Use as featured image. Once set, you can close the image upload window.

  • Using a custom field, you can add a block of text to your portfolio item sidebar. See the Responsibilities section here. To do this, you simply need to add a custom field, with the name portfolio-details and the value will be whatever text you'd like to place there. See an example.

  • Once you've added the featured image and content you can publish and preview your post.

Be sure to read the setup below and also check out this quick video I made showing how the galleries work.

  • To use the awesome new WordPress galleries, you first need to be running WordPress 3.5. Secondly you need to install the Okay Toolkit. See instructions above.

  • Once you have the Okay Toolkit installed, go to Settings → Okay Toolkit. Enable the Enable Gallery Feature towards the bottom of the page and Save your settings.

  • Create a new Portfolio post and add a title and description.

  • On the right hand side of your page, you'll see the Format pane. Click Gallery to set the post format and activate the gallery options.

  • Under your post editor, you'll see the Okay Gallery pane. Click the Edit Gallery button. Once the Edit Featured Gallery dialog opens, upload the images you'd like in your gallery, or select them from images you've already uploaded with the Add to Gallery link. Once your images are selected, click Add to Gallery. When finished, you can arrange your images by selecting and dragging them into position. If the theme supports image captions, you can add one in the Edit Featured Gallery page.

  • Once you've created your gallery, be sure to set a Featured Image as well, to represent the post. This can be an image from the gallery, or a different image if you'd like. Either way, each post needs a Featured Image.

  • Using a custom field, you can add a block of text to your portfolio item sidebar. See the Responsibilities section here. To do this, you simply need to add a custom field, with the name portfolio-details and the value will be whatever text you'd like to place there. See an example.

  • Once you've added your gallery, Featured Image, and content you can publish and preview your post.

Video Post

  • Create a new post and add a title and post content.

  • Next, scroll down the page a bit and look for the Custom Fields box. If you don't see the Custom Fields box, look up towards the top of your screen and click the Screen Options drop down. Make sure Custom Fields is checked.

  • Now you can add the Custom Field. The Name is going to be video and the value will be your embed code. See this image for reference: Video Custom Field. The embed code should look something like the code below. Click Add Custom Field.

  • Sample embed code:
    <iframe src="http://player.vimeo.com/video/4143170?title=0&amp;byline=0&amp;portrait=0" frameborder="0" width="1200" height="600"></iframe>

  • Using a custom field, you can add a block of text to your portfolio item sidebar. See the Responsibilities section here. To do this, you simply need to add a custom field, with the name portfolio-details and the value will be whatever text you'd like to place there. See an example.

  • Once you've added the custom field and content you can publish and preview your post.

Adding a Featured Image or Video to Blog Posts

Featured Image Posts

  • Create a new post and add a title and description.

  • Write your content and add whatever styling you want.

  • On the right hand side of your page, you'll see the Featured Image pane. Click Set Featured Image and upload your image. Once uploaded, scroll down and click Use as featured image. Once set, you can close the image upload window.

  • Once you've added the featured image and content you can publish and preview your post.

  • Note: The featured image will only show up on the single post page, not the main blog page. It will be displayed above your post content and it will also be used as a background for your title area.

Video Posts

  • Create a new post and add a title and post content.

  • Next, scroll down the page a bit and look for the Custom Fields box. If you don't see the Custom Fields box, look up towards the top of your screen and click the Screen Options drop down. Make sure Custom Fields is checked.

  • Now you can add the Custom Field. The Name is going to be video and the value will be your embed code. See this image for reference: Video Custom Field. The embed code should look something like the code below. Click Add Custom Field.

  • Sample embed code:
    <iframe src="http://player.vimeo.com/video/4143170?title=0&amp;byline=0&amp;portrait=0" frameborder="0" width="1200" height="600"></iframe>

  • Once you've added the custom field and content you can publish and preview your post.

Post and Page Subtitles

Along with the title of any post or page, you can also set a subtitle, just like you see throughout the demo. To add subtitles, you simply need to add a custom field, with the name subtitle and the value will be your subtitle text. See an example.

Post Styles

North comes with a few custom element styles, which are used to easily add extra styling to your WordPress posts. To use the post styles, simply select your text and then select from the Styles Drop Down Menu which style you would like to apply. You'll be able to see the changes live, in your editor.

  • Intro Title - As seen on the demo, this is a nicely styled block of text to introduce your page. Similar to blockquote styling.

  • Pull Quote - As seen on the demo, you can use this to pull small quotes or small blocks of text to the right of the page. It will be styled with the color you chose as your Accent Color in the North Styling, or it will be red by default.

  • Highlight Text - As seen on the demo, this adds a highlighted background to your inline text. Nothing fancy here, but it adds a nice touch.