The object of these posts is to take you through the steps to create this home page and how we added other pages and features, this would be the process for a magazine style WordPress blog using the CMS-Lite plug in.

Planning:

There is no point in jumping in and making it up as we go so let us create a list of features for our home page and about page.

• Sheet               Width 1020px
• Sidebars         Right Sidebar with 320 x 250 ad block
• Sidebars         Two sidebars under Sidebar1, one with ad125 widget
• Sidebars         About Page to have a left Sidebar
• Header            Clickable Logo
• Header            AdSense header panel 468×60 not on the home page
• Header            Hide Title from view but not from search engines
• Header            Right search box
• Navigation    Categories Navigation with editable excludes
• Content          Dynamic Feature Gallery Category (featured)
• Content          Pane 66% Text Block (welcome)
• Content          Pane 34% Category (latest)
• Content          Pane 100% text Block (more info)
• Content          Pane 50% Category (news)
• Content          Pane 50% Category (events)
• Footer            Dynamic Footer height 100px

Theme

Let us start with an Artisteer basic theme with a width of 1020, and a right sidebar of 330, style this how you want plain inner and dark outer works well with simple colors, with no logo.

Requirements

You will need a copy of WordPress, we recommend working on a local install, this will require mySql and php, if you are using windows there are a few tools out there like XAMPP for a one click install, we are not linking to any here as it is better that you research the best options for your system.

Plugins

In this tutorial we will be using three Plugins

CMS-Lite

http://wordpress.org/extend/plugins/digital-raindrops-cms-lite/

-

The Dynamic Feature Gallery from Studio Grasshopper

Download: http://wordpress.org/extend/plugins/dynamic-content-gallery-plugin/

Website: http://www.studiograsshopper.ch/dynamic-content-gallery/

-

The Category Post Widget

Download: http://wordpress.org/extend/plugins/category-posts/

Website: http://jameslao.com/2009/12/30/category-posts-widget-3-0/

-

Firefox and Browser Add-On

We also recommend that you use the Firefox browser with the firebug Add-on, you will need some values from your themes css file .art-contentLayout = 1020px and sidebar1 = 326px, and you can use firebug to inspect any issues that may need resolving later, where you might add padding etc.

Why Artisteer

We are using Artisteer as we will save time not having to style our content areas later, with other themes you may need to add some styles after creating the pages, a normal WordPress install uses a call to register_sidebar(), Artisteer have wrapped that in a function which adds style elements.

When using an Artisteer theme we can use this to save us time in styling later, we will have some styling for the navigation Dynamic Feature Gallery and the Footer panel later.

Getting Started

Using a local install of WordPress activate the new theme and the Plugin, in the Plugin folders you will see one called ‘Themes_Include’, open this folder and copy all the contents to you new themes folder and paste them in.

• drf-inc (Folder)
• cms-layout.css (file)
• cms-styles.css (file)
• cms-custom.css (file)

All these files and folders are required while you are creating the themes templates and pages, although you will not need them all when you upload them later.

View Next Page: Management

Comments are closed.