1. How to install the theme & the widgets

• Unzip the downloaded file and you will find 2 themes included, named ‘octofirst’ and ‘octofirst-lightweight’.

• Decide on which theme version you want to use and upload the files to your server in the usual themes folder (/wp-content/themes).

• Also upload the plugin in the /plugins folder to your Wordpress plugins folder, located in /wp-content/plugins.

• If you choose to upload the plugin manually via FTP, make sure to extract it first from the zip file. Otherwise, upload the zip file the usual way, through the Add New interface inside Wordpress admin area.

• Login to wp-admin and activate your new theme. Then go to the Plugins section and activate the plugin you just uploaded.

XML file containing all the demo content on this site

This is the preferred method of installing the theme since it’s much faster. Download the file below and in Wordpress admin, go to Tools > Import > Wordpress. Map users as needed and import the file.

You will find the xml file inside the /import folder of your octofirst or octofirst-lightweight theme.

Watch the screencasts below for how to import content and configure the theme

It covers many of the theme features that were left out of this written documentation as well. The theme is simply too feature-packed and it will take time to expand the written documentation accordingly. For now, please watch the screencast and also feel free to explore on your own in the Options panel.

I recommend viewing the video in fullscreen mode, the quality is much better.

Create a page, assign it the Home template and set it as a static frontpage

If you haven’t used the XML import file, make sure to create a new page and assign it the Home template. Name the page Home as well for instance. Then go to Settings > Reading and set Home as the static frontpage. This setup allows you to assign a different page as frontpage as well. For instance, instead of the standard homepage, you could start directly with the Blog section and have that as your frontpage.

If you have used the XML import file, a Home page already exists. Set it up as a static frontpage from Settings > Reading in your Wordpress admin. Alternatively, you could start with another page, such as the Blog section.

Recommended plugins:

• Breadcrumb NavXT

• PHP Code Widget

• Scissors

• WP-PageNavi

• WP125

• Yet Another Related Posts Plugin

• FLV embed if you want to embed flv files in the homepage slider, as well as in your regular posts

Please note that all of these plugins are optional and you don’t need to use them if you don’t want to. However, extensive CSS styling has been added already in the theme in order to provide support for these specific plugins.

Other useful plugins

• Disable revisions and autosave

• My Page Order

• Smart Archives Reloaded

• SyntaxHighlighter Evolved the plugin used on this page for highlighting code

2. How to add your own logo

While logged in wp-admin, go to Appearance, and click on Octofirst Options. This will take you the the theme options admin panel.

Scroll down until you reach the Logo settings section. Depending on which theme version you’ll use (dark/light), enter the link for the image representing the logo in the appropriate input field.

If you plan to alternate between the themes (dark/light), you may enter a different logo version for each of them. URL paths must be absolute and start with http://

Also enter the correct width and height for the logo as indicated. For best results, keep the same dimensions as recommended. Save your settings

3. How to customize the header menu

The top header menu is setup to allow you to hide certain pages from being listed in it on the homepage.

So for instance, if your site has the pages About, Contact, Portfolio, Archives and Blog, but you do not want to display a link to Archives in the homepage menu, you can easily exclude this page from within the theme options panel.

Go to the Homepage and menu settings section inside the theme Options panel. Look for this option:

What pages to exclude on home header menu?

In the input field enter the numeric IDs of the pages you want to exclude. Save your settings

4. How to add homepage slides

This is a very easy process.The homepage features slides are extracted from regular posts with custom fields.
I recommend creating a separate category to hold your featured slides so that you can easily exclude them later from being shown through out the rest of the blog. This would also allow for easier management, since you won’t lose track of them later on once you have many more posts/categories.

Create a category named ‘Featured slides’ (or pick a better suited name).

Let’s start creating a sample featured slide:

1. In wp-admin, go to Posts and click on Add New

2. Give your post a name, let’s say Featured slide 1

3. In the Slide Title field, write Title of 1st project

4. In the Slide Text field, write some descriptive text for your slide

5. In the Slide Link field, enter a link to which the ‘read more’ anchor should point

6. In the Slide Image field, enter the url of the image you want featured in the slider. You can use the Wordpress Media uploader to upload images and copy the link generated there

7. Assign your post to the Featured slides category

8. Click on Publish

9. Go to Octofirst Options panel, in the Slider Settings section

10. In the Slides category field enter the numeric ID of the category holding your homepage featured posts. Save your settings

Repeat the same steps for as many slides you wish to create. The control buttons for your slide will be automatically created and indexed.

For instance, after you create 3 featured posts, you will have 3 control buttons, indexed 1-3 to be able to navigate between them on the homepage.

