Created: 12/7/2020
By: Mike McAlister
Version 1.0
I have provided several installation screencasts to get you started with the Structure theme. Be sure to pay attention, as this will help you get the theme installed with ease!
Theme Setup:
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 Structure theme available. Activate the theme.
Install the dummy data which is included. (You can also get it here: structure.wordpress.2011-11-24.xml ) ) This will ensure the posts/pages get laid out properly with the correct page templates. Go to Tools -> Import -> Wordpress. Browse to the Structure 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 Structure 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.
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).
Save Changes.
There are a few widgets that are crucial to the theme setup.
Homepage Text Columns: This widget is for the three text columns under the homepage header slider. This widget uses 3 Okay Text Column widgets. Save when completed.
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.
Structure 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.
This theme comes with several shortcodes that will make customizing your content easier. I have simplified the use of shortcodes by including a Shortcode Manager. On your posts and pages, on the editor, you'll see a small cog icon. Click this and a small pop-up window will appear. Using the various links across the top, you can add buttons, columns, tooltips, and messages. Check out the install video (towards the end) for a more detailed look at this feature.
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.
Publish the post when you're finished.
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 a screenshot or image of from video for the thumbnail. 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 and save your changes.
Now you need to grab your embed code. Embed code is available on
all video sharing sites these days, see the demo site's video post
to get an idea of what it should look like this: <iframe
src="http://player.vimeo.com/video/17593192" width="690"
height="388" frameborder="0"></iframe>. You want to
have a width of about 690px to fill up the entire video area.
Once you have your embed code, you need to add a custom field to your post. If you don't see the Custom Fields pane on your post page, you can click Screen Options in the upper right hand corner of your screen and turn on the field. In the custom field, for the name you need to enter okvideo, for the value you need to paste your embed code. Click Add Custom Field.
Finally you need to mark the post in your Portfolio category so the post ends up in the right places of the theme.
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.
To add a slide post, you just need to add a regular post, under Posts and mark it in the Header Slider or Article Slider category (which you specified in the theme options). Use the Excerpt area to control how much content you have in the slide.
If you'd like the slide in the header to link to something other than the post, you can add a custom field to change the link. First make sure custom fields are turned on by clicking Screen Options in the upper right hand corner of the screen and enabling the custom field pane. Once activated, scroll down and add pagelink for the Name and add your full url for the Value (i.e. http://your-new-link.com). This will now link the homepage box to another place.
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.