Consultant WordPress Theme

Theme Documentation

First Things First

Please take the time to read through the instructions and take notice of the instructions listed here, as many support related questions can be answered simply by re-reading these instructions.

We will frequently update this theme for bug fix, add new features and more... please follow us on twitter to get notification.

If you are new with wordpress, please read the wordpress administration panel documentation at http://codex.wordpress.org/Administration_Panels

 

— TemplateSquare

 

Table of Content

  1. Theme Installation
  2. Page Templates and Sidebar
  3. Menu Settings
  4. Posts and Categories
  5. Pages Settings
  6. Homepage Setting
  7. Slider
  8. Portfolio
  9. Sidebar Generator
  10. Custom Layout
  11. Plugin, Widget and Shortcode
  12. Other Settings

 

1. Theme Installation

Please read this tutorial to install theme: http://codex.wordpress.org/Using_Themes#Adding_New_Themes

If you want quick setup for your website, you can import our xml data sample that included in this 'DOCUMENTATION/' folder, here the step how to import sample data :

  1. Click 'Tools >> Import' then choose 'Wordpress'.
  2. Then browse the xml sample data file.
  3. Click 'Upload file and import'
  4. Now you need to configure the theme menus and widgets.

back to top

 

2. Page Templates and Sidebar

a) Page Templates

  1. Default Template (The default page template with right/left sidebar position)
    Sidebar: Page Sidebar


    Screenshot 1: Default template sidebar position

  2. Blog (Page template for display blog posts with right/left sidebar position)
    Sidebar: Post Sidebar

  3. Portfolio (Page template for portfolio)
    Sidebar: No Sidebar

  4. Testimonial (Page template for testimonial)
    Sidebar: Page Sidebar

  5. No Sidebar (Page template with one column and no sidebar position)
    No Sidebar Position

 

b) All Sidebar Position

  1. Post Sidebar - Located at the right side of archives, single and search.
  2. Page Sidebar - Located at the right side of page templates.
  3. Footer1 Sidebar - Located at the footer column 1 of page templates.
  4. Footer2 Sidebar - Located at the footer column 2 of page templates.
  5. Footer3 Sidebar - Located at the footer column 3 of page templates.
  6. Footer4 Sidebar - Located at the footer column 4 of page templates.

 

back to top

 

3. Menu Settings

The menu setting use the new WordPress 3.0 menu manager, please read the documentation at
http://codex.wordpress.org/Appearance_Menus_SubPanel

Setup menu guide:

  1. click the 'Appearance' tab then 'Menus' Sub Tab
  2. Add new menu, enter the menu name then click 'Save'
  3. Assign the menu to the 'Main Menu' location (Just Main Menu for this theme)
  4. Custom Link: enter your website url in the URL field and 'Home' text in the Label field click then 'Add to Menu'
  5. Pages: Select the pages that you want to add to menu then click 'Add to Menu'
  6. Check the Screen Options (upper right) to insure CSS and Description modules are set to display
  7. You can add custom css to each menu item, this theme first menu on the left use the 'home' css classes. (Not used by this theme)
  8. You can add a description to each main menu item. (Not used by this theme)
  9. Don't forget to click the 'Save Menu' before you leave this page!

 

back to top

 

4. Blog

Please read the wordpress documentation regarding writing a post at http://codex.wordpress.org/Posts_Add_New_SubPanel

You also can follow this instruction below:

a) Adding a Category

Adding a categories for blog is similar:

  1. Log in to your WordPress Administration Panel (Dashboard).
  2. Click the 'Post' tab.
  3. Click the 'Categories' Sub Tab.
  4. You only need to enter the category name field, the other are optional.
  5. Click the 'Add New Category' button and you are done!
  6. You will see the category you just added in the right side area.

 

b) Writing a Post for Blog

