Solid WP - Corporate / Business WordPress Theme | Documentation v1.0 - 10 June 2011


Solid WP - Corporate / Business WordPress Theme


Author Info

P: themeforest.net/user/bitpub
W: www.bitpublimedia.ro
T: twitter.com/bitpub

Thank you for purchasing this template! For any questions that are beyond the scope of this documentation, contact me using the form on my Themeforest profile page.

Stay up to date: Follow me on ThemeForest || Twitter




  1. How the documentation is organized
  2. Install Wordpress
  3. Install the Plugins the theme uses
  4. Install and Activate the Solid WP Theme
  5. Set up the Solid WP Theme
  6. Shortcode Glossary
  7. Widget Logic Explained + Usage
  8. Customize the Solid WP Theme
  9. Translations
  10. The Solid WP Theme form a Technical point of view ( for those that want to modify its functionality)
  11. Credits

The documentation is written in a step by step format. First it covers how to set up the template and then it goes into how to customize it and the last part ( Chapter 9 ) goes into details about how it runs and is intended to be read by those that want to modify / extend it's functionality above what it offers now.

Note: I wanted to make the documentation as beginner friendly as possible and for that reason you'll find that it also goes in details on things that are obvious to an advanced user. So if you are advanced just skim read the sections you are not interested in.

Note: Larger versions of the printscreens contained in this documentation open up in a lightbox if you click on the pictures.

If you have not set up your Wordpress installation yet, download the latest Wordpress version here: http://wordpress.org/download/.

You can find info on installing wordpress here: http://codex.wordpress.org/Installing_WordPress. It is worth checking out their famous 5 minute WP install tutorial.

Note: In this documentation I am assuming that Wordpress is installed directly in the root of your server. If it is not, you may need to adapt some of the file and folder paths provided below in the documentation to reflect that.

Note: I am assuming your starting point is a clean default wordpress instalation. Please only make configurations when you are asked to as this will ensure that you install and configure the theme without a problem. Thanks!

This theme uses only one sidebar where you place all your widgets, and then useing each widget's control field called "Widget logic" you control the pages that the widgets will appear on. This extra field is added through a plugin called Widget Logic.

More on this in the Set up the sidebar section but for now what is important to know is that you have to have this plugin installed to properly work with the sidebar.

Widget Logic example

Note: Please note that is a small chance that some post re-order plugins might affect the theme ( it can break the ordering parameter on some shortcodes - the shortcode will still work but you will lose some control over the ordering in it). If you think the theme is not running like it should and you have such a plugin installed please disable it and see how it works without it.

How to install Widget Logic widget

  1. download the plugin here: http://wordpress.org/extend/plugins/widget-logic/
  2. go to Plugins > Add New
  3. select Upload
  4. Browse... to where the plugin .zip was saved on your computer at download
  5. click Install Now

Preseneter Wp install options.

In order to install Solid WP Theme:



Activating Solid WP

In order to activate Solid WP Theme:

  1. Log into your Wordpress admin using the following URL: http://yourdomain.com/wp-login.php
  2. Next, go to Appearance > Themes. Here, you should see a thumbnail of Solid theme.
  3. Click on the Activate link to activate this theme.

After activation, preview this theme by right-clicking on your blog name (top left corner) and selecting "Open in new tab". Your theme should look very similar to the image below:

Solid WP theme right after activation

Right now it looks empty but it will start taking shape as we configure it in later stages.

In order to understand better what and why we are going to in the later sections of this chapter it is required that I explain how this theme was designed to work.

The main theme ideas:

What we will do next is create pages for each section of the website, add content and the shortcodes in them to achieave the desired layouts and functionality and then add posts to fill in the news, portfolio, blog and index slider. Finally we will create a wp menu to tie everything togheter and populate the sidebar and footer widgetable areas.

Note 1: In the /02.demo-content folder I offer for each page a .txt file with the shortcodes and dummy content added in. You can just paste that in the wordpress editor and then replace the dummy text to save a lot of time..

Note 2: You can find the complete description and parameter list of all shortcodes in the Shortcode Glossary.

Before we get started you should Disable the Admin Bar on top.

As of Wordpress version 3.1, you will see an Admin Bar at the top of your theme page.

Disabling the admin bar

  1. Go to Users > Your Profile link
  2. Uncheck both options for Show admin bar
  3. Next, scroll down and click on Update Profile button to save the changes. The admin bar will hide now.

