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.

Contact Us To Find Out More

Have questions? Need help? Contact us and we'll be in touch soon!

* Required

Beacon
164 Thatcher Road
Greensboro, NC 27409
Map and Directions

Sales & Marketing
336.232.5687