Write your post as you normally would:

  1. Log in to your WordPress Administration Panel (Dashboard).
  2. Click the 'Post' tab.
  3. Click the 'Add New' Sub Tab
  4. Input the 'title' and your content in contentbox
  5. As needed, select a category, add tags, and make other selections from the sections below the post. Each of these sections is explained at at http://codex.wordpress.org/Posts_Add_New_SubPanel.
  6. When you are ready, click Publish.

 

c) Adding a Blog Page

  1. Log in to your WordPress Administration Panel (Dashboard).
  2. Click the 'Pages' tab.
  3. Click the 'Add New' Sub Tab
  4. Enter the title 'Blog' in the title box.
  5. Select the 'Blog' template in the right 'Page Attribute' section.
  6. Choose the Blog Category from Page Blog Option



  7. When you are ready, click Publish.

 

 

back to top

 

5. Pages Settings

Page are content such as 'About', 'Services, 'Contact', etc... for more information about WordPress Page, please see the documentation at http://codex.wordpress.org/Pages_Add_New_SubPanel

 

a) Adding a Pages

  1. Log in to your WordPress Administration Panel (Dashboard).
  2. Click the 'Pages' tab.
  3. Click the 'Add New' Sub Tab
  4. Input your Title and Content.
  5. As needed, you can set the 'Page Attribute' in the right side box.
  6. We provide metabox in page edit now. It will make you easier to set the template.


  7. When you are ready, click Publish.

 

back to top

 

6. Home Page Settings

Tutorial to add the Home page.

  1. Click the 'Pages' tab.
  2. Click the 'Add New' Sub Tab
  3. You can name it 'Homepage' or 'Welcome' or any name that you want.
  4. Select the 'Default' template in the right 'Page Attribute' section.
  5. Add the home page text in the content editor box. Or you can use our custom layout, please read our documentation #10.
  6. Select the 'Sidebar' for the page.
  7. When you are ready, click Publish.



    Set this home page as front page
  8. In the left side menu, click the 'Settings' tab.
  9. Click the 'Reading' sub tab.
  10. Then change the "Front page displays" to "A static page" and choose the "Homepage" page that you just created.
  11. Save the settings.


back to top

 

7. Slider

Tutorial to add slider.

Add Slider Category

  1. Click 'Slider >> Slider Categories'
  2. Input your category name for your slider post.
  3. Click the 'Add New Category' button and you are done!
  4. You will see the category you just added in the right side area.

    Add Slider Posts
  5. Click the 'Slider >> Add New'.
  6. Input the slider 'title'
  7. You can 'upload' and 'set featured image' for slider. This featured image will be used for slider image.


  8. Input the Slider Option textboxes


  9. When you are ready, click Publish.
  10. You can add several slider post to make the animation works.

    Enable slider in a Page
  11. Click the 'Pages' tab.
  12. Click the 'Add New' Sub Tab
  13. Find the 'Page Option' metabox



  14. Checked the 'Enable Slider'
  15. Choose the 'Slider Category' to show in this page


back to top

 

8. Portfolio

Tutorial to add Portfolio

Add Portfolio Category

  1. Click the 'Portfolio' tab.
  2. Click the 'Portfolio Categories' Sub Tab.
  3. Input your category name for your portfolio post.
  4. Click the 'Add New Category' button and you are done!
  5. You will see the category you just added in the right side area.

    Adding Portfolio posts
  6. Click the 'Portfolio' tab.
  7. Click the 'Add New' Sub Tab
  8. Now input your title and content.
  9. Fill up the Portfolio Option. You will see the description about every textbox in there.

  10. Select the Portfolio category in the right 'Portfolio Categories' section.
  11. When you are ready, click Publish.
  12. You can add as many display posts as needed.

    Add Portfolio Page

  13. Click the 'Pages' tab.
  14. Click the 'Add New' Sub Tab
  15. Enter the title 'Portfolio' in the title box.
  16. Select the 'Portfolio' template in the right 'Page Attribute' section.
  17. Now please specify the Portfolio Categories

 