First we need to set up a full width page as the Homepage.

  1. For that, go to Pages > Add New.
  2. Add the Title.
  3. You don't have to add content at this point, just add a word to know it is the homepage.
  4. The page needs to be a full width page so from Sidebar layout Settings select the second option by clicking on it ( first oprion is left sidebar which is default / second is full width / third is right sidebar).
  5. Publish.

Next, we will set up this "Homepage" page as "Front Page".

  1. Go to Settings > Reading.
  2. Inside "Front page displays", select "A static page" and assign "Homepage" to "Front Page".
  3. Leave "Posts page" to none.
  4. Change Blog pages shown at most to a value of 9 or any multiple of 3. The theme uses this value to decide how to paginate the results when you filter the portfolio.
  5. Click on "Save Changes".

The blog should look like this now:


To set up a Contact page:

  1. Create a new page named contact
  2. Select full width page so from Sidebar layout Settings ( first oprion is left sidebar which is default / second is full width / third is right sidebar)
  3. Open the Wordpress editor in HTML View and copy-paste in the content of 02.demo-content/contact/contact.txt
  4. Go in the Theme Options Panel
  5. Insert your email adress ( needed for contact form )
  6. Insert your Google Maps API key ( needed for map ) - you can generate it here: http://code.google.com/apis/maps/signup.html

Setting up Page Headers

A distinctive design feature of the Solid Theme is the Page Header. If you preview the previously created contact page you will see that it doesn't have the full page header.

Observe the page header

The page header is formed out of: the title + excerpt + page header image.

To add a page header image you have to:

  1. Upload images in the pages Media Library. The image you are going to use for header image should preferably be 940 x 200 px
  2. Refresh the page. After the refresh the loaded images will appear as thumbs in the Page Header Image. it is critical that you refresh after each image is loaded or else it won't be shown in the Page Header Image section
  3. Select the image you want to use.
  4. Update page.

Observe the page header

Adding the excerpt is easy. If you don't add it it will not be shown. If the wordpress dashboard doesn't show the excerpt box go to Screen Options and check the appropriate checkbox.

Note:

Adding a page header image on each page is to much work so the theme has a clever system in which if a page doesn't have a header image selected it:

Selecting which are the Blog, News and Portfolio pages

The contact page with the Header iamge added

So when you create a new page / post you need to decide if you want it to have it's own page header or take on the one from it's parent or the blog, news and portfolio page.

To set up the About Us section:

  1. Create a new Page with left sidebar from Sidebar layout Settings. Open the Wordpress editor in HTML View and copy-paste in the content of ../02.demo-content/about-us/about-us.txt
  2. Create other pages, again with a left sidebar and mae sure to set the previously created About page as their parent.

How to set a parent for a page

Take a piece of paper and write down for each created page their name and coresponding page ID. The pageID can be found directly under the title. For you convinience the theme adds an extra column called ID where it lists each posts / pages ID. We need to know the ID's for the sidebar widget logic later on/ Some of the shortcodes also require you to know these page ID's!!

How to find the page ID


First, set up the overview Service page:

  1. Create a new page, with a left sidebar
  2. Open the Wordpress editor in HTML View and copy-paste in the content of ../02.demo-content/services/services.txt
  3. Add the Page Header Image.
  4. Write the Excerpt
  5. Write down the service pages ID.
  6. Publish it

Then create each individual service page:

Making the Excerpt field show

  1. Create a new page
  2. Set the previously created Service page as it's parent.
  3. Add Title.
  4. Choose a Featured Image for it. - the featured image will be shown on the services overview page
  5. Add the page header image. If you don't it will use the one you use on the main Service page
  6. Write the Excerpt - the excerp is shown on the services overview page
  7. Open the Wordpress editor in HTML View and copy-paste in the content of ../02.demo-content/services/single-service.txt
  8. Write down it's page ID.
  9. Publish.

How the Title, Featured Image and Excerpt of Service pages is displayed on the service overview page

Note: If you don't see the Excerpt field on the page you need to go to Screen Options and check it's checkbox

Making the Excerpt field show

Note: How to set a Featured Image

How to set Featured Image

To set up the Portfolio you need to first set up a Portfolio overview page and then you can add portfolio items by adding new Projects posts.

Create the portfolio page:

  1. Create a new page named Portfolio
  2. Select full width page so from Sidebar layout Settings
  3. Open the Wordpress editor in HTML View and copy-paste in the content of ../02.demo-content/portfolio/portfolio-1-column.txt to create a 1 column portfolio or ../02.demo-content/portfolio/portfolio-3-columns.txt to create a 3 column portfolio.
  4. Add Excerpt and header Image
  5. Publish

