Slate WordPress Theme

Created: 2/14/2012
By: Mike McAlister

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


Installation Video

Recommended Plugins

This theme uses a few plugins to provide extra functionality to the theme. Install these before proceeding.

  • 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 gallery features 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.

Okay Toolkit Settings

In order to use the widgets, galleries and portfolio items, you have to activate them in the Okay Toolkit.

  • Make sure the Okay Toolkit plugin is installed and activated. Go to Settings → Okay Toolkit in the admin menu.

  • You can enable or disable each widget depending on what you want to use. Slate uses the Twitter widget and Social Media Icons widget. You may also use the other ones if you'd like!

  • Activate the Portfolio Items and Gallery feature towards the bottom of the page. Once activated, a Portfolio Items section will be added to the admin menu. We will also get to use the gallery in the directions below.

  • Save the plugin settings.

Slate Installation

  • First of all, you should have WordPress installed and ready to roll. It's always recommended that you start with a fresh install of WordPress to prevent a conflict of settings from old themes, etc. Make sure you backup your old theme and your posts, pages, etc. in case of a catastrophe!

  • Unzip the theme package. In the folder you'll find the Slate docs and a zip titled slate.zip. This is the theme zip that you need to upload into WordPress.

  • In the WordPress admin, go to Appearance → Themes. Click on the big Install Themes tab at the top of the page. Next, click the Upload link and navigate to the slate.zip file. Install and activate the theme.

  • Optional: Use the included dummy data to get your theme setup with some sample posts, pages and portfolio items. Go to Tools → Import → WordPress. Browse to the Slate download folder and locate the Dummy Data folder. Select the XML file and upload it. You can also find that xml file here: slate.xml Make sure you have the Okay Toolkit installed and the Portfolio items enabled before importing. Otherwise the portfolio items will not import properly.

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.

Creating the Homepage

The Contact Page uses the Homepage template and needs to be assigned to the front page of your blog.

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

  • You don't need to add any content to this page, as it will all be brought in by the homepage template.

  • In the right hand sidebar, in the Page Attributes section you'll see the Template settings. From the Template dropdown, select the Homepage. This will apply the unique homepage layout to this page. Publish your page when you're done.

  • Finally, we need to tell WordPress to use this page as the homepage. Go to Settings → Reading. In the Front page displays section, select A static page. Then, set your Home page (created above) as the Front page and your Blog page as the Posts page. Save changes when finished.

  • The rest of the Homepage settings are in Appearance → Customize and will be explained further below.

Creating the Blog Page

The Blog page needs to be assigned to as the Posts page of your blog.

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

  • You don't need to add any content to this page since this page will just bring in your blog posts. Publish your page when you're done.

  • Finally, we need to tell WordPress to use this page as the Posts page. Go to Settings → Reading. In the Front page displays section, select A static page. Then, set your Blog page (created above) as the posts page and your Homepage page as the Front page. Save changes when finished.

  • The rest of the Blog settings are in Appearance → Customize and will be explained further below.

Menu Setup

WordPress menus can be found under Appearence -> Menus.

  • You'll need to create at least one new menu for the header. Slate 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.

Setup Slate Using the Theme Customizer

Slate is customizable via the WordPress customizer. Here, you can set a custom background image, upload a logo and set your link color.

  • To access the theme customizer, click Appearance → Customize in the WordPress admin menu.
  • You should now be in a live preview of Slate, with the customizer on the left.
  • Use the various menus to set the site title and description, background, logo, accent/link color and more. Make sure you go all the Slate settings in the customizer!
  • Slate Style Settings - Upload your logo, change your color scheme and accent colors, and add custom CSS.
  • Slate Header Settings - Set your homepage header title, subtitle and hidden header toggle text.
  • Slate Homepage Settings - Enable or disable any of the homepage sections and add titles for each section.
  • Slate Portfolio Settings - Add the large titles below the large image on the Portfolio page.
  • When you're finished making changes, click Save & Publish to save the settings.
  • Check out your site to confirm your changes.

