For Designers

So you want to know what it takes to design a theme for TurboFrameworks WordPress Theme? We highly recommend to read through this article attentively, it helps to design a layout you can be proud of and your HTML/CSS coder won’t curse you while converting PSD to WordPress :-)

General Recommendations.

Ok, first you should understand how the site engine works and make sure you are aware of grid 960 standards.  Every TurboFramewors powered WP theme has static(in the sense of a design) header, footer and site background with a list of required elements, see example below(you can click the image to enlarge).

The central part of the website is reserved for the dynamic content. The content part can be constructed like a Lego from the content elements available in the admin panel, but lets get back to this matter a bit later. Now lets review the footer, header and the background.

This image shows some required elements used in this specific design. Lets take a closer look.

Element 1 – this is a Graphical logo, guess it’s all clear.

Element 2 – this is Text_Logo_part1

Element 3 – this is Text_Logo_part2. Ok, the last 2 elements need additional explanation. The framework gives you a possibility to use either graphical logo or create a logo from 2 different fonts with different colors, or use all of these elements simultaneously.Sometimes it looks effective, not in the design above of course :-) .  Below is a screenshot of a design with all elements enabled.

 

Element 4 – widget area, normally we use grid12(see www.960.gs for details), thats why the number of widgets may be 1-2-3-4-6-12. At the moment there are the following widgets:

  1. Recent Posts
  2. Recent Comments
  3. Text widget
  4. Flickr stream
  5. Recent Tweets
  6. Text with shortcode widget. Take a closer look at this tool, besides text you can insert any shortcode here, like contact form, image slider or video shortcode.

Element 5 – copyright text

Element 6 – social media links. Btw alternatively these links can be used in header, the number is not limited and the end user can add as many as he needs, we should remember about it when design a layout.

Now about other required elements:

Site Slogan – you can see it on the 2nd image, its “Just another wordpress blog ;)

Background solid color – the color of the background if the background image is not set.

Background Image – the image used on the background, it can be a static image or texture. the framework gives you all necessary tools for image positioning, here is a screenshot of the admin panel just FYI.

Main Menu/Subemenu – clearly these elements are also reqired.

Custom Page Elements

Turboframework allows to create custom wordpress pages and thus add more variety to standard WordPress look and feel. As mentioned before the content part of the custom page is built from little bricks we call content elements:

Nivo Slider – every element of this type may have image(required) and image description(optional), we recommend to set images dimensions to 940×340 px

Kwick Slider – or accordeon slider, it has image and image text parameters, see a screenshot below

Roundabout Slider - another jQuery Slider giving pseudo 3d effect, has image and image text parameters. See a screenshot below:

Text Slider – this slider can be used for testimonials or recent news/blog entries section. In general this slider can get a certain number of posts from any post type. For example it can rotate 5 recent products, or 5 recent testimonials. It has the following parameters: title, icon, text, button(all elements are optional).

Anything Slider -  this is a slider for advanced users, it can contain video, images, text and so on. You can find out more about the functionality of this slider at the official website.

1-2-3-4 Column Text Block – the users can text blocks with up to 4 columns. Every colomn may have such parameters:

1. Column Heading

2. Colomn icon/image

3. Column text

4. Button

All these items are optional. While designing the layout you should think through the behavior of column title if column icon/image is not set.

Slogan block – as a rule this element takes 100% of page width and consist of 1. Slogan heading 2. Slogan Text 3. Slogan button. All elements are optional but we recommend to design all of them and think through the cases when user decides to disable one or another element.

Divider element – this is an element to divide content blocks, as a rule it’s just some slightly visible line. Btw in the example above you can see 2 dividers.

Recent Tweets – this element displace a certain number of recent tweets. We prefer to set this number to 1 :-)

Post Slider – this elemnt allows to create a slider from recent posts, for example recent portfolios. Here is a sample, the number of rows and colomns is adjustable

Recent Posts – displays the last 3 post from your blog, 3 is a default value and can be changed by a programmer.

Post Strip – allows to incorporate blog feed into usual page, you can define the number of posts to show per page and enable/disable paging.

Please notice, all these elements are included in every theme, thus all of them must be designed.

Widgets.

As we have mentioned above the number of currently available widgets is 6:

  1. Recent Posts
  2. Recent Comments
  3. Text widget
  4. Flickr stream
  5. Recent Tweets
  6. Text with shortcode widget. Take a closer look at this tool, besides text you can insert any shortcode here, like contact form, image slider or video shortcode, Google Maps and much more.

The last widget with a doShortcode feature enabled gives you a possibility to use shortcodes in widgetized areas. While designing the layout you should remember to create a skin for every widget from the list above. The functionality of the widgets may slighly vary, for example in the recent Comments you can change the number of comments to show, show/hide comment authors icon, show/hide post featured image and so on.

________________________________________________________________________

Other pages: …..Coming Soon