Now let's add portfolio items but before we do that we must first add the categories the portfolio projects will be categories upon. The portfolio will be filtrable based on these categories.

Add new projects category

  1. Go to Projects > Services
  2. Write the category Name
  3. Click Add new category

Now we can add projects:

Adding new projects

  1. Go to Projects > Add New
  2. Add Title.
  3. Choose a Featured Image for it. - the featured image will be shown on the portfolio overview page among other locations.
    TIP: The theme is designed in such a way that it will automatically scale and crop the picture you choose to be the featured image. But for best result what I recomend is
    • if you use the 1 column portfolio - make the featured image at least 700x300px or bigger, preserving the width/height proportion
    • If you use the 4 column portfolio - make the featured image at least 220x120px or bigger, preserving the width/height proportion
  4. Write the Excerpt - the excerp is shown with the tite and featured image
  5. Open the Wordpress editor in HTML View and copy-paste in the content of ../02.demo-content/portfolio/portfolio-item-page.txt
  6. from Project Settings fill in Date interval if you want it displayed. If you leave it blank it will not show.
  7. from Services (right sidebar) check the services this portfolio item falls under.
  8. To populate the slider you must add images inside the posts gallery. The way the portfolio single item slider works is that if you don't have any images in the gallery it only shows you featured image, if you have images it shows those and excludes the featured image and if you don't have both then it displays an error message. Notice: because the slider uses all images in the posts gallery automatically, if you want to add images that should NOT be included in the slider add them to the Media Gallery Instead and link to them.
  9. Publish.

Projects feature image, excerpt and title usage on portfolio overview page

Projects page

Set Up the blog page:

  1. Create a new page named Blog
  2. Select left sidebar from Sidebar layout Settings
  3. Open the Wordpress editor in HTML View and copy-paste in the content of ../02.demo-content/blog/blog.txt
  4. Add Header Image and Excerpt
  5. Publish

Then all you have to do to add blog entries is to create posts.

  1. Open up the homepage.
  2. Open the Wordpress editor in HTML View and copy-paste in the content of ../02.demo-content/index/index.txt

The slides included on the homepage slider are added using the Slides custom post.
The slider can be configured from the theme options panel.

  1. Go to Slides > Add New
  2. Add Title.
  3. Choose a Featured Image for it. - the featured image will be used as the image for this current slide
  4. Write the Excerpt - the excerp is used for the strip of text at the bottom of each slide
  5. optionally add Slide URL and Link Title - this adds a link with the Link Title caption and the url at the end of the descriptive text. Use it to link slides to other parts of the website. If you leave Slide URL empty it won't show a link.
  6. Publish.

How to add a new slide

Slide

To set up an default page just add a new page and select the desired Sidebar layout Settings and publish.

Create the menu:

Creating a Menu

  1. Go to Appearance > Menus
  2. Add Menu Name
  3. Click Create Menu

  1. Then select it from Theme Locations
  2. Save

  1. Select the pages that you want in the menu
  2. Add to Menu
  3. Re-arrange them
  4. Save menu

To add footer widgets:

Add footer and header widgets

  1. Go to Apparence > Widgets
  2. Insert in each of the 4 widget areas a Generic Text Widget
  3. In ../02.demo-content/footer-widgets.txt you will find the code to paste in each text widget
  4. Save

To add header widgets:

  1. Go to Apparence > Widgets
  2. Insert in the 1 header widget area a Generic Text Widget
  3. In ../02.demo-content/header-widget.txt you will find the code to paste in each text widget
  4. Save

The sidebar is set up in the same way as the footer widget areas, with the exception that you have to take widget logic into account to decide on what page the widgets should show.

In ../02.demo-content/sidebar-widgets.txt you will find the list and widget logic for each widget the demo uses. There is a compelte section on widget logic below so I won't go into details here.

Solid WP comes with 25+ useful short-codes for layout and content formatting. These short-codes include basic layout columns, tabs, accordions, toggles, lists, information boxes etc. In order to use these short-codes, you would insert them inside the content editor of a post or page. Below are the default syntax and usage instructions for these short-codes:

1. Layout Shortcodes

Description:
Allow you to create different column formats.

Syntax: 


create a section, clear the content in it:		[section] 
create a 160px column, with a 20px right margin: 	[col160] 
create a 160px column, with no right margin: 		[col160 last] 
create a 220px column, with a 20px right margin: 	[col220] 
create a 220px column, with no right margin: 		[col220 last] 
create a 340px column, with a 20px right margin: 	[col340] 
create a 340px column, with no right margin: 		[col340 last] 
create a 460px column, with a 20px right margin: 	[col460] 
create a 460px column, with no right margin: 		[col460 last] 
create a 700px column, with a 20px right margin: 	[col700] 
create a 700px column, with no right margin: 		[col700 last] 