Add A Slider to the Homepage

Once you've installed the Okay Toolkit, you'll notice you now have a Slider Items menu in your admin menu. This is where you'll create your slides.

  • Click ond Slider Items → Add New in the admin menu.

  • Add a slide title, which won't be outputted anywhere so you can title it anything.

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

  • Scroll down to the Slide Link box and add a link for your slide. This can be a link to another page on the site or an external link.

  • The content area, excerpt and custom fields don't do anything with Radius, so you can disregard them. You only need to fill out the Featured Image and Slide Link.

  • Once finished, publish the slide and check it out on your homepage.

Widgets

Slate utilizes several widgetized areas. Make sure you have the Okay Toolkit plugin installed to get all the widgets you see below.

  • Header Toggle Icons - This widget area uses the Okay Social Media Icons Widget to add various links to your social sites. Simple add the widget to this section and fill out your links. See an example.

  • Services Text Columns - This area uses the Okay Text Column widget. Drag this widget to the Sidebar area and add your title, link, icon and content.

    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. fa-check or fa-plus) and paste it into the widget. Your widget should look something like this.

  • Testimonials - This area uses plain text widgets. Drag the text widget to the sidebar area. Use the following code to display your testimonials like the demo site:

    <h3>Design is a means toward accomplishing the end goals of serving markets and generating profits. Furthermore, design is an element in social responsibility.</h3> <h2>— Thomas F. Schutte</h2>
  • Sidebar - You can put whatever you want in the sidebar! On the demo site, I used the Okay Recent Posts Widget, the Okay Themes Sidebar Portfolio Widget, Twitter and a search field.

  • Footer Widget Section - There is also a Footer Widget section. You can add text widgets, the Twitter widget, and a custom menu here just like I did on the demo. Or don't, whatever.

  • Notable Widgets

  • Okay Recent Posts Widget - This is a really cool multi-widget that grabs your latest posts, tags, popular posts, and comments. Just drag the Okay Recent Posts Widget to the Sidebar area and fill out the appropriate settings.

  • Okay Portfolio Items Widget - This is just a simple widget that brings in a few of your latest portfolio items. Drop it in your sidebar and tell it how many to show.

  • Okay Twitter Widget - Use this widget to pull in your latest tweets. Just enter your title, username and number of tweets to show. If the widget does not pull in your tweets, make sure they are not protected. This is usually the case if the widget isn't working.

  • Okay Dribbble Widget - Use this widget to show your latest shots from Dribbble.

  • Okay Flickr Widget - Use this widget to show your latest shots from Flickr.

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 (Blocks) 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 & Gallery Feature section. Enable them both by selecting Enable from the drop down.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.

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

If you have the latest version of Verb (v1.3), WordPress (3.5+) and the Okay Toolkit (v1.5), you can use the new Custom Image Galleries. Be sure to read the setup below and also check out this quick video I made showing how it works.

  • 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 Portfolio Item & Gallery Features towards the bottom of the page and Save your settings.

  • Create a new portfolio item in Portfolio Items → Add New.

  • 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 added your images and content you can publish and preview your post.

Video Post

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

  • You'll need to add a featured image thumbnail to represent your video. 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.

  • 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 okvideo 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.

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.

Video Posts

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

  • You'll need to add a featured image thumbnail to represent your video. 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.

  • 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 okvideo 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 Styles

Slate 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 drop down which style you would like to apply. You'll be able to see the changes live, in your editor.

  • Highlight - This will highlight the hell out of some text.

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

Page Sub Titles

You can also add a subtitle to your pages, which will appear under your large page title.

  • Go to the page you'd like to add a subtitle to. Scroll down to your Custom Fields section.

  • Now you can add the Custom Field. The Name is going to be subtitle and the value will be your subtitle. See this image for reference: Subtitle Custom Field. Click Add Custom Field and save your page.