Skip to main content

Expression Web and WordPress—a Match Made in Coding Heaven

Author: Morten Rand-Hendriksen, Pink & Yellow Media (MVP)

Expression Newsletter, subscribe now to get yours.

About the Author: Morten Rand-Hendriksen is a Microsoft MVP and the Creative Director of Pink & Yellow Media. He is the author of Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours and his new book Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours will hit bookshelves in early October 2009. Morten blogs about Microsoft Expression Web, WordPress and web design in general.

The Right Tools Make All the Difference

Web designers are faced with two major challenges: Create a great-looking and highly functional website and fill that site with useful content so that people visit. How these problems are approached depends on the person doing the work, but in most cases the site is built first and then the content is inserted. But this often leads to problems down the road: Once content is being created, the owner, client or content provider will often realize that the original ideas of what needs to be where changes. And with that the process starts over.

To get out of this cycle, what is needed is a way of running the two processes in parallel so that the content is being created as the site is being designed and developed. Enter the Content Management System (CMS). With a CMS at the base of a web site, the content is separated from the design or “look” of the site and the two can be worked on independently. The challenge with Content Management Systems is that they are complicated and hard to understand. Or at least that’s what most people think.

In this article I’ll show you how to utilize the powerful coding and CSS features of Expression Web in conjunction with the popular open-source publishing platform WordPress to create advanced and highly customizable web sites that look and work the way you want with minimal effort. You’ll find that once you strip away all the layers, WordPress represents a perfect separation of style and content, leaving you to utilize the powerful coding and styling features of Expression Web to the fullest to realize your vision on the web.

Before We Get Started...

I know what many of you are thinking right now: WordPress? Isn’t that a blogging platform? Over the years the application has evolved to a light-weight and full featured CMS that produces standards-based code and has one of the cleanest and easiest user interfaces available. As a result, not only is it easy for you the designer to make your WordPress sites work the way you want them to, but they are easy for your clients to update and manage on their own, freeing up your time to focus more on design and less on data entry.

To follow this article you need to set up a basic WordPress site with at least four pages and at least five posts in two different categories. If you don’t already have a WordPress site or blog set up, there are several ways you can get WordPress up and running:

  1. Install WordPress on your web server (requires PHP and MySQL support). To do so, go to http://wordpress.org/download/, download the latest version, and follow the very simple installation instructions.
  2. Install WordPress on your computer using the Microsoft Web Platform Installer.
  3. Install WordPress on your computer using the BitNami WordPress Stack (native installation).

For this article I’ll assume you used BitNami (my personal favorite) though the process doesn’t change much if you use one of the other methods.