Use case:

[section]
	[col160]...[/col160]
	[col220]...[/col220]
	[col220 last]...[/col220]
[/section]

[section]
	[col340]...[/col340]
	[col340 last]
		[section]
			[col160]...[/col160]
			[col160 last]...[/col160]
		[/section]	
	[/col340]
	
[/section]

-----------------------

clearfix - generates a sub section to add columns

[clearfix]
	[col460] ** col460 ** [/col460]
	[col220] ** col220 ** [/col220]
[/clearfix]

Note: Because of the wordpress shortcodes implementation you can’t use:

[section]
   [section]

   [/section]
[/section]

So our best solution was to use [clearfix] like this : 

[section]
   [clearfix]

   [/clearfix]
[/section]

Depending what you choose from Sidebar layout Settings when creating a page:

  1. If you chose to have a left or right positioned sidebar then the total width you have to work with is 700px
  2. No sidebar - total width 940px

Now in this 700px or 940px wide area you can fit in any order, a number of 160, 220, 340, 460 and 700px columns keeping in mind that:

  1. Unless you add the last parameter they have a 20px margin
  2. The total width of the columns + they margin must be smaller or equal to 700px or 940px
  3. Always use the [section] shortcode and add the columns in it, as it is needed to clear the columns. The last column in a section should have the last parameter added.

Typography Shortcodes

2. Horizontal Rule

Description:
Inserts a horizontal rule

Syntax: 


[hr]

3. Break Line

Description:
Generates a break line. It is used for spacing purposes.

Syntax: 


[br]

4. Text Highlight

Description : highlights a text section

Use:


this is [highlight]an important[/highlight] message you needed to hear
this is [highlight2]an important[/highlight2] message you needed to hear

Text Highlight preview

5. Checklist

Description:
Styles an unordered list to have checks instead of bullets.

Syntax: 


[checklist]
<ul>
	<li>Item number One</li>
	<li>Item number Two</li>
	<li>Item number Three</li>
</ul>
[/checklist]

Checklist preview

6. Blockquotes

Description:
Displays a blockquote.

Syntax: 


[blockquote author="John Doe, Some Business"] Praesent nec aliquet elit. Nullam convallis placerat metus,
sit amet ultrices nulla faucibus sit amet.  Quisque dictum lorem sed sem haretra luctus. Donec sed posuere 
nisl. Aliquam eu vestibulum mauris.[/blockquote]

[blockquote author="Some Business" align=left ] Praesent nec aliquet elit. Aliquam 
eu vestibulum mauris.[/blockquote]

[blockquote author="Some Business" align=right ] Praesent nec aliquet elit. Aliquam 
eu vestibulum mauris.[/blockquote]

Arguments:

Name Optional / Required Values Description
author optional text string ads an author mention in the bottom side of the quote
align optional left / right Use it only if you want the blockquote to be left or right aligned.

Blockquote preview

7. Display code

Name: code

Description:
Used when you want to display code on the page.

Syntax: 


[code] .style { background:red; }  [/code]

Blockquote preview

Functionality Shortcodes

8. Adding a map

Description:
generates a dynamic google map

Syntax: 


[map address="Bucharest, Romania" details="Here I live" ]

[map lat=45.63885 long=25.60774 details="Development" popup=true ]

Arguments:

Name Optional / Required Values Description
zoom = 14 required 14 represents the zoom in map
adress required null the adress
lat optional 0 represents the latitude coordinates
long optional 0 represents the longitude coordinates
details optional null the text from the popup bubble
marker optional true the pinpoint from the map
popup optional false if you want the bubble to load automatically or on click

9. Adding a contact form

Description:
Adds a contact form, the e-mail address can be entered from admin panel

Syntax: 


[form-contact]

10. Creating the main blog page

Description:
should be added on main blog page, it will list the blog articles

Syntax: 


[blog]

[blog posts=2 ]

Arguments:

Name Optional / Required Values Description
posts optional numeric the number of posts to show at once. It adds pagination automatically if the total number of posts is higher then the number of posts to be shown at once.

11. Adding blog search

Description:
Inserts the html used for search input used on blog sidebar

Syntax: 


[blog-search]

12. Creating a 1 column portfolio page

Description:
Generates a portfolio overview page with 1 item per row and large item preview image (700x300)

Syntax: 


[projects-detailed]

[projects-detailed order=asc]