back to top

 

9. Sidebar Generator

Tutorial to add Custom Sidebar

Add Sidebar in Theme Options

  1. Go to the 'Appearance' tab.
  2. Click the 'Theme Options' Sub Tab.
  3. Click the 'Sidebar' Tab.
  4. Input the 'Sidebar Name' in the Sidebar Generator Textbox!
  5. Click 'Add' and in a second the sidebar name will appear in the bottom of the textbox.
  6. The sidebar will appear in APPEARANCE >> WIDGETS
  7. The sidebar will appear in your edit page too.

 

back to top

 

10. Custom Layout

You can use custom layout on this theme, you only need to copy and paste the code below into a post content.

 

a) Home Page Layout

[two_fifth class="firstcols"]
<h1>Simple and Clean. Our work is dedicated for our clients!
Check it out.</h1>
[/two_fifth][three_fifth class="lastcols"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec orci urna, in pellentesque ipsum. Nam vitae odio a felis adipiscing rutrum. Maecenas sit amet tortor libero. Fusce gravida aliquet gravida. Nunc pretium, augue in ultricies pharetra, tortor nibh accumsan diam.

Quisque sit amet odio a erat congue tincidunt molestie vel lorem. Nullam ut adipiscing lorem. Phasellus vitae mi tincidunt tellus semper faucibus sed sed leo. In hac habitasse platea dictumst. Aliquam adipiscing ipsum id velit iaculis varius.
[/three_fifth]
[clear]

<hr />

[portfolio_slide title="Recent Works" cat="shapes" showtitle="yes" showdesc="yes"]

<hr />

[two_fifth class="firstcols"]
<h3>Why Choose Us</h3>
[toggles]
[toggle title="SEO Optimized"]

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

[/toggle]
[toggle title="Clean and Easy Code"]

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

[/toggle]
[toggle title="Ongoing Support"]

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

[/toggle]
[toggle title="Unlimited Possibilities"]

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

[/toggle]
[/toggles]
[/two_fifth]

[three_fifth class="lastcols"]
<h3>Company Profile</h3>[imgframe path="http://demoimages.templatesquare.com/img-wordpress-consultant/s1.jpg" align="alignleft"]Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam a felis diam. Phasellus consequat rutrum porttitor.

Duis vehicula odio at arcu bibendum sit amet facilisis libero pellentesque.

Quisque sit amet odio a erat congue tincidunt molestie vel lorem. Nullam ut adipiscing lorem. Phasellus vitae mi tincidunt tellus semper faucibus sed sed leo. In hac habitasse platea dictumst. Aliquam adipiscing ipsum id velit iaculis varius.
[/three_fifth]
[clear]

b) About Page Layout

<h1>Maecenas consequat imperdiet quam,
quis facilisis nunc adipiscing quis. Sed vitae nunc nisi.</h1>
<hr/>
[one_third class="firstcols"]
<h3>Who are We</h3>
In volutpat convallis lectus, id ultricies libero varius vitae. Duis fermentum gravida dapibus. Donec pulvinar erat in diam auctor fringilla. Integer eleifend, risus et viverra faucibus, lacus urna lacinia purus, nec interdum dui purus vel tellus. In hac habitasse platea dictumst. Nam vel dolor sem, at gravida justo. Vestibulum condimentum neque.
[/one_third]

[one_third]
<h3>Clean and Innovative</h3>
In volutpat convallis lectus, id ultricies libero varius vitae. Duis fermentum gravida dapibus. Donec pulvinar erat in diam auctor fringilla. Integer eleifend, risus et viverra faucibus, lacus urna lacinia purus, nec interdum dui purus vel tellus. In hac habitasse platea dictumst. Nam vel dolor sem, at gravida justo. Vestibulum condimentum neque.
[/one_third]

