Some parts of this video may have changed slightly since it was first recorded. Please see the instructions below for the latest usage. Most notably, you will need to install the Array Toolkit, not the Okay Toolkit.
Once you’ve activated your theme, you’ll see a friendly notice across the top of the page, with a link to the Getting Started page (Appearance → Getting Started). Here, you can view the help file, enter your license for theme updates, view the latest changes to the theme and visit us on our support forum.
Activate Your Theme License
Each theme comes with a 1 year license for support and updates. By activating your theme license, you can get theme updates right from your WordPress dashboard. These updates will keep your theme in tip-top shape, with the latest bug fixes and new features.
- Locate your theme’s license key in your Array Dashboard in your Downloads section In the pop-up window, copy your license key.
- Now, in your WordPress dashboard (where your theme is installed), go to Appearance → Getting Started and click the License tab.
- Paste your license key into the field and click Save License Key.
- Once your license key is saved, click Activate License.
- If your key is valid, you will see a success message. You will now receive a notice on Appearance → Themes whenever there is a new version of the theme available.
- To update your theme, click update now and follow the instructions. Note: Your theme will be overwritten with the latest files, which will overwrite any changes you’ve made to the theme files. Your posts, pages and settings will not be modified in this update.
Slate uses a few plugins to provide extra functionality to the theme.
Array Toolkit – This plugin provides the Portfolio section (via a custom post type) and several social media widgets and icons. You can install it directly from your dashboard in the Plugins menu, or grab it from the WordPress.org plugin repository.
- Navigate to Plugins → Add New.
- Type “Array Toolkit” into the Search input and click the “Search Widgets” button.
- Locate the Array Toolkit in the list of search results and click “Install Now”.
- Click the “Activate Plugin” link at the bottom of the install screen.
- Once activated you will see the Portfolio Items menu on the WordPress admin menu and find new widgets on the Widgets page. There are no settings for the Array Toolkit, features are activated automagically based on what your theme supports.
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.
- Navigate to Plugins → Add New.
- Type “Contact Form 7” into the Search input and click the “Search Plugins” button.
- Locate Contact Form 7 in the list of search results and click “Install Now”.
- Click the “Activate Plugin” link at the bottom of the install screen.
- There will now be a Contact menu on the WordPress admin menu. See below for more instructions on using this plugin with the theme.
Slate is customizable via the WordPress customizer, where you can change Slate’s various settings.
- To access the theme customizer, click Appearance → Customize in the WordPress admin menu.
- 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 an intro title to the top of your Portfolio page.
- When you’re finished making changes, click Save & Publish to save the settings.
- Check out your site to confirm your changes.
Creating the Homepage Layout
Slate’s homepage is comprised of several different features of Slate, and requires a little setup to look like the demo.
Create and assign the Homepage
- If you haven’t already, create a new page called Home.
- You don’t need to add any content to this page, the various sections will be automatically brought into 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 Homepage settings are in Appearance → Customize and will be explained further below. You will populate the homepage with Slider Items, Portfolio Items, Blog posts, and optional text widgets in the services section, all detailed below.
Add a slider to the Homepage
Once you’ve installed the Array Toolkit, you’ll notice you now have a Slider Items menu in your admin menu. This is where you’ll create your slides.
- Make sure you have the Slider section enabled in Appearance → Customize → Slate Homepage Settings.
- Click Slider Items → Add New in the WordPress 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. Each slide requires a Featured Image. 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 meta box and add a link for your slide. This can be a link to another page on the site or an external link.
- Once finished, publish the slide and check it out on your homepage.
Add Text Columns to the Homepage
Using the Slate Text Column widget, you can add blocks of text to the Homepage to act as a services section.
- Make sure you have the the Services section enabled in Appearance → Customize → Slate Homepage Settings.
- Visit Appearance → Widgets and locate the Slate Text Column widget in your list of available widgets, and drag it to the Services Text Columns widget area.
- Add a title for your text column, a URL to link to (optional), and the content you’d like below your title.
- You may also choose an icon to represent your text block. 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 Column Icon field in the widget.
- When complete, your widget should resemble this sample widget.
Add Portfolio Items to the Homepage
Portfolio Items are automatically added to the Homepage, as long as you have the Portfolio section enabled in Appearance → Customize → Slate Homepage Settings. See the Adding Portfolio Items section below to get started creating your Portfolio Items.
Add Blog Posts to the Homepage
Blog posts are automatically added to the Homepage, as long as you have the Blog section enabled in Appearance → Customize → Slate Homepage Settings.
Add Testimonials to the Homepage
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>
Adding Portfolio Items
To activate the Portfolio Items section of the theme, you need to first install the Array Toolkit plugin as outlined above. The plugin will provide the theme with the Portfolio post type, which populates the Portfolio page.
Featured Image Post
- Under the Portfolio Items menu, click Add New.
- 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.
Image Gallery Post
- To use the image slider, you need to first install the Array Toolkit plugin as outlined above.
- 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 Array 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.
- Once your images are selected, click Add to Gallery. You can arrange your images by selecting and dragging them into position.
- 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.
- Once you’ve added your gallery, Featured Image, and content you can publish and preview your post.
- Create a new post and add a title and post content.
- Scroll down to find the Video meta box. Add your video embed code from YouTube, Vimeo, etc. Your code should look something like this:
- Sample embed code:
<iframe src="http://player.vimeo.com/video/4143170?title=0&byline=0&portrait=0" frameborder="0" width="1200" height="600"></iframe>
- Next, you must set a Featured Image to represent your video post in the Portfolio grid. This can be a screenshot from the video or any image you’d like.
- Once you’ve added the subtitle, Featured Image and content you can publish and preview your post.
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.
Creating the 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 your 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.
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 a subtitle, simply add text to the Subtitle meta box on any post or page edit screen. See an example.
You’ll want to create at least one menu for the header navigation.
- WordPress menus can be found under Appearence → Menus.
- If you don’t have a menu already, click create a new menu to create one.
- On the left hand side of the Menu page, select the pages to add to your menu and click Add to Menu. Drag the pages around and arrange them any way you’d like. Create a drop menu by dragging menu items under and to the right of another menu item.
- Now that you have the menu created, you need to assign it to the header in the Theme Locations section.
- Save the menu when finished.
Slate utilizes several widgetized areas. Make sure you have the Array Toolkit plugin installed to get all the widgets you see below.
- Header Toggle Icons – This widget area uses the Array 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.
- Sidebar – You can put whatever you want in the sidebar! On the demo site, I used the Array Recent Posts Widget, the Slate Sidebar Portfolio Widget and a search field.
- Footer Widget Section – There is also a Footer Widget section which fits 3 widgets across the bottom of your site.
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 text with a yellow background.
- Intro Title – As seen on the demo, this is a nicely styled block of text to introduce your page or post.