[projects-detailed service='e-commerce']

[projects-detailed nav=true]

Arguments:

Name Optional / Required Values Description
service = 'web-design' optional - show posts from the specified service (required)
items optional numeric the number of items to be shown at once. It adds pagination automatically if total number
order optional asc / desc sort the posts asc or desc
nav optional true / false to show or not pagination controls

13. Creating a 3 column portfolio page / Display selected work on the homepage

Description:
Generates a portfolio page with 4 items per row, items have small image previews (220x120). Aditionally it can be used to create the Selected work section on the homepage by adding some extra optional parameters

Syntax: 


Create portofolio: [projects-columns]    

Create portfolio, order items ascending: [projects-columns order=asc] 

Create portfolio, only show item for a particular category: [projects-columns service='e-commerce'] 

Create portfolio, add pagination: [projects-columns nav=true] 

Create the selected work section, end it with a link: [projects-columns link=true title="view more work" url="http://www.page.com/projects/"] 

Show only one portofolio item, selection made based on projectID: [projects-columns id=45] 

Show four portfolio items: [projects-columns id="45,16,12,82"]

Arguments:

Name Optional / Required Values Description
items optional numeric, either 3 or a multiple of it the number of items loaded
order optional asc/desc sort the posts asc or desc
service optional show posts from the specified service
id optional id / "id, id, id, id" show only specified post or posts
nav optional false is showing pagination controls
link optional the url you can add a link back to the projects page. Used only to create Selected Work section from homepage.
title optional text string specify the link title. Used only to create Selected Work section from homepage.
url optional # specify the link url. Used only to create Selected Work section from homepage.

15. Creating a services overview page

Description:
generates a list with childs of a specified page loaded 3 in a row listed in multiple rows if necessary

Syntax: 


[subpages page=21]

[subpages page=21 items=5]

[subpages page=21 order=desc]

[subpages id=57]

[subpages id="57,49"]

Arguments:

Name Optional / Required Values Description
page required numeric the parent's pages ID
items optional -1 the number child pages to show. Use the value -1 to show all.
order optional asc / desc display order
id optional id / "id, id, id, id" display pages with certain id's

16. Creating sidebar navigation

Description:
Generates a secondary navigation using the titles of the pages that are childern of the parent subpage you specify.

Syntax: 


[links page=21]

[links page=21 items=5]

[links page=21 items=5 parent=true]

[links page=21 order=desc]

Arguments:

Name Optional / Required Values Description
page required numeric the ID of the parent page whos children should go in the list
items optional numeric the number of children pages to show. Giving it -1 add all the childer pages
order optional asc display order
parent optional true / false include a parent link in the list as well or not

1X. Adding the news page

Description:
generates a list with news and optional navigation

Syntax: 


[news-overview]

[news-overview items=4 nav=false ]

Arguments:

Name Optional / Required Values Description
items optional numeric represents the number of items to show
nav optional true / false if the navigation is visible or not
order optional asc / desc the news items order by id

1X. Adding a news overview on the homepage

Description:
generates a list with news and optional link to archives

Syntax: 


[news-recent url="#" items=3]

Arguments:

Name Optional / Required Values Description
items optional numeric represents the number of items to show
order optinal asc / desc the news items order by id ASC/DESC
title optional text string the title of the link to the news page
url optional valid url the link to the news page

1X. Filter the portfolio

Description:
lists all the services the portfolio items are categoriesed under and allows you to filter the portfolio

Syntax: 


[projects-filter title="All work"]

Arguments:

Name Optional / Required Values Description
full optional specify the page that contains all the projects
url optional specify an alternative url to the full page
title optional specify alternative title to the full page

Note: Usually the full attribute has the id from the option panel : "Portfolio Page", so the shortcode takes the id from theme options, in this case the title of the page and the url are automatically loaded from the page specified.

As an alternative solution you can add other page id like this :


	[projects-filter full=56]

But of the page 56 has the title "Projects" you will want to provide other title in the filter so it would be more suggestive:


	[projects-filter full=56 title="All Work" ]

Other

18. Error / Success messages

Description:
shows a message box

Syntax: 


[message type="error" ] An error has occurred [/message]

[message type="success" ] Your settings has been saved [/message]

[message type="info" ] Your settings has been saved [/message]

[message type="notice" ] Another update is available [/message]

Arguments:

Name Optional / Required Values Description
type required success / error / info / notice specifies the type of the message

Messages preview

19. Tabs

Description:
the tabs shortcode must be used along with tab shortcode

Syntax: 


[tabs]  … tabs … [/tabs]