I won’t go into specific details here—WordPress’s administration user interface (found at http://YourServerLocation/yourWordPressLocation/wp-admin) is about as intuitive as you can get—but if you are starting from scratch, create pages named Home, Blog, About and Contact and place some dummy content in them (for dummy text, the Lorem Ipsum generator at www.lipsum.com is a great resource). Also, create at least five posts belonging to at least two different categories. New categories can be created inside the New Post view by clicking the + Add New Category link in the Category panel on the right.

Style and Content in Perfect Separation

As I said before, WordPress provides a total separation between style and content. In practical terms, this means that, while all the page and post content is contained in a MySQL database, all the files that decide what the site looks like and how the site functions are contained in a WordPress Theme located in the themes folder in your installation. That means to change the look and/or functionality of your WordPress site, you are actually only making changes to your theme. And so it follows that while you’re working on what the site looks like, your client can start filling the site with content without either of you interfering with the other. It also means that when you are working on a site design or redesign, you can work on a dummy site and then upload and activate the new theme only when it is finished, avoiding the whole “site under construction” problem of the past.

To give you a solid head start, I’ve created a custom theme called WaveFront that you can download, customize, and use as your own. WaveFront is built to make the introduction to WordPress theme creation as simple and painless as possible.

To activate the WaveFront theme, download it from my site, extract the zipped archive and place the WaveFront folder inside the themes folder of your WordPress installation. If you are using BitNami, the theme folder can be found at this location: C:\Program Files\Bitnami\apps\wordpress\htdocs\wp-content\themes\. With the WaveFront folder in the right place, go to the Admin panel of your WordPress installation (on my computer it is http://localhost/wordpress/wp-admin), click the Appearance tab on the left side, select Themes, and click the WaveFront theme to activate it.


(click image to zoom)

Set up Expression Web for WordPress Theming

Now that you have your WordPress site set up with a great theme, it’s time to set up Expression Web so you can customize the theme to do your bidding. To do so you’ll make a new site with the site location being the root folder of your WordPress installation. If you installed WordPress locally on your computer through BitNami, that root folder will be something like C:\Program Files\Bitnami\apps\wordpress\htdocs\. If you have a remote installation of WordPress on a web server, extract a full version of WordPress in a folder on your computer and set that folder to be the location for your site. With the site set up properly, the Folder List and Side View panels should show three folders and a list of PHP files like in the figure below.


(click image to zoom)

As I said before, all the design work in WordPress is done in the theme folder, which is found under wp-content/themes/. If you navigate to the WaveFront folder, you’ll see it also consists of a long list of PHP files, as well as a couple of folders and a file called styles.css. This last file is the stylesheet for the theme where you will do most of your work. The various PHP files—header.php, index.php, page.php, single.php, sidebar.php, footer.php and so on—are template files that together form the final pages the visitor sees.

This is where WordPress and CMSes in general differ from more basic static or dynamic web sites: Whereas the basic type of site consists of complete pages, WordPress uses various template files to put together a patchwork of different files to create a full page. For example, when you open the root location of your WordPress site in a browser, you are seeing the index.php page. This template populates the page with header.php, sidebar.php and footer.php in addition to its own content.

Likewise, a single post view uses single.php as a base and a page uses page.php as a base and calls the same three external files for the rest of the content. This means if you want to make sitewide changes to the header, sidebar or footer, you can do so without having to make the same changes in multiple files. It also means that if you want a page without, for example, the sidebar, all you have to do is omit the call to the sidebar.php file and it won’t show up. But we’re getting ahead of ourselves here.

The Little Trick that Makes it All Work

This is the point when people usually give up: You have a folder full of disconnected PHP files and a CSS file that supposedly controls everything. But if you open any of the files in Expression Web, all you get is confusing PHP code. How are you supposed to use the CSS tools in Expression Web to restyle a site when you can’t actually get a proper preview of the site in Expression Web? The answer is you use a little trick that will seem obvious once you know what it is:

  1. In your root folder, create a new HTML page and give it the name testBed.html (it can be any name, this is just what I use). In Code View, delete all the code so that the page is completely blank.
  2. If you haven’t already done so, open the front page of your WordPress site in your browser and view the source code (Page -> View Source in Internet Explorer 8, Ctrl+U in Firefox).
  3. Highlight and copy all the source code for the page (Ctrl+A to select all, Ctrl+C to copy).
  4. Go back to Expression Web and paste the entire source code (Ctrl+V to paste) into the Code View of testBed.html.
  5. Scroll to the top of Code View and find the line that reads something like this: <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/WaveFront/style.css" /> (it should be line 8). Change the link to a relative link with wp-content as the first folder like this: href="wp-content/themes/WaveFront/style.css" (see figure below). Finally, save the page and switch to Split View so you can see the page.

Now you have a local static version of the WordPress output page that is styled by your local version of the WordPress styles.css file. That means you can use the regular Expression Web CSS tools, such as the Quick Tag Selector, Manage Styles and CSS Properties panels, and New and Modify Style dialogs, to make changes to the stylesheet and see those changes in real time.

Change the Look of the Sidebar

Right now the sidebar looks the same as all the other content on the page. To make it stand out, you are going to use the CSS tools in Expression Web to give it a blue background instead of the white it has now:

  1. With testBed.html open, switch to Design View and place your cursor anywhere inside the sidebar. This activates the Quick Tag Selector that shows you the entire CSS tree for the element you have selected.
  2. In the Quick Tag Selector, click <div #sidebar> to select the sidebar tag. If you have the CSS Properties and Manage Styles panels open, the #sidebar style will be highlighted in the Manage Styles panel.


    (click image to zoom)

  3. Right-click the #sidebar style in the Manage Styles panel and select Modify Style from the drop-down menu to open the Modify Style dialog.
  4. Under the Background category set background-color to #EEFAFE. Under the Border category check all the Same For All boxes to remove the border. Under the Box category set padding-right to 10px and delete margin-right.
  5. Click OK to apply the modified style and save the page. Expression Web will open the Save Embedded Files dialog and ask if you want to save the styles.css file as well. Click OK to save the file and reload the page in your browser to see the change.

If you are using a locally installed version of WordPress (Windows Web Platform or BitNami), you’ll see the changes you made to the styles.css affecting the WordPress site immediately, even though you were working on a dummy version of the output (if you are working with a WordPress installation on a remote server, you’ll need to upload the revised styles.css file to the server to see the changes). In practical terms, this means that any change you can make to the dummy page in Expression Web will be reflected in the actual site as well. In other words, the possibilities for design, redesign, and customization are virtually endless as long as you have a design in mind and the patience to make the changes.

Get Rid of the “Blog Look” with the Help of Code Snippets

“But it still looks like a blog!” you say. This is true. But I said this tutorial was about creating websites, not blogs. The reason your WordPress installation looks like a blog right now is because the front page is the blog index. But there is no reason it has to be that way. WordPress lets you decide what to put on the front (home) page of your site. Earlier I told you to create a number of pages, two of which were Home and Blog. We are now going to switch the front page to the Home page and relegate the blog index to the Blog page.

  1. In the WordPress admin panel (http://localhost/wordpress/wp-admin) select Settings > Reading from the menu on the left.
  2. Under Reading Settings, check “Front page displays a Static Page” and set Front Page to Home and Posts Page to Blog. Click Save Changes and reload your site in the browser.

Now the front page of your site is a static page, and the post index or blog is found under the Blog button in the upper right-hand menu (note that whatever content you placed in the Blog page is replaced by the blog index).

To make the front page look completely different from the rest of the site, the next step is to create a custom page template and apply it to this page only. This requires a bit of theme hacking. To make the process easier, I’ve created a series of WordPress Template Tools that plug directly into Expression Web via the Code Snippets function. Before you go any further you need to install these tools in Expression Web.

  1. Go to the Expression Gallery and download the WordPress Template Tools Code Snippets.
  2. Extract the file. You should have a file named WPsnippets.xml.
  3. Copy the WPsnippets.xml file to one of the following locations on your computer, depending on your operating system and Expression Web version:
    1. Windows XP:
      C:\Documents and Settings\[your windows user name]\Application Data\Microsoft\Expression\[your version of Expression Web: Web Designer | Web 2]\Snippets
    2. Windows Vista:
      C:\Documents and Settings\[your windows user name]\AppData\Roaming\Microsoft\Expression\[your version of Expression Web: Web Designer | Web 2]\Snippets
    3. Windows 7:
      C:\Users\[your windows user name]\AppData\Roaming\Microsoft\Expression\Web 3\Legacy\Expression\Web 3\Snippets

To make sure the Code Snippets are correctly installed, go to Code View and press Ctrl+Enter. This opens the Code Snippets dialog. If you scroll to the bottom, you should see a series of code snippets starting with “WP” as in the figure below.

Create a Custom Page Template

WordPress allows for the creation of unlimited Custom Page Templates that can be applied to any and all pages. By default, all pages use the page template, called page.php; but you can create your own templates by adding some simple lines of code of your own. That way you can have multiple pages with widely differing looks within the same site. And more importantly, you can use a simple menu to select what page has what template applied.

In the WaveFront theme folder, there is an unfinished custom template file called frontPage.php. Even if you have zero coding experience or you don’t know anything about PHP, it is not that hard to decipher. Inspecting the file in Code View, you quickly get a sense of what it does: Off the top, <?php get_header() ?> gets the header.php template and places it in the page. Then it goes down and gets the post ID (the database name of the post or page) and fetches the title and the content. It goes on to create a div with the ID boxList which is populated by three new divs before it looks for comments and finally gets the footer.

To make this template into a Custom Page Template and make it available to WordPress, all you have to do is insert the Custom Page Template code from the Code Snippets you just installed:

  1. Place your cursor at the beginning of line 1 in Code View and press Enter a couple of times to create some space.
  2. Place the cursor at line 1 again and press Ctrl+Enter to open the Code Snippets dialog.
  3. Scroll down to the snippet called WP—Custom Page Template and press Enter to insert it into the code.
  4. In the commented out field in the new code, replace the word “Whatever” with “Front Page” as in the figure below.


    (click image to zoom)

  5. Save the page and go to the WordPress admin panel in your browser.
  6. Under Pages in the left-hand menu, select Edit and hover over the Home page entry to reveal the edit options. Click Quick Edit to open the Quick Edit panel.
  7. In the Template drop-down menu you will now see Front Page as an option (see figure). Select the Front Page template, click Update Page, and reload the page in your browser.


    (click image to zoom)

With this simple change, you now have three distinctly different layouts in your site: The front page, the other pages (About and Contact are using the default template) and the blog index. The WaveFront theme contains several other Custom Page Templates for you to play around with, and you can also make new ones at your leisure.

Custom Fields and a Twitter box


(click image to zoom)

The front page now contains the contents of the original Home page you created earlier, as well as three boxes on the bottom. The left one is a Custom Field Box, the middle one displays a list of the five most recent blog posts, and the right one says My Latest Twitter Updates. But the left and right boxes have no content yet.

In addition to the typical fields such as heading, content and category, WordPress allows for something called Custom Fields. Simply put, Custom Fields are extra content you can add to the page or post that is displayed when the page or post is loaded. There are endless uses for these Custom Fields, from small author bios attached to select posts to extra menus, related post links, and even images. In this case, you will make a simple custom field and fill it with some random text:

  1. In the WordPress admin panel, go to Page -> Edit and click on Home to open the Edit Page page.
  2. Scroll down below the main content area and find the Custom Field panel.
  3. Under Name, click Enter New and type leftBox.
  4. Under value, enter some regular HTML content starting with an h6 heading and ending with a regular paragraph (see figure below).

  5. Click Add Custom Field, scroll up and click Update Page to make the change permanent.

When you reload the front page, you’ll see that nothing has happened. That’s because you need to tell the template to retrieve the custom field information and place it in the box:

  1. In Expression Web, open the frontPage.php file in Code View and find the first instance of the bottomBox class (the one that starts with <h6>Custom Field Box</h6>).
  2. Delete the h6 and paragraph content so that the bottomBox div only contains the commented out clear div.
  3. Create a new line directly under <div class="bottomBox">, press Ctrl+Enter to open the Code Snippets dialog, and scroll down to the snippet called WP—Custom Field. Press Enter to insert the code.
  4. Find the $key variable in the code and change it to the name of your custom field, leftBox, so that the new code reads <?php echo get_post_meta($post->ID, 'leftBox', true); ?>.
  5. Save frontPage.php and reload the front page of the WordPress site in your browser.

Now the left box is populated by the custom field. The advantage here is that, to change the content of the custom field, all you have to do is go to the WordPress admin panel and edit the page. The other advantage is that, if you use the same template for several pages, each page can have a box with different content.

Now for the all-important Twitter box. Whether you like it or not, the micro-blogging site Twitter is here to stay and more and more people want their Twitter updates to appear on their sites. To this end, the WaveFront theme comes equipped with a small PHP file with all the code necessary.

  1. In the Folder List panel, navigate to the TwitterBox folder found under wp-content/themes/WaveFront/, and open twitter.php.
  2. On line 5, change the URL to your Twitter profile (e.g. http://twitter.com/yourTwitterProfile).
  3. On line 9, search through the URL to find the word “twitterProfile.json” and change it to the name of your Twitter profile, followed by “.json”.


    (click image to zoom)

  4. If you want more than two updates to appear, change the count number at the end of the same URL as step 3. Save the page.

To get the Twitter updates to appear in your page, you need to call twitter.php from the frontPage.php template. In the past this meant you’d need to know some PHP, but with the release of Expression Web, Microsoft turned over a new leaf where web programming was concerned by including full support, including IntelliSense, for PHP. That means Expression Web will help you write correct and functional PHP code even if you don’t really know how to:

  1. Open frontPage.php and find the h6 entry that says My Latest Twitter Updates. Create a new line directly underneath it.
  2. From the main menu, select Insert > PHP > Include... (see figure).

  3. In the browser window that opens, navigate to wp-content/themes/WaveFront/TwitterBox/twitter.php and click Open. This inserts a PHP include code into the page. Save frontPage.php and reload the front page of your site in your browser.

The PHP include calls the content of the PHP file you selected and places it in your template along with the rest of the content. As a result, the Twitter updates appear in the right box. This same technique can be used to add custom menus or alternate sidebars to your templates and is used extensively by WordPress itself to relate different files to one another.

Using Find to Track Down Elusive Code

Now that the site is starting to look like a real site, it’s time to do some clean up. You may have noticed that the main menu has two buttons that say “Home”, both pointing to the front page. The menu should only have one Home button, but how do you correct the menu when you don’t know where the generating code is or even in what template file it is hiding? The answer is the Find feature in Expression Web:

  1. Get the source code from the current version of the front page and copy and paste it into Code View of testBed.html replacing all the code from the previous round.
  2. In Split View click on any of the menu buttons in the top right corner to get the Quick Tag Selector to display the style tree.
  3. Clicking through the Quick Tag Selector, it is obvious the <div #menu> ID is the lowest common denominator for the menu. That means that whatever template function creates the menu in question must also contain the code id="menu". So that’s what you search for.
  4. Highlight  id="menu" in Code View and press Ctrl+F to open the Find and Replace dialog. This will automatically place the highlighted code in the find field in the Find and Replace dialog. Check the All Pages option under Find Where (see figure below).

  5. Click Find All and Expression Web opens the Find panel and systematically searches through all the pages in your site to find this particular string of code.
  6. When the search is complete, two pages are listed: testBed.html (which is where you found the code string to begin with) and header.php, which is where the string originated.


    (click image to zoom)

  7. Double-click header.php in the Find panel, and Expression Web opens the header.php file and takes you directly to the found instance of the string you searched for.

Now that you know where the menu is being generated, it is easy to make changes to it. The menu is generated by a native WordPress function called wp_list_pages. By adding variables to this function, you can control its output. That includes excluding certain pages from being listed. To remove the second instance of the Home page link, you need to find the ID for that particular page in the WordPress admin panel. The easiest way to do so is to select Pages > Edit and click the Edit button for the page in question. The number at the end of the address for the edit panel is your page ID. In my case, the address is: http://localhost/wordpress/wp-admin/page.php?action=edit&post=6, which means the ID to the Home page is 6. With header.php open in Expression Web, change the wp_list_pages function so it excludes that particular page (in my case, <?php wp_list_pages('sort_column=menu_order&title_li=&exclude=6'); ?> and save the page. Reloading the front page in your browser, you should now only see one instance of the Home button in the main menu.

With Expression Web’s Code Snippets and CSS Tools the Possibilities are Endless

What you have done by following this article is merely a toe-dip into a vast ocean of possibilities represented by the combination of Expression Web and WordPress. By implementing the strategy of grabbing the CMS output and working on that rather than trying to sift through the often illegible template code, you will find that designing and restyling your sites is mere child’s play compared to building them from scratch. What makes WordPress unique in this regard is that the CMS outputs 100% standards-based code out of the box and gives you a rock-solid framework to work from. This is complemented by Expression Web’s ability to create 100% standards-based code, including CSS, right out of the box even if you don’t write a single line of code yourself. That means less time spent writing markup and more time spent making the site look the way you intended. And as a bonus, because WordPress originated as a blogging platform it comes equipped with all the standard social media tools like threaded commenting, RSS feeds and advanced Search Engine Optimization right out of the box.

The combination of WordPress and Expression Web means you can take a dull and boring blog and make it into a hugely complex and visually stunning web site in a couple of hours (it’s possible—my record is 40 minutes!). By using the CSS tools to dissect and change individual styles or regions of the site on the fly and see the result in real time, you are a step ahead of the competition even if you’ve never touched a blog theme before. And once you master the art of using Find to target problem areas and start making template edits with code snippets like the ones in the WordPress Template Tools, you’ll quickly become a master.

The explosion of social media is forging a new path for the Internet, and WordPress and other CMSes lie at the very core of this development. Understanding how to use Expression Web to make quick and correct changes to style and code will future-proof your workflow and make you a valued commodity in the ever-expanding future of the World Wide Web. There’s a reason I wear a T-shirt that says “I reject your <style>sheet and substitute my own”: That is exactly what I do. And now so can you!