[one_third class="lastcols"]
<h3>We Understand!</h3>
In volutpat convallis lectus, id ultricies libero varius vitae. Duis fermentum gravida dapibus. Donec pulvinar erat in diam auctor fringilla. Integer eleifend, risus et viverra faucibus, lacus urna lacinia purus, nec interdum dui purus vel tellus. In hac habitasse platea dictumst. Nam vel dolor sem, at gravida justo. Vestibulum condimentum neque.
[/one_third]
[clear]
[separator line="yes"]
<h3>Our Clients</h3>
<img src="http://demoimages.templatesquare.com/img-wordpress-consultant/banner.jpg" alt="" />

c) Services Page Layout

<h3>Service Overview</h3>
Nulla tincidunt leo at mauris vestibulum varius. Suspendisse laoreet tortor a nisl vulputate a bibendum enim rhoncus. Suspendisse sed massa elit. Maecenas vitae ultricies nunc. Aliquam iaculis purus non neque tincidunt bibendum ultricies erat egestas. Vestibulum rhoncus eros id lacus ornare venenatis.[clear]
[one_fourth class="firstcols"]
<h5 class="colortext"><img class="alignleft" src="http://demoimages.templatesquare.com/img-wordpress-consultant/icons/icon1.png" alt="" />Easily Customisable</h5>
[list]
<ul>
<li>Integer rutrum sollicitudin. Lorem ipsum risus era, ultricies quis fringilla.</li>
<li>Ipsum quis pharetra</li>
<li>Lorem ipsum</li>
<li>Pretium quam tellus id odio</li>
<li>Curabitur in nisi</li>
</ul>
[/list]
[/one_fourth][one_fourth]
<h5 class="colortext"><img class="alignleft" src="http://demoimages.templatesquare.com/img-wordpress-consultant/icons/icon2.png" alt="" />Web Development</h5>
[list]
<ul>
<li>Integer rutrum sollicitudin. Lorem ipsum risus era, ultricies quis fringilla.</li>
<li>Ipsum quis pharetra</li>
<li>Lorem ipsum</li>
<li>Pretium quam tellus id odio</li>
<li>Curabitur in nisi</li>
</ul>
[/list]
[/one_fourth][one_fourth]
<h5 class="colortext"><img class="alignleft" src="http://demoimages.templatesquare.com/img-wordpress-consultant/icons/icon3.png" alt="" />Project Conseption</h5>
[list]
<ul>
<li>Integer rutrum sollicitudin. Lorem ipsum risus era, ultricies quis fringilla.</li>
<li>Ipsum quis pharetra</li>
<li>Lorem ipsum</li>
<li>Pretium quam tellus id odio</li>
<li>Curabitur in nisi</li>
</ul>
[/list]
[/one_fourth][one_fourth class="lastcols"]
<h5 class="colortext"><img class="alignleft" src="http://demoimages.templatesquare.com/img-wordpress-consultant/icons/icon4.png" alt="" />SEO Review</h5>
[list]
<ul>
<li>Integer rutrum sollicitudin. Lorem ipsum risus era, ultricies quis fringilla.</li>
<li>Ipsum quis pharetra</li>
<li>Lorem ipsum</li>
<li>Pretium quam tellus id odio</li>
<li>Curabitur in nisi</li>
</ul>
[/list]
[/one_fourth]
[clear]

d) Contact Page Layout

[contact-form-7 id="4" title="Contact form 1"]

[separator line="yes"]

<h2>The Map</h2>
<iframe src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Jalan+Kemanggisan+Utama,+Jakarta,+Indonesia&amp;sll=37.0625,-95.677068&amp;sspn=46.092115,79.013672&amp;ie=UTF8&amp;hq=&amp;hnear=Jalan+Kemanggisan+Utama,+Jakarta+Barat,+Jakarta,+Indonesia&amp;ll=-6.189793,106.7908&amp;spn=0.016639,0.034246&amp;z=14&amp;iwloc=A&amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="670" height="188"></iframe>
<small><a style="text-align: left; color: #555;" href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Jalan+Kemanggisan+Utama,+Jakarta,+Indonesia&amp;sll=37.0625,-95.677068&amp;sspn=46.092115,79.013672&amp;ie=UTF8&amp;hq=&amp;hnear=Jalan+Kemanggisan+Utama,+Jakarta+Barat,+Jakarta,+Indonesia&amp;ll=-6.189793,106.7908&amp;spn=0.016639,0.034246&amp;z=14&amp;iwloc=A">View Larger Map</a></small>