Name: tab

Description:
represents a single tab on the tabs component

Syntax: 


[tab title="Tab1"] Phasellus egestas accumsan laoreet. Phasellus tincidunt ipsum sit amet urna 
egestas rhoncus. Etiam quis lacus a nulla lacinia lobortis ut nec orci. Morbi in metus non tellus viverra 
convallis quis sit amet lacus. [/tab]

Arguments:

Name Optional / Required Values Description
title required text string the title of the tab
current optional true / false if the tab is open by default

Full sample of tabs component:


[tabs]

[tab title="Sample Tab1" current=true] Phasellus egestas accumsan laoreet. Phasellus tincidunt ipsum sit amet urna 
egestas rhoncus. Etiam quis lacus a nulla lacinia lobortis ut nec orci. Morbi in metus non tellus viverra 
convallis quis sit amet lacus. [/tab]

[tab title="Sample Tab2"] Phasellus egestas accumsan laoreet. Phasellus tincidunt ipsum sit amet urna 
egestas rhoncus. Etiam quis lacus a nulla lacinia lobortis ut nec orci. Morbi in metus non tellus 
viverra convallis quis sit amet lacus. [/tab]

[/tabs]

Not need at least a tab to be set current by defaul for the shortcode to work properly.

Tabs preview

20. Accordeon

Description:
the acordion shortcode must be used along with slide shortcode

Syntax: 


[acordion]  … slides … [/acordion]

Name: slide

Description:
represents a single slide on the acordion

Syntax: 


[slide title="My Slide 1" current=true] Phasellus egestas accumsan laoreet. Phasellus tincidunt ipsum 
sit amet tellus viverra convallis quis sit amet lacus. [/slide]

Arguments:

Name Optional / Required Values Description
title required null the title of the tab
current optional false if the tab is open by default

Full sample of tabs component:


[acordion]

[slide title="My Slide 1" current=true] Phasellus egestas accumsan laoreet. Phasellus 
tincidunt ipsum sit amet tellus viverra convallis quis sit amet lacus. [/slide]

[slide title="My Slide 2"] Phasellus egestas accumsan laoreet. Phasellus tincidunt 
ipsum sit amet tellus viverra convallis quis sit amet lacus. [/slide]

[/acordion]

Accordeon preview

21. Download brochure

Description:
generates a PDF icon with a link

Syntax: 


[brochure url="www.site.com/file.pdf" title="Download Brochure"]

Arguments:

Name Optional / Required Values Description
title required text string the title of the link
url required an url the link to the file

Download Pdf preview

22. Make a link open in the prettyPhoto Lightbox

Description:
opens the file linked to inside the prettyphoto Lightbox

Syntax: 


[lightbox group="gallery" url="http://www.site.com/large_image.jpg"]
<img src="http://www.site.com/thumbnail_image.jpg" alt="" />
[/lightbox]

[lightbox group="gallery" url="http://www.site.com/large_image.jpg"]
some text
[/lightbox]

[lightbox group="gallery" url="http://www.site.com/large_image.jpg" 
src="http://www.site.com/thumbnail_image.jpg" ]

you can add images directly in the editor and just wrap the shortcode around them or the 3rd usage allows you to give the src of the image directly

Arguments:

Name Optional / Required Values Description
url required # the location of the large image
group optional null if you have more then 1 link that opens in the lightbox and you group them by giving them the same group name then when you open one of them in teh lightbox you can navigate through them directly in the lightbox. Ommit it completly to load only 1 image.
src optional null the location of the thumbnail. Only useful in the 3rd usage example

23. Adding a client logo

Description:
generates a item containing logo

Syntax: 


[clientlogo href="http://www.site.com" src="http://www.sitename.com/clientlogo.gif"] 

[clientlogo src="http://site.com/index/clients/1.jpg" small margin=right]

Arguments:

Name Optional / Required Values Description
href optional # if you specify the href the logo will have a link on it. Don't add it if you dont want a link.
src required image src logo image source. Make sure it is smaller then 200x130px for best display
small optional - specify weather the logo is small or large
margin optional left / right specify if the logo will have a margin

Client Logo preview

Where widget logic is inserted

Solid comes with a single sidebar, all the widgets will be added in this sidebar and displayed using Widget Logic plugin that extends the usual widget interface with an extra field.

The "widget logic" field allows you to add the condition under which a widet should be displayed.
This condition is evaluated as an boolean expression - if TRUE then widget is shown, else it is hidden. For this templates purpose, the boolean expressions is constructed out of Wordpress Conditional Tags and the boolean operator ||