There are 2 more things you need to do before you’re done, but only if you plan to have more than 5 slides. Go to the /js folder inside your theme and depending on which theme version you use (rounded/square), open either init.js or init-square.js.

Look for this:

[javascript]var totalLinks = 5;[/javascript]

and depending on how many slides you want, replace 5 with the appropriate number. Save your file(s) and reupload to the server.

Now locate style.css and dark.css, open them and search for this rule:

[css]#featured1,#featured2,#featured3,#featured4,#featured5[/css]

If you plan on having 7 slides for instance, modify the rule above so that it becomes:

[css]#featured1,#featured2,#featured3,#featured4,#featured5,#featured6,#featured7[/css]

Save and re-upload to the server.

5. How to customize the homepage content

• I recommend creating a separate category for your homepage posts, for easy management. In this theme demo, the category containing the posts that appear on homepage is named ‘Home posts’.

Let’s start creating a sample homepage post:

1. Go to Posts and click on Add New

2. Give your post a title, for instance Homepage post 1

3. In the Subtitle field, if you want your post to have a subtitle as it does in this theme demo, enter an appropriate text

4. Assign the post to the Home posts category.

5. Click on Publish

6. Go to Octofirst Options panel, in the Homepage Configuration section

7. In the Posts category field enter the numeric ID of the category holding your homepage posts. Save your settings

6. How to add portfolio images

1. Upload all the images you want to display on your portfolio either via FTP or by using the Media section inside wp-admin.

2. Make notes of each image’s link.

3. Make sure the page has the Portfolio template assigned to it.

4. Use the fields in the custom write panel to enter titles, links, descriptions and urls to your images. Follow the instructions under each field.

5. Publish or update the page

7. How to change theme colors

1. Go to Octofirst Options admin panel, in the Color settings section

2. Scroll down and replace the default hex color values either manually or using the color picker. Save your settings

8. How to configure the contact form

1. Go to Octofirst Options admin panel, in the Other Settings section

2. Insert your email address in the field for Your email address for contact form

3. Save your settings

9. How to turn on/off square corners

1. Go to Octofirst Options admin panel, in the Other Settings section

2. Tick the Square corners? checkbox

3. Save your settings

10. How to switch to the dark theme version

1. Go to Octofirst Options admin panel, in the Other settings section

2. Tick the Switch to dark version? checkbox

3. Save your settings

11. How to turn Cufon off/on and customize text color

1. To deactivate Cufon, go to Octofirst Options admin panel, in the Cufon settings section

2. Tick the Deactivate Cufon? checkbox

3. Save your settings

4. To change text color, scroll down to Cufon text color

5. Replace the old hex color value with the desired color manually or using the color picker.

6. Save your settings

12. How to exclude certain categories from being displayed

• You can exclude certain categories from having posts included in the Blog section of the site by entering the category IDs
  in the Category Exclusion section of Octofirst Option Panel.

13. How to exclude certain categories from your RSS feeds

• You can exclude certain categories from having posts in the RSS feeds by entering the category IDs
  in the Category Exclusion section of Octofirst Options Panel.

14. How to customize the portfolio lightbox

• The lightbox comes in 4 versions: dark rounded, dark square, light rounded and light square. You can pick the desired version
  from the dropdown in Octofirst Options Panel, in the Other Settings Section.

15. How to change gravatar size (if they are enabled)

• Gravatars come in 6 sizes: 36,48,60,72,84,96px. You can pick the desired version from the dropdown in Octofirst Options Panel,
  in the Other Settings Section.

16. How to turn on trackbacks and pingbacks for the whole site

1. In Octofirst Options Panel, go to Other Settings panel

2. Tick the Display trackbacks and pingbacks? box

3. Save your settings

17. How to configure/turn off the Twitter plugin & display a sidebar instead

1. Go to Octofirst Options Panel, in the Homepage slider and content section

2. Check the Deactivate Twitter Plugin? box. This will automatically deactivate the plugin and enable a sidebar instead, named twitter-sidebar

3. Save your settings

18. How to customize footer text

1. Go to Octofirst Options Panel, in the Text Customizations section

2. Scroll down to Footer copyright & Footer slogan

3. Replace the default text and save your changes

19. How to list Categories in your sidebar

1. Make sure you installed the PHP Code Widget first.

2. Drop an instance of the widget to the lateral-sidebar and enter something similar to this and replace 1,3,9 with the IDs of the categories you wish to exclude.

[xhtml]<ul><?php wp_list_categories(’orderby=name&exclude=1,3,9&title_li=’); ?></ul>[/xhtml]

20. How to list Testimonials in your sidebar

1. In wp-admin, go to Appearance > Widgets

2. Drop an instance of the Enhanced Text widget to the lateral-sidebar

3. For title, enter Testimonials

4. Subtitle is optional, or you can enter what our clients say

