By: Sheri German

Page 1 of 1

Set for printing

Happy holidays, CMXers! It's that time for camaraderie and good cheer, and what better way to share with as many friends and family as possible than through a blog? And what better blogging platform is there than WordPress? Of course, that is not all WordPress is good for. It's also a great Content Management System, and a quick way to develop a regular web site, too. So I think what we need here is a WordPress series to do just that. We're going to use WordPress's default theme, Twenty Eleven, to develop the Safari African Adventures site we first encountered in the CS5 CSS Starter Page series.

In this new series, you will experience the complete process of developing a WordPress site from graphics creation to custom coding to transferring a the site from localhost to live server. The Safari African Adventures web site will include a gallery of wild animals, a You Tube embedded video, a contact form, and a latest news page. Customization will start out slow and easy by clicking radio buttons in the WordPress graphical user interface, and then will move to the more adventurous as you code WordPress template tags, actions and filters into the functions.php, header.php, content.php, and footer.php files.

Overview of the Series

First you'll design the template in Adobe Fireworks. You'll install the new CSS3 Mobile Pack extension for Fw and use its CSS Extractor panel to create and save basic CSS rules. You'll also batch process the images that will go in the Safari gallery.

Next you'll set up the staging environment for creating and testing the Safari African Adventures site on your localhost server. You'll create a child theme based on the default WordPress theme, Twenty Eleven. You'll learn how child themes protect your design from both egregious errors and from WordPress and/or theme upgrades. In this part you will use the WordPress GUI to set the basic theme options, such as the layout (right, left, or one column), background and link colors, sidebar widgets, and plugins. You'll add the page content and posts, and add the contact form, image gallery, and YouTube video.

Now that you've accomplished the basic prep work in WordPress, it's time to move over to Dreamweaver to make more advanced modifications to the layout. You'll set up the Dreamweaver testing server, let it discover all dynamically related WordPress files, set up the site to give code hints for WordPress-specific PHP code, modify key files such as functions.php, header.php, footer.php, and sidebar.php, and use Dreamweaver's Live View to check your work in progress.

Once the layout structure is in place, you'll use Dreamweaver Inspect, as well as the Firefox extension Firebug, to discover which CSS rules drive the various elements in the design. You'll write custom CSS to refine the look and feel of the Safari African Adventures site, both for desktop and mobile devices.

Finally, once the site is complete, you will learn how to quickly and easily move it from your personal computer to a live host. You'll export the site database from phpMyAdmin, and import it into the database on the live server. You'll use the Editor from the Dashboard to make further tweaks once the site is up and running.

Ways to Develop a WordPress Site

There are a number of options for creating a WordPress site, each with its own advantages. Let us consider the most common choices:

• You can develop a theme from scratch, coding all the theme files such as header.php, functions.php, and footer.php. You would add all the template tags, hooks, filters, functions, and other necessary functionality yourself. The advantage is having total control of your theme.
• You can use a WordPress framework. These themes usually have minimal styling applied to them, but provide the basic functions of a theme, such as the loop for posts. It is up to you to provide the front end design. Some popular WordPress frameworks include Thematic, Sandbox, and Blank. Frameworks give you most of the control of coding a theme from scratch, but save you from reinventing the wheel every time you create a new WordPress layout.
• You can use a free or commercial theme that is close to the design you have in mind. The closer it is to your site concept, the less hacking and modifying it will need. This can be the fastest way to create a WordPress site, but you have less control. If your design concept changes during the development process, it might be hard to adapt the theme to your vision.
• Finally, you can develop a theme as a child theme of another theme. This is the approach that we're going to take, so let's take a more detailed look at the idea behind child themes.

Child Themes

There are several ways to develop a site from an existing theme. One obvious method would be to work directly with the original theme files. There are problems with this approach, however. If you make mistakes that are difficult to fix, you have no original with which to compare your work, or even to revert to if the problems seem unsolvable. A more practical solution would be to copy the original theme folder, give the folder a new name, and work with the copy. You would then have the original as a reference and backup. Unfortunately, this method also has problems. When a new version of WordPress comes out, a theme might require updates in order to work properly. The theme author may also update to add new features or modernize a theme. You are then left with the old version that would take a great deal of effort to synchronize with the update.

This is where child themes come to the rescue. In a child theme, you create a new folder that has only one required document, and that is style.css. The child theme's style.css document names the parent theme in comments at the top. By so doing, WordPress knows to use the parent files unless the child theme overwrites these with its own version of a particular document. WordPress checks the child theme first to see if a document (such as header.php) is in the child folder. If it is not, WordPress will look to the parent folder to grab the original. This way, only modified documents reside in the child folder, while originals are left untouched in the parent folder. When the theme is updated, modifications will not be lost, and the child can still link to the modernized version.

The Twenty Eleven Theme

As mentioned earlier, for the ongoing project in this series, we are going to use the Twenty Eleven theme. It is a very basic design that is closer in concept to a framework, and is the default theme in WordPress 3.2+. It is a responsive design that includes CSS3 media queries to ensure that it adapts to mobile devices such as tablets and smart phones. It uses semantic HTML5 code and has many valuable built in features, such as an image gallery and random header images. Here are just some of the other features that make this an attractive framework for the Safari Adventures site:

• Multiple layout options: right sidebar, left sidebar, and one column choices
• A built in light or dark version of the theme
• Featured header images that let you place custom headers from page to page
• Sticky posts that let you select a post that stays at the top of the posts page
• Seven different post types, such as image, aside, link, and quote
• Pull quote styles
• Built in styles for floating elements such as images to the right and left
• Custom link colors
• Showcase pages that allow for sliders to display featured content
• Custom menu builder
• Display or hide the header image and/or header text
• Search Engine friendly
• Widget ready
• Footer widget capability

Note: When using a default theme, it is even more critical not to touch its original files. An original default theme is required in order for WordPress to run when you install it. When WordPress updates, it usually updates its default theme as well.

Here are images of the original Twenty Eleven theme and Safari site that we'll pull into its framework. (Be sure to check out this demo of the Twenty Eleven theme.)

Figure 1: The Twenty Eleven theme is visually pretty basic, but it is packed with features

Figure 2: The Safari African Adventures modification looks completely different

Conclusion

In this introduction to the WordPress series, you learned about the Twenty Eleven theme and how we're going to use it as the framework for the Safari African Adventures web site. You learned about the benefits of child themes and why we're going to use this strategy for our site development.

Next time we'll develop a Fw design that includes an example of both the sidebar and one column pages that we'll use for most of the Safari site.

Have a great holiday, and see you back here soon!

Page 1 of 1 1

Download Support Files

Downloads are disabled during your trial period.

Keywords
WordPress, TwentyEleven, child theme, Live View