Each of the conditional tags above accepts either
one - example: is_page(42)
multiple parameters - example: is_page(array(42, 43, 54, 65))

Example: is_archive() || is_single() || is_page(7) || is_search()
The above experssion will return TRUE if the displayed page is either an archive, search , post or a page with the pageID=7.
If you add this widget logic expression to any widget, that widget will only be shown on the blog page and complementary pages: search, month and category archives and individual blog post pages.

Example: ( is_post_type_archive('post') || is_single() || is_page(34) || is_archive() || is_search() ) && (!is_post_type('news')) && (!is_post_type('project'))
The widget will show only if either the blog page, archive, search or a custom post type AND it is NOT a news or project custom post type

Note 1: To use widget logic you will need to know the ID's to your pages. Earlier in the documentation I showed you how to read the ideas in case you didn't know how so it shouldn't be a problem.

Note 2: If it is too hard for you don't worry, I provide all the widget logic to set up the template like in the demo site and you can get in touch with me and I will help as well.

To skin or change some aspects of the theme you have 3 options:

  1. Edit style.css directly
  2. Choose a skin from the Theme options Panel. To add new skins to the template all you have to do is create a new CSS file and save it in the /_skins folder of the template. The Theme options panel will automatically recognise it and add it to the skins list. In that css file you have to either create new / overwrite some of the rules present in style.css
  3. Add css rules directly in the Extra CSS Code area of the Includes tab from the Options Panel.

1. Edit style.css directly

2. Choosing a css skin

3. Adding css code directly

To change the logo you can

  1. Overwrite the current file directly. It is named logo.png and is found in /_layout/images/logo.png.
  2. Add a new one through the Options Panel. You have to upload the new file on your server, and then paste the full path to it ( including http:// ) in Logo image.

2. Changing the logo through the Option Panel

Also, you have the option of using a plain text logo as well.

Replace favicon.ico with your own and you are done! You can use this online service to generate a favicon if needed: http://tools.dynamicdrive.com/favicon/

1. Edit background in style.css directly

Upload your new background in the /_layout/images folder.

Changing the background can be done by modifying the background property of body in style.css or overwriting it in a skin or in Extra CSS Code area of the Includes tab from the Options Panel.

Fonts and colors are changed in the css as well.

The current font used by cufon is Museo Sans 500. If you would like to change it with another then you should:

  1. Pick a new font
  2. Convert it in the format Cufon needs it to be at http://cufon.shoqolate.com/generate/
  3. Rename the file you get to cufon-font.js
  4. Overwrite the current cufon-font.js from /_layout/js/cufon/cufon-font.js

The theme comes with language localization support. If you are using Wordpress in your own language, you can use .po file to translate the messages into your own language. The .po file is located inside /_lang folder.

To use your own language there are two steps :

  1. change WordPress default language
  2. create a .po file for your translation

1. Change WordPress default language

In your WordPress installation directory open wp_config.php with a text editor, at line 72 you can find : 


define (‘WPLANG’, ‘’);

You will need to change the parameter with a value using the format language_COUTRY like this :


define(‘WPLANG’, ‘fr_FR’);

After editing the line save the file and upload it in the same folder.

2. Create a .po file for your translation

Open the /_lang folder located in Solid theme directory and create a copy of default.po file, the .po file contains a list of strings located in the theme that could be replaced with your own.

Rename your copy of default.po file using the format specified above: fr_FR.po

To edit the po file you will need a software named PoEdit located here : http://www.poedit.net
After you installed PoEdit open the fr_FR.po file and translate the text, when you’re finished save the file, along with that a fr_FR.mo file will be created. You will need both files fr_FR.mo containing the actual translation and fr_FR.po for further changes that could occur.

Basic html Outline

A page is formed from 3 main <div>'s: #header, #content and #footer. These three div's inside another div named #wrap. 

		
<div id="wrap">
		
	<div id="header">
	<!-- ///   HEADER   //////////////////////////////////////////// -->
	
		...

	<!-- /////////////////////////////////////////////////////////// -->
	
	</div><!-- end #header -->

	<div id="content">
	
	<!-- ///   CONTENT   /////////////////////////////////////////// -->

		...
						
	<!-- ////////////////////////////////////////////////////////// -->
	
	</div><!-- end #content -->
	<div id="footer">

	
	<!-- ///   FOOTER   /////////////////////////////////////////// -->

		...	
		
	<!-- ////////////////////////////////////////////////////////// -->
	
	</div><!-- end #footer -->

</div><!-- end #wrap -->

The #wrap div is centered and sets the total width of the layout. The shadow that it drops is created with the CSS 3 box-shadow proprety. You can remove the shadow or change it's color if you cahnge teh background and it doesn't match with it:

		
( from style.css ... )
	
#wrap{ width:940px; padding:0 40px; margin:0 auto; background-color:#ffffff;
-moz-box-shadow:0 -10px 10px 0 #333; -webkit-box-shadow:0 -10px 10px 0 #333; box-shadow:0 -10px 10px 0 #333; }

A grid layout is used to create the layout inside the #header, #content and #footer div's

Css files

The template uses 3 main Css stylesheets:

The first two are

  1. style.css - main css stylesheet for all media
  2. style-print.css - print stylesheet

and they are always loaded.

The last stylesheet is style-nojs.css which contains styling to be used in case Javascript support is missing. The link to this stylesheet is inside an noscript tag, so this stylesheet is only loaded is javascript is not available. Also a message will be displayed to let the user know that only a part of the functionality is availabe without javascript enabled. 

		
<noscript>
			<link href="http://bitpublimedia.ro/themeforest/Solid-wp/wp-content/themes/Solid-wp/style-nojs.css" rel="stylesheet" type="text/css" /> 
			<div class="nojs-warning"><strong>JavaScript seems to be Disabled!</strong> Some of the website features are unavailable unless JavaScript is enabled.</div>
		</noscript>

One problem that always appears is that sometimes you need to write specific Css for Internet Explorer browsers to make them "play nice". The way this problm is tackled is that using Conditional Comments a class is applyed to the <html> element, according to the version of Internet Explorer the page is opened in:

		
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if lt IE 7 ]> <html class="ie6" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
<head>