back to top

 

11. Plugins, Widget and Shortcode

a) Plugins

Install some plugins (listed below). Search for the plugin name from within wordpress admin, then add and activate it. Some plugins can conflict with the theme, but the ones listed below have been tested to work, and also extra styling for the plugins has been added. Only add those that are needed. Adding too many will slow down your website.


Contact Form 7
Download: http://wordpress.org/extend/plugins/contact-form-7/
Description: Simple contact form for contact page.

Flickr Photos
Download: http://wordpress.org/extend/plugins/simple-flickr-plugin/
Description: Simple Flickr Photos For Widget Gallery.

Wordpress Importer
Download: http://wordpress.org/extend/plugins/wordpress-importer/
Description: Import posts, pages, comments, custom fields, categories, tags and more from a WordPress export file.

b) Custom Widget

  1. TS - Recent Post
    This widget is used for display recent post, blog, news in the left and the right sidebar position, you can activate this widget on any pages.
  2. TS - Recent Comments
    This widget is an alternate of the default Recent Comments widget, it show the comments.

c) Shortcodes

  1. Column Shortcodes

  2. Separator Shortcode

    [separator line=""]

    line : "yes"

  3. Tabs Shortcode

    [tabs]
    [tab title="title1"] ....your text here.... [/tab]
    [tab title="title2"] ....your text here.... [/tab]
    [/tabs]

  4. Toggles Shortcode

    [toggles]
    [toggle title="toggle1"] ....your text here.... [/toggle]
    [toggle title="toggle2"] ....your text here.... [/toggle]
    [/toggles]

  5. Pullquote Shortcode

    [pullquote position=""] ....your text here.... [/pullquote]

    position : "left" or "right"

  6. Blockquote Shortcode

    [blockquote] ....your text here.... [/blockquote]

  7. Dropcap Shortcode

    [dropcap type=""] ....your character here.... [/dropcap]

    type : "circle", "square", "default"

  8. Highlight Shortcode

    [highlight type="grey"] ....your text here....[/highlight]

    type : "grey", "black"

  9. Image Frame Shortcode

    [imgframe path="" align="alignleft" link=""]

    path : "your image path"
    align : "alignleft", "alignright", "alignnone"
    link : "your link url"

  10. Portfolio Slide Shortcode

    [portfolio_slide title="Recent Works" cat="shapes" showtitle="yes" showdesc="yes"]

    cat : "use category slug"
    showtitle : Toggle to show the title.
    showdesc : Toggle to show the description.

back to top

 

12. Other Settings

a) Theme Options

Some settings that you can change easily through theme options. Moreover, we have 5 parts of Options.

b) All Images Size

Images size used in this theme:

  1. slider-image: 1000px × 340px
  2. page-header-image: 1000px x 182px
  3. blog-post-image: 128px x 128px
  4. portfolio-image: 202px x 82px

c) Featured Images

You can 'upload' and 'set featured image' for portfolio and slider. This featured image will be used as thumbail.

  1. When adding a new post, you will see in the right side area the 'Featured Image' box.
  2. Click the 'Set featured image' link.
  3. You will see the wordpress media uploader window show up.
  4. Select image to upload.
  5. After upload you will see the image information.
  6. Click the 'Use as fetured image' link in the bottom.
  7. Done, just close the window.
  8. If you want to use this image as post image, just click the 'Insert into Post' button.

 


back to top