WordPress Theme Development with Artisteer

Est. Reading Time: 4 minutes

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.
  • 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.