So it you open the page with a version of Internet Explorer smaller or equal to 7 for example the <html> element will have have the class .ie7 applyed. Now when you want to write some css targeting IE7 you just start the Css Selector with .ie7 :

		
( from style.css ... )
		
#index-slideshow-pager{ width:200px; text-align:left; z-index:35; position:absolute; left:20px; bottom:12px;  }
	.ie7 #index-slideshow-pager{ bottom:15px; }

If you need to target Internet Explorer 7 then you start the css selector with .ie7, .ie8 for Internet Explorer 8 and .ie9 for Internet Explorer 9. And you write these css rules directly into style.css.

Javascript files

The template uses the jQuery javascript framework + jQuery plugins to add functionality to the website.

First jQuery files and plugin files are enqueued followed by these two custom Js files:

  1. plugins.js - calls the plugins. All calls to plugins should be made in this file.
  2. scripts.js - contains custom scripts. All new custom scripts should be added in this file.

Php files and their roles

Solid comes with 20 php files, below we created a list to describe every file’s role.

File Role
archive.php Default archive template for posts.
header.php Default header template.
footer.php Default footer template.
index.php Default template for showing posts and pages.
page.php Default page template.
single.php Default single posts template.
single-project.php Default single page template for projects.
comments.php Default template to display comments on single posts.
search.php Default search page
functions.php Contains theme's functions and definitions.
taxonomy.php Default page for projects listed by services
_layout/php/subscribe.php the script that registers submmited e-mails in the “subscribe” field on footer
_layout/php/send.php the server side script for contact form to send mail
_admin/functions-layout.php Is handling the layout option in posts
_admin/functions-menus.php Registering top menu
_admin/functions-options.php Generating theme options
_admin/functions-type-news.php It handles all the code for post type “news”
_admin/functions-setup.php General admin setup options
_admin/functions-shortcodes.php Registering shortcodes
_admin/functions-shortcodes-columns.php Registering shortcodes for columns
_admin/functions-sidebars.php Registering sidebars
_admin/functions-type-project.php It handles all the code for post type “project”
_admin/functions-type-slide.php It handles all the code for post type “slide”

Solid WP is the result between a colaboration between us and Nicolae Gabriel ( Wordpress Development).

This template is possible in part also thanks to:

  1. Wordpress
  2. WP Post Types Order Plugin
  3. WP Widget Logic Plugin
  4. JQuery - Javascript Framework
  5. Cufon - font replacement (jQuery plugin)
  6. Tipsy - display tooltips (jQuery plugin)
  7. PrettyPhoto - lightbox (jQuery plugin)
  8. Validity - contact form validation (jQuery plugin)
  9. Cycle - Content slider (jQuery plugin)
  10. Tabify - Tabbed content with ease (jQuery plugin)
  11. Accordeon - Super simple accordion (jQuery plugin)
  12. LocalScroll
  13. ScrollTo
  14. GMAP