26 July 2010
This is Part 1 of a four-part tutorial series on editing WordPress themes using Adobe Dreamweaver CS5. In this part, you will learn the basics of WordPress, including why so many people use it, how it is installed, and what makes up a WordPress theme. I'll also describe some of the features you will be using in Dreamweaver to make editing your theme a snap.
WordPress is the most popular blog software in use today. It was initially designed to simplify the creation and maintenance of blogs, but it has evolved into a full content management system and more.
The real beauty of WordPress is its separation of content and style. The content of a WordPress blog is stored in a MySQL database and is combined with the visual presentation when a page is loaded. This enables you to develop and use themes, which you can activate and deactivate at will to completely change the appearance of your blog.
A theme is simply a set of files (PHP, CSS, and more) that are assembled dynamically, with the resulting HTML styled using CSS. WordPress 3.0 comes with a default theme called twentyten to get you started. Thousands of free themes are also available on the Internet, but when you create your own you can control everything from CSS styling and side bar content, to the number and position of columns, and more. When creating a new theme, most people start with an existing theme and customize it to get the exact look and feel that they want.
This tutorial series will take you through the steps of customizing your own WordPress theme using Adobe Dreamweaver CS5. This tutorial is divided into the following sections:
When you are ready to create your WordPress blog for the world to see, you can make it available in one of two ways: host WordPress yourself (on a server) or host the blog through WordPress.com. If you choose to host it using WordPress.com, you will access it through a URL such as ask
brianwood.wordpress.com. If you choose to run WordPress on a website host, you can use any available domain name.
Hosting WordPress on your own website requires some set up before you can start blogging. In addition to the WordPress software itself, your website host will also need PHP and MySQL, and you'll need your own domain name.
Once you have a website host, you can either install WordPress through your website administration panel (some website hosts offer Fantastico or similar tools that can automatically install WordPress for you), or download WordPress from WordPress.org and install it yourself on your host server using the WordPress Famous 5-Minute Installation. After you've installed WordPress and created your MySQL database, you can start blogging!
If you're going to develop your own theme, you'll want to be able to build and test it before going live on the web. Whether you're starting from scratch or editing an existing theme (like you are going to do for this tutorial), the best place to work on your theme is your own machine, on which you've installed WordPress and a web server. With this setup, you can build and test your WordPress themes in Dreamweaver, then upload the completed theme files to your host where you have WordPress installed and ready to go.
Part 2 of this series covers installing a web server and WordPress on your machine, as well as setting up a site with site-specific code hinting in Dreamweaver CS5.
When you install WordPress (either on a website host server or locally), lots of files are installed that enable WordPress to run your blog. These files include core WordPress files, including administration files and scripts that make WordPress run, as well as a folder for blog themes. The administration area files are part of an administration site that typically has a URL like:
http://www.mywebsite.com/wp-admin/. You use the administration area (see Figure 1) to name your blog, add posts, edit styling, and more. This is also where you'll tell WordPress to use the theme files you are going to create in this tutorial series. So after you develop the WordPress theme files in Dreamweaver, you or someone else can upload them to a website host where a live WordPress blog resides and activate the theme through the administration interface.
When a WordPress blog page is opened in a browser, a flurry of activity goes on behind the scenes. This activity determines what is to be presented on the browser page that is delivered to the user. The core WordPress files, which thankfully do not require modification, assemble that page based on the options you set in the WordPress administration pages.
For example, if your theme is widget-ready and you have widgets activated on your sidebar, then WordPress will take the following steps:
All this is done between the time you browse to the page and the time the page is displayed in your browser. Not only does WordPress determine your sidebar format on the fly, but it also determines if your page is a list of posts or a single post, if it has comments, if it should allow comments, if the post is password protected, and many more options.
Because WordPress assembles pages dynamically, you don't have to rebuild of all your pages each time you update your blog, or any aspect of it. All pages are generated using the database and the templates each time a page from your blog is requested by a viewer. This means that you can update your blog or its design very quickly, and required server storage space is kept to a minimum.
The collection of WordPress template files that comprise a theme are like the pieces of a puzzle. When put together, they form complete web pages on your WordPress site. Some template files (the header and footer template files, for example) are used on all pages in your site, while others are used only under specific conditions (a specific sidebar, for example).
In the template hierarchy, all paths lead to index.php. This is one file that is required in every theme, along with a CSS style sheet. Different themes include different PHP files depending on how much detail the designer wants to add.
You can create new files in the hierarchy that will take precedence over index.php to provide different styling for specific pages. For example, if you want to create a new look for the blog home page. To accomplish this, you can include a home.php file that has a different structure or styling than index.php. When your blog home page is loaded in a browser, WordPress first looks for home.php, and if it is not found, it will use index.php.
Now that you have an understanding of how WordPress looks for files when loading a page, you're ready to look at how the files are assembled with each template page to make up a complete blog page. To see the code that makes up the main page of the theme for this tutorial, follow these steps:
A simple WordPress web page is made up of three basic sections: a header, the content, and a footer (see Figure 2). This is similar to a typical static HTML page you might create using Dreamweaver. The header section typically contains tags such as
The MyTheme.zip sample file includes a number of files in addition to the main page file called index.php. While the HTML page is built starting with this content, the index.php file references other files from the theme directory. The three most common files referenced in the index.php file are header.php, footer.php, and sidebar.php (see Figure 3). The header and footer are required, but the sidebar is optional.
If you look at the code for the index.php page in Dreamweaver, you'll see the code for these three files:
<?php get_header(); ?> . . . <?php get_sidebar(); ?> . . . <?php get_footer(); ?>
These tags (
get_footer) tell the PHP engine to find the header content (header.php), the sidebar content (sidebar.php), and the footer content (footer.php) and include it at that point in the index.php file. Why not just put the header, sidebar, and footer content in the index.php page? Why use separate files? There are several reasons, but the main reason is that having separate content allows you to include it consistently in other pages on your site as well, where it will appear exactly as it does on the index.php page. The approach is similar to using an external CSS file, rather than having the complete CSS content in each page.
When someone visits the home page of your blog, WordPress reads the index.php file, includes the content for the header, sidebar, and footer, and delivers a complete HTML page to be rendered in your browser window. Even if you haven't created any blog posts, this HTML page will have the look and feel of the blog, complete with CSS and imagery. Of course, the page will also need to actually include blog post content. To accomplish this, your WordPress theme will use some PHP code to implement the WordPress Loop.
The Loop is an important piece of code located in the index.php file. In Dreamweaver examine the index.php code and find the code that starts the Loop (see Figure 4). It looks like this:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
The Loop is used to display your blog posts, and it performs several functions. First, it determines if there are any posts to display. Next it loops through the posts and displays each post until the loop criteria has been satisfied.
So where does the Loop get content (your blog posts) from? When WordPress is installed, a MySQL database is created, either automatically or manually (by you or an administrator). In the WordPress administration area, you create posts and other content that are saved in that database. When someone visits your blog home page, the Loop code checks your database to see if you created any blog posts, and inserts any posts in the page to be displayed in the browser.
As you delve into creating a WordPress theme, you will learn how to create additional files to build more complex themes. More detailed information on template creation can be found in the Blog Design and Layout section of the WordPress Codex.
Note: Throughout this tutorial series I refer to the WordPress Codex, which is the authoritative documentation for WordPress, and is found at http://codex.wordpress.org/Main_Page.
WordPress is a great open source platform for which to develop themes, but when you are just starting to develop themes, it can be a bit overwhelming. WordPress doesn't offer any built-in coding tools in the administration pages other than the theme file editor, which is simply a code viewer with some syntax highlighting. Dreamweaver CS5, on the other hand, has a variety of excellent tools for creating, editing, and viewing WordPress theme files.
If you have Dreamweaver CS5, you already have all the tools you need to get started creating or customizing your own WordPress themes.
The built-in Dreamweaver CS5 WordPress code hinting (see Figure 5) provides code hints for your WordPress files, highlights invalid code, and more. This site–specific code hinting feature lends a helping hand when you're working with WordPress PHP code.
Dreamweaver CS5 also enables you to preview your WordPress theme using Live View and explore it using Live Code view (when you have a testing web server and WordPress installed).
Throughout this series, you will be using Dreamweaver CS5 features including site-specific code hinting, Live View and Live Code, Inspect mode, and more to help you preview and edit your WordPress theme files.
In Part 2 of this series I'll show you how to create a local Dreamweaver site for customizing your theme, set up site-specific code hinting to help you work with WordPress code, install a local web server on your machine for testing your theme locally, and use Live View in Dreamweaver CS5 to preview your theme directly in Dreamweaver.
Tutorials and samples