WordPress Theme Development with Artisteer

By Beacon News | Published March 17, 2011 | Categories: Cascade CMS

We recently picked up a fantastic piece of software for designing WordPress themes called Artisteer. While this software doesn't give you complete control over the content, its great for throwing a general layout which can be finely tuned after it is exported. Artisteer features an easy to use 'Microsoft Office'-styled interface that generates your layout and scheme via point and click. When developing for WordPress sites in this way, I religiously abide by the following development process:

Start with the Design/Theme in Artisteer.

• Start a new project within Artisteer with the WordPress CMS.
• Work left to right with along the menu tabs on the ribbon across the top. Within each tab, work left to right with the avaible options and settings.
• On the far left tab, Ideas, click Suggest Design until a base design to work from is found or skip this and build the page using the Layour tab.
• Each tab focus has a 'Suggest' button for the helplessly creative.
• As you work to the last tabs, the design gets fine-tuned across page elements.
• Once a design is ready for site integration, click the arrow on Export button at the top of the menu bar. Select Export Options...
• On the properties option window, enter the author name, url, template version, template URL, any associated tags, and a brief description of the theme.
• Once this is entered, export your theme as a WordPress Theme. Exporting the theme as standard markup is available too, but is of no use inside WordPress.

Integrate into WordPress.

• Start up your FTP app of choice, FireFTP is convenient if your a FireFox user.
• Navigate and transfer a copy of your theme folder to: /public_html/wp-content/themes/
• Log into your WordPress Dashboard. http://YourSite.com/wp-admin
• Under the appearance drop-down on the sidebar, select Themes.
• Your theme once uploaded, should be listed among the themes avaialable to your site. Find yours and click 'Activate'.

Add Non-Artisteer Elements and Styles to Template

• • Artisteer isn't going to always have every part of your site. You can make these from the 'editor' in the WordPress Dashboard listed under Appearance, or use a text editor and FTP.
  • Making these modifications require knowing the WordPress Theme structure. Much of the code is in PHP, so background there also helps.
  • Inside of every Artisteer generated WordPress theme, you will have the following in your Export folder

Open and add/change markup to THEME_NAME/header.php for changes to the header area, usually META, LINK, and SCRIPT tags and body elements that precede the menu bar.

• Open and add/change markup to THEME_NAME/templates/page.php for changes to the pages Menu, Sidebar, down until the main content area is loaded.
• Open and add/change markup to THEME_NAME/templates/post.php for changes to the content area of posts and pages across the site.
• Open and add/change markup to THEME_NAME/footer.php for changes to the footer area, this is any markup that follows the pages main content area
  (May be contained within outter-most DIV if designed so within the 'Sheet' in Artisteer).
• Open and add/change markup to THEME_NAME/404.php for changes to text and verbage on the 404 page.
• Open and add/change styles in THEME_NAME/style.css for changes to the stylesheet.

Site Structure and Content

• After the above is said and done, all thats left is organizing the structure of the site and loading it with content.
• Under 'Settings > General', change blog metadata and primary options.
• Under 'Settings > Writing', set defaults and settings for publishing blog content.
• Under 'Settings > Reading', set a static or blog listing homepage and set listing pages to show either summaries or full articles.
• Under 'Settings > Discussion', configure comment restrictions and requirements.
• Under 'Settings > Media', configure media (image and file) restrictions and requirements.
• Under 'Settings > Privacy', configure whether the site is to be visible or not to Search Engines.
• Under 'Settings > Permalinks', customize the URL structure. I generally stick to Month & Name or a Custom Structure using: /%category%/%postname%
• Determine sidebar widgets and make active under 'Appearance > Widgets'.
• Load posts and pages with content in their respective sections. Keep in mind to setup categories for posts if necessary.