By: Mike McAlister
I have provided several installation screencasts to get you started with the Element theme. Be sure to pay attention, as this will help you get the theme installed with ease!
You should have the latest version of WordPress installed. This will ensure you're up to date, and will allow the theme to use all the new features of WordPress.
Install the theme by going to Appearence -> Themes -> Install Themes. Navigate to the theme download and locate the UploadtoWP.zip. Upload this file. (Note, you can't just upload the entire theme download file. You have to first unzip the file you download from Okay Themes and then find the UploadToWP.zip.)
Now you can go to Appearence -> Themes. You should now see the Element theme available. Activate the theme.
Install the dummy data which is included. (You can also get it here: elementwordpresstheme.wordpress.2011-12-07.xml ) This will ensure the posts/pages get laid out properly with the correct page templates. Go to Tools -> Import -> Wordpress. Browse to the Element download folder and locate the Dummy Data folder. Select the XML file and upload it. Be sure to click "download and import all attachments".
Now you need to grab a few plugins. Go to Plugins -> Add New. Search for "Options Framework" and install this plugin. This will provide the theme options.
Next you need to grab the Contact Form 7 plugin. Once again, go to Plugins -> Add new. Search for "Contact Form 7". Install this plugin. To use this plugin, you'll need to go to the Contact menu (now on the left menu) and create a form. Once you're done, it will give you a shortcode you can use in your contact page. If you've used the dummy data, this should already be in there for you.
Theme options are beneficial to the Element theme. If you didn't watch the screencasts (fool!), you can read the directions below. You must go through the theme options setup before the theme will work properly.
On the left admin menu, click Appearance -> Theme Options.
On the Basic Settings tab you'll find a logo upload, link color, blog and portfolio category settings, and Google Analytics. Each setting has a short description next to it.
On the Homepage Settings tab, you can add text to show up in your homepage header. The Homepage Header Tagline Title and Text will show up on the left, while the Homepage Header Box Title will float in a box on the right side of the header. Enter your text for both of these and save.
Next, click the Social Media Icons tab. Here you can provide links to your social media identities and the icons will show up in the footer. Make sure to provide your full URLs (i.e. http://twitter.com/mclstr).
There are a few widgets that are crucial to the theme setup.
Homepage Note Area Left: This widget is for the left side of the note section under the homepage article slider in the middle of the page. This are uses one plain text widget. Save when completed.
Homepage Note Area Right: This widget is for the right side of the note section under the homepage article slider in the middle of the page. This are uses the Okay Note widget. Just type in your title and message. Save when completed.
Sidebar: This section is up to you. You can add whatever widgets you like, but on the demo I used the Recent Posts widget, the Okay Dribbble widget, and a simple text widget. Save when completed.
Footer Left, Footer Center, and Footer Right: These are all footer area widgets. On the demo site, I used a text widget, a Dribbble widget, and the Okay Recent Post widget respectively. Feel free to add whatever widgets you'd like to this area.
Element takes advantage of the new Wordpress 3.0 menu manager. Menus can be found under Appearence -> Menus. For more detailed usage of the menu manager, see this tutorial here.
If you didn't import the dummy data, you'll need to create at least two different menus; one for the header, one for the footer. Start with the header menu. Name this menu Header.
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. Save the menu when you're finished.
Now let's create the footer menu. At the top of the page you'll see a new menu button (has a + on it). Create a new menu and call it Footer.
Add pages and arrange them the same way you did before. When you're finished, save the menu.
The final step is assigning the menus, which can be done in the upper left hand side of the Menus page. Assign the Header menu to the Header, Footer menu to the Footer and click Save.
Element comes with several custom element styles, which are used to easily add extra styling to your WordPress posts. Add buttons, columns, and text styles all from within your post editor. See what each one does below.
To use the post styles, simply select your text, links or images, and select from the drop down which style you would like to apply. You'll be able to see the changes live, in your editor. If you're having a bit of
1/2 Column - This will do exactly what it says, create a half column! Select your text and apply this style to create a 1/2 column on your post.
1/4 Column - This will do exactly what it says, create a quarter column! Select your text and apply this style to create a 1/4 column on your post.
Highlight - This will highlight the f**k out of some text.
Buttons - There are several sizes and colors of buttons to choose from. Just select your text or link and choose what size and color you want!
In WP admin menu, click on Posts -> Add New. Start by inserting your title and whatever text you want in the description.
On the right hand sidebar, you'll see the Featured Image box. This is where you'll grab your portfolio image. Click the "Set Featured Image" link and select your photo. Once you're image is uploaded, you need to click the "Use as Featured Image" link in the pop-up dialogue.
Finally you need to mark the post in your Portfolio category so the post ends up in the right places of the theme. To take advantage of the jQuery Quicksand sorting on the homepage, be sure to categorize your portfolio posts properly. You should have all of your portfolio categories (art, photography, etc.) as a sub-category to the Portfolio category. This hierarchy will be used to sort the posts on the homepage.
Publish the post when you're finished.
To add a blog post, you just need to add a regular post, under Posts and mark it in the Blog category (which you specified in the theme options). You can take advantage of the categories, tags, etc.
In the demo site, you may notice next the page title is a smaller subtitle. For example, on the blog page, there is a subtitle of "Where We Write". To add one of these, on your post you need to add a Custom Field of pagetitle and set the value to the title you want to use.
If you can't see the Custom Field pane, make sure you click Screen Options in the upper right hand side of the screen and turn it on.
The contact page uses the Contact Form 7 plugin, which you should have installed earlier. Once installed, you'll see there is a Contact link in the left hand sidebar of your WordPress admin.
Let's start with displaying a form on your page. First, open the Contact -> Edit menu on your WordPress administration panel. You can manage multiple contact forms there.
Just after installing the Contact Form 7 plugin, you'll see a default form named "Contact form 1", and a code like this:
[contact-form 1 "Contact form 1"]
Copy this code. Then, open the edit menu of the page (Pages -> Edit) into which you wish to place the contact form. A popular practice is creating a page named "Contact" for the contact form page. Paste the code you copied into the contents of the page.
Now your contact form setup is complete. Visitors to your site can now find the form and start submitting messages to you.
To customize this form even further, check out the Contact Form 7 docs page here.