5. For content enter something similar to this:

[xhtml]<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ipsum eget elit tempor tincidunt ac id felis. Nulla facilisi. Sed nec mi ut urna elementum tempor et non augue.</p>[/xhtml]

21. How to list Follow us in your sidebar

1. In wp-admin, go to Appearance > Widgets

2. Drop an instance of the Enhanced Text widget to the lateral-sidebar

3. For title, enter Follow us

4. Subtitle is optional, or you can enter keep in touch

5. For content enter something similar to this:

[xhtml]<p><a href="link to your facebook">Facebook</a>, <a href="link to your twitter">Twitter</a>, <a href="link to your linkedin">LinkedIn</a></p>[/xhtml]

22. How to write a post and insert images

• There are no special requirements/settings for writing posts

• Inserting images can be done using the Media feature from Upload/Insert

• Images can be cropped using the Scissors plugin

• You can also use the excerpt feature if you want. I use it on several of my posts in the Blog section of this demo

23. How to setup pages

1. In wp-admin, go to Pages and click on Add New.

2. Give your page a title

3. If you want the page to have a subtitle as well, go to Custom Fields

4. In the Name field enter subtitle and in the Value field enter the desired text

5. Click on Add Custom Field. Now Publish your page

24. Code samples used for the About page

[xhtml]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ipsum eget elit tempor tinciduntac id felis. Nulla facilisi. Sed nec mi ut urna elementum tempor et non augue. Curabitur molestieai ve scelerisque turpis, at viverra lacus laoreet nec.</p>

<div class="roundit"><img src="http://octofine.mobi/octofirst/demo/wp-content/uploads/2009/08/replace.gif" alt="replace" title="replace" width="548" height="137" class="alignleft size-full wp-image-185" /></div>

<p>Fusce tristique vulputate magna, in varius tortorem venenatis eget. Nulla facilisi. Cras sagittis, nisl eget blandit sagittis, nibh dui suscipit tortor, sitas ti amet dictum felis quam in enim.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ipsum eget elit tempor tinciduntac id felis. Nulla facilisi. Sed nec mi ut urna elementum tempor et non augue. Curabitur molestieai ve scelerisque turpis, at viverra lacus laoreet nec.</p>

<h1>The quick brown fox jumps over the lazy dog</h1>
<h2>The quick brown fox jumps over the lazy dog</h2>
<h2>The quick brown fox jumps over the lazy dog</h2>
<h2>The quick brown fox jumps over the lazy dog</h2>
<h5>The quick brown fox jumps over the lazy dog</h5>

<p>Fusce tristique vulputate magna, in varius tortorem venenatis eget. Nulla facilisi. Cras sagittis, nisl eget blandit sagittis, nibh dui suscipit tortor, sitas ti amet dictum felis quam in enim.</p>

<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
<td>table data</td>
</tr>
</tbody>
</table>

<ol class="firstList">
<li>
<p>Maecenas euismod, sem ut pulvinar bibendum, velit nisl malesuada elit, ut consectetur.</p>
</li>
<li>
<p>Maecenas euismod, sem ut pulvinar bibendum, velit nisl malesuada elit, ut consectetur.</p>
</li>
<li>
<p>Maecenas euismod, sem ut pulvinar bibendum, velit nisl malesuada elit, ut consectetur.</p>
</li>
</ol>

<ul class="secondList">
<li>
<p>This is the first line</p>
</li>
<li>
<p>Here is the second line</p>
</li>
<li>
<p>And last line</p>
</li>
</ul>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ipsum eget elit tempor tinciduntac id felis. Nulla facilisi. Sed nec mi ut urna elementum tempor et non augue. Curabitur molestieai ve scelerisque turpis, at viverra lacus laoreet nec. </p>

<p>Fusce tristique vulputate magna, in varius tortorem venenatis eget. Nulla facilisi. Cras sagittis, nisl eget blandit sagittis, nibh dui suscipit tortor, sitas ti amet dictum felis quam in enim.</p>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ipsum eget elit tempor tincidunt ac id felis. Nulla facilisi. Sed nec mi ut urna elementum tempor et non augue. Curabitur molestie scelerisque turpis, at viverra lacus laoreet nec.</p> </blockquote>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ipsum eget elit tempor tinciduntac id felis. Nulla facilisi. Sed nec mi ut urna elementum tempor et non augue. Curabitur molestieai ve scelerisque turpis, at viverra lacus laoreet nec. </p>

<dl>
<dt>22nd of <br/> <span> August</span></dt>
<dd>In ligula dolor - accumsan ac fermentum nec soles particum estiam</dd>
<dd>Accumsan ac fermentum</dd>
<dt>7th of <br/> <span>September</span></dt>
<dd>In ligula dolor - accumsan ac fermentum nec soles particum estiam</dd>
<dt>12th of <br/> <span>September</span></dt>
<dd>Accumsan ac fermentum</dd>
</dl>

<p>Fusce tristique vulputate magna, in varius tortorem venenatis eget. Nulla facilisi. Cras sagittis, nisl eget blandit sagittis, nibh dui suscipit tortor, sitas ti amet dictum felis quam in enim.</p>

<!–nextpage–>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ipsum eget elit tempor tinciduntac id felis. Nulla facilisi. Sed nec mi ut urna elementum tempor et non augue. Curabitur molestieai ve scelerisque turpis, at viverra lacus laoreet nec. </p>

<p>Fusce tristique vulputate magna, in varius tortorem venenatis eget. Nulla facilisi. Cras sagittis, nisl eget blandit sagittis, nibh dui suscipit tortor, sitas ti amet dictum felis quam in enim.</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ipsum eget elit tempor tinciduntac id felis. Nulla facilisi. Sed nec mi ut urna elementum tempor et non augue. Curabitur molestieai ve scelerisque turpis, at viverra lacus laoreet nec. </p>

<p>Fusce tristique vulputate magna, in varius tortorem venenatis eget. Nulla facilisi. Cras sagittis, nisl eget blandit sagittis, nibh dui suscipit tortor, sitas ti amet dictum felis quam in enim.</p>
[/xhtml]

25. How to add search/blogroll/meta in the sidebar

• You can use the standard WordPress widgets for this, simply drag an instance of the desired widget to the lateral-sidebar.

26. How to paginate a post or page

• To break content in several pages, use the regular nextpage WordPress tag. Insert after the tag the content you want to appear on the next page. Repeat as many times as needed.

[xhtml]<!–nextpage–>[/xhtml]

27. How to add supages and have them automatically appear in a drop down menu

• Dropdowns are automatically created when you create a page and assign it to a parent page. In this demo, the pages Jobs, Team and Philosophy have the page About as parent.

1. Simply create a page in the usual way and select from the Parent dropdown the page you want to set as parent for it.

2. Publish/Update page

28. How to turn off/on rounded corners

1. In the Octofirst Options Panel, go to the Other settings section.

2. Tick the Square corners? checkbox.

3. Save your settings.

29. How to display a list of pages in the sidebar and exclude certain pages from appearing in it

1. Drag an instance of the Pages widget to your lateral-sidebar

2. In the Exclude field enter the IDs of the pages you want to exclude.

3. Save your settings

30. How to troubleshoot the theme in case something goes wrong

• If everything you tried doesn’t seem to fix things, you can reset the theme settings to defaults by clicking on the Reset to defaults button in
  Octofirst Options Panel. It should be right at the top of the page.

31. How to enable threaded comments

1. In wp-admin, go to Settings > Discussion

2. Check Enable threaded (nested) comments

3. Select 5 from the drop-down

4. Save your changes

32. How to display a certain number of posts per page

• In this demo, I have restricted the maximum posts per page to 5. This rule is ignored on the homepage, where you can override this from within the Options panel by setting a different number of maximum posts.

1. In wp-admin, go to Settings > Reading

2. Put 5 in the field for Blog pages show at most

3. Save your changes

33. How to automatically round an image in a page/post

• After you’ve inserted your image, wrap it like this:

[xhtml]<div class="roundit"><!–code for your image here–></div>[/xhtml]

34. How to change the homepage welcome message

1. In Octofirst Options panel, go to the Text Customizations section

2. Modify the default message from the Homepage welcome message input field

3. Save your settings

35. What if I want other header titles on homepage instead of Our Projects and Twitter updates?

1. In Octofirst Options Panel, go to the Slider settings section/Twitter settings section

2. Scroll down to Homepage recent projects title and Homepage Twitter updates title

3. Modify as needed

4. Save your settings

36. How to troubleshoot the Twitter plugin

Make sure you entered the correct Twitter username in the options panel. If your Twitter username is ‘octotest’, but you entered ‘Octotest’ in the admin panel, this will generate errors. Change appropriately and be careful of capitalization.
If you’re still having problems, go to the /cache folder and delete the xml cache file. Go to your homepage and refresh the page.

37. How to change header menu links order

By default, links are in alphabetical order. You can override this by setting a different order for each page.

1. In wp-admin, go to Pages

2. Home will always appear first and will have an order of 0. Let’s presume you want the next page after Home to be About

3. Click Edit for the About page and in the Attributes section, set Order to 1

4. If you want next page in the menu after About to be Portfolio, click Edit for Portfolio and set it’s Order to 2. Repeat as needed.

If you installed the My Page Order plugin, you can use that to re-order the pages, it’s much faster.