Feb 03
Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation
Finally, after a full week of catching up, here is the video tutorial version of my presentation at WordCamp Whistler 09 for those who were there and those who couldn’t come. The video is also available on WordPress.tv if you’d rather watch it there. I recorded the video over the weekend and it contains the entire presentation including all my fancy slides as well as the code examples and demos. The only thing you won’t see is me waving my hands around and messing up the code like I did at the actual event ;o)
Code Snippets
The last half of the presentation centers around creating Custom Page Templates and Custom Fields for layout purposes. To help you along in your own WordPress site development, here are those code snippets ready to be cut and pasted into your templates:
Custom Page Templates in 5 lines of code
This block of code is inserted at the very top of the Custom Page Template file. To get started, simply open the page.php file, save it under a different name, paste these 5 lines of code at the top of the document, save and upload to your server. To activate the new Custom Page Template just select it from the Template menu under Attributes in the Page Editor within WordPress.
<?php /* Template Name: Whatever */ ?>
Custom Fields in one line of code
This code can be used in any template file including but not limited to page.php, any Custom Page Templates, index.php, archives.php, single.php etc etc. The code returns a string of text that matches the text inserted in the custom field. Remember to replace $key with the actual name of the custom field. You can read more about Custom Fields and how to use them in the WordPress Codex.
<?php echo get_post_meta($post->ID, '$key', true); ?>Custom Field that parses PHP code
This code is used to parse (interpret) PHP code inserted into custom fields. It is a bit wonky – for instance it terminates any other custom field code placed directly after it in a page – so use it with caution. Otherwise it works exactly as the code above.
<?php $boxContent = get_post_meta($post->ID, 'centerBox', true); ?> <?php eval('?'.'>'.$boxContent); ?>
Applications Used in the Presentation
After the presentation several people came up to me and asked what applications I used, so here is a short list:
BitNami WordPress Stack
The demo site I used in the presentation was actually installed and running locally within Windows 7. To achieve this I used an ingenious application named BitNami WordPress Stack. Once installed this application will run a fully functional version of WordPress with database entry, plug-ins, custom themes and everything else you want to throw at it right inside Windows (XP, Vista and Windows 7 supported) so you don’t have to keep uploading your files to a server or hassle through complicated XAMP installs to play around with WordPress while offline. You can even install several different WordPress and other open source CMS stacks on your computer simultaneously to further increase your productivity. I have no idea exactly how it works but BitNami works incredibly well. Just remember to set the IP address to “localhost” when you install it.
You can download the BitNami WordPress Stack here. For Mac users there is a similar application called MAMP but I know nothing about it.
Web Developer Add-On for FireFox
FireFox is my absolute favourite browser and I use it for browsing as well as in the design process. One of the main advantages of FireFox is the myriad of add-ons you can install that make web site development a lot easier. The one I use the most is the Web Developer Add-On. This small application within an application lets you see and mess with CSS, turn styles and JavaScript on and off and do tons of other stuff that makes it easier to dissect and troubleshoot buggy web pages. Combine it with the HTML Validator add-on and you have a true powerhouse in a small browser window.
Microsoft Expression Web 2
My web development platform of choice is Microsoft Expression Web 2. This new offering from Microsoft is what enables me to build custom WordPress themes and web sites like AnnyChih.com from scratch in less than 24 hours. There are many great things you can talk about with Expression Web 2 but for WordPress theme development the two main features is full PHP support, unrivaled CSS integration and Standards Based CSS generation right out of the box. If you want to know more about Expression Web 2 or want to learn how to use it you can read more on this blog or pick up a copy of my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours. It’s a good read, I promise.
Jan 24
Code snippets from my WordCamp presentation
Here are some code snippets from my WordCamp Whistler presentation. This article will be expanded in the coming week but in the meantime here they are for anyone wanting to play around with them:
Custom Page Templates in 5 lines of code
<?php /* Template Name: Whatever */ ?>
Custom Fields in one line of code
<?php echo get_post_meta($post->ID, '$key', true); ?>Custom Field that parses PHP code
<?php $boxContent = get_post_meta($post->ID, 'centerBox', true); ?> <?php eval('?'.'>'.$boxContent); ?>
Dec 19
Using Conditional Custom Fields for Advanced Layouts
An often overlooked function in the WordPress arsenal is Custom Fields. Overlooked because to most it makes no sense: What do you use a custom field for? And how do you use it? The answers to these questions differ depending on how the WordPress theme has been set up: Custom fields can be used for everything from passing information to plug-ins like Next Gen Gallery to feeding custom areas in the template with information. But it goes way beyond that. Custom Fields can also be used to create advanced layouts and design variances that can be triggered on a page by page or post by post basis. And this tehcnique can be edhanced further by adding conditions to the scripts so that the changes only appear when the field is actually activated.
Understanding custom fields
You can add custom fields to any WordPress post or page through the custom fields interface found right underneath the main text area. The custom field contains two elements; a name and a value. These are pretty self explanatory: When the template asks the server for the name, the value is returned. But this also means that unless the template actually asks for the field by name, nothing is returned. An example to show how this works in real life:
A web site for an art gallery requires each artist page to have a series of sub-pages containing an artists statement, bio, CV and image gallery. Although adding an unordered list directly to the text body of the page would work, it would require the addition of style elements and tags – something WordPress doesn’t like very much. Not to mention it’s also cumbersome and messy. A better solution is to place all the style tags in the template and then just feed the menu in the form of a standard unordered list from a custom field, in this case with the name “artistMenu”. Then all that’s left is to get the template to call for the info in the custom field like this:
<div id="artistMenu"> <?php echo get_post_meta($post->ID, "artistMenu", true); ?> </div>
When the template is opened, the content of the custom field named “artistMenu” is placed as a string inside the artistMenu div. (To understand exactly how the php code works you can read about the get_post_meta template tag in the WordPress Codex.)
Making the custom fields conditional
The problem with the example above is that even if there is no custom field defined, the div is still placed in the page taking up space. Not a big problem when it’s just a horizontal menu but if you use a custom field to populate something larger, like an image gallery or a text box, it will look weird if the box is left empty. One way of avoiding this is to make two separate templates, one with the custom field code and one without, but that can quickly become complicated. And the whole idea here is to make things simpler, not more complicated. A better way is to make the code and the call for the custom field conditional on whether the custom field has been defined in the first place. This can be done with a simple if statement:
<?php if((get_post_meta($post->ID, "artistMenu", true))) { ?> <div id="artistMenu"> <?php echo get_post_meta($post->ID, "artistMenu", true); ?> </div> <?php } ?>
Using conditional custom fields as design elements
Now for the really cool stuff: Because we can make custom fields conditional, and because we can populate them with pretty much anything, we can use them not only to add images or text but also to add all new design and layout elements. In the site I built for Sablok & Salbok Notaries Public I used this technique to create a header element that only appears if the custom field is populated by an image or text. The actual appearance of the element is controlled by standard CSS. You can see this layout element as the blue horizontal area in the image and on the front page of the site.
In this particular example the custom field can be populated by an image. Rather than forcing the user to input all the image code in the custom field manually I added some extra code in the template that gathers the width and height of the image and creates the proper element code. As a result all the user has to do is provide the URL for the image. There is also an or condition in the if statement so that the custom field code in the template is triggered either when an image field or a text field is defined:
<?php if((get_post_meta($post->ID, "image", true)) || (get_post_meta($post->ID, "text", true))) { ?> <div id="subheader"> <?php if(get_post_meta($post->ID, "image", true)) { $size = getimagesize(get_post_meta($post->ID, "image", true)); ?> <img src="<?php echo get_post_meta($post->ID, "image", true); ?>" alt="" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" /> <?php } ?> <?php if(get_post_meta($post->ID, "text", true)) {?> <?php echo get_post_meta($post->ID, "text", true); ?> <?php } ?> </div> <!-- END SUBHEADER --> <?php } ?>
Nov 18
Highlight current page in WordPress menus
I have published an updated tutorial on this topic entitled Highlight Current Page or Category in WordPress 3.0 Menus. Click here to read the new article.
WordPress has a lot of built in functionality that you can tap for advanced customization. One of these which is often ignored is the ability to highlight the current page in menus with CSS. By default, WordPress assigns a special style class to the button that points to the current page. By styling this class differently from the “regular” classes the current page button is highlighted.
In this tutorial we’ll look at how to utilize the built in current page styling, how to create a menu like the one you see above and also how to hard code the functionality into a menu that is not generated dynamically by WordPress.
Identifying the custom styles
If you view the source code of a WordPress blog with a menu like the Reader’s Companion you’ll see that the menu items have been given different classes automatically by the CMS:
<div id="menu"> <ul> <li class="page_item current_page_item"><a href="http://expression.pinkandyellow.com">home</a></li> <li class="page_item page-item-9"><a title="Lesson Files" href="http://expression.pinkandyellow.com/lesson-files/">Lesson Files</a></li> <li class="page_item page-item-11"><a title="About the Author" href="http://expression.pinkandyellow.com/about-the-author/">About the Author</a></li> <li class="page_item page-item-13"><a title="FAQ" href="http://expression.pinkandyellow.com/faq/">FAQ</a></li> <li class="page_item page-item-15"><a title="Further Reading" href="http://expression.pinkandyellow.com/further-reading/">Further Reading</a></li> <li class="page_item page-item-17"><a title="Contact" href="http://expression.pinkandyellow.com/contact/">Contact</a></li> </ul> </div>
The important classes here are page_item which styles all the menu items and current_page_item which is only applied to the current page item. By styling these two classes independently you can get some very nice results. To demonstrate how far you can take this I’ve made a mock-up page that simulates the end output of a WordPress menu with custom styling. You can find it here.
By taking a closer look at the CSS you’ll see that the page_item and current_page_item classes have different styling. The remainder of the code is set up to make the button backgrounds expand and contract in accordance with the Sliding Doors technique from A List Apart.The CSS code on the demo page is identical to the CSS code being used to style the page itself:
page_item styles:
.page_item a { float: left; display: block; background: url("img/right-over.png") no-repeat right top; padding: 6px 15px 7px 6px; text-decoration: none; font-weight: bold; color: #DDDDDD; text-transform: uppercase; } .page_item a:hover { color:white; }
current_page_item styles:
.current_page_item { float: left; background: url("img/left-selected.png") no-repeat left top; margin: 0; padding: 0 0 0 8px; } .current_page_item a, .current_page_item a:hover { float: left; display: block; background: url("img/right-selected.png") no-repeat right top; padding: 6px 15px 7px 6px; text-decoration: none; font-weight: bold; color: #C7532D; text-transform: uppercase; }
If you already have your menu up and running properly, all you need to do is style these two classes and you’ll automatically have the current page highlighted in your menu. But this only applies to dynamic menus generated by WordPress. What happens when you hard code your menus yourself?
Assign dynamic styles to hard-coded menus
To get the same effect when you create a hard-coded menu you need to apply some clever PHP code to each of your menu items.
If you don’t understand what I mean by “hard-coded menu” consider this: By default your menu is called by a function within WordPress that lists all of your pages plus the Home page. This call usually looks something like this:
<?php wp_list_pages('title_li=&depth=1'); ?>But this function lists all your pages. If you only want certain pages listed you have to take this function out and create a manual list yourself. This is a hard-coded menu.
To make the current_page_item class apply only to the current page item you need to add a small piece of PHP to each of your menu items. This line of code looks like this:
<?php if (is_page('home')) { echo "current_page_item"; }?>and is applied inside the li tag of each item. To give a concrete example I have added this code to the list items in the list example at the beginning of this tutorial:
<div id="menu"> <ul> <li class="page_item <?php if (is_page('home')) { echo "current_page_item"; }?>"><a href="http://expression.pinkandyellow.com">home</a></li> <li class="page_item page-item-9 <?php if (is_page('Lesson Files')) { echo "current_page_item"; }?>"><a title="Lesson Files" href="http://expression.pinkandyellow.com/lesson-files/">Lesson Files</a></li> <li class="page_item page-item-11 <?php if (is_page('About the Author')) { echo "current_page_item"; }?>"><a title="About the Author" href="http://expression.pinkandyellow.com/about-the-author/">About the Author</a></li> <li class="page_item page-item-13 <?php if (is_page('FAQ')) { echo "current_page_item"; }?>"><a title="FAQ" href="http://expression.pinkandyellow.com/faq/">FAQ</a></li> <li class="page_item page-item-15 <?php if (is_page('Further Reading')) { echo "current_page_item"; }?>"><a title="Further Reading" href="http://expression.pinkandyellow.com/further-reading/">Further Reading</a></li> <li class="page_item page-item-17 <?php if (is_page('Contact')) { echo "current_page_item"; }?>"><a title="Contact" href="http://expression.pinkandyellow.com/contact/">Contact</a></li> </ul> </div>
When the page is loaded the PHP script looks to see if the page name matches the name in the is_page section and if it does, the current_page_item class is applied. Therefore the name you put in the is_page section of the PHP script must match the name of the page as created in WordPress exactly. If it does, the current page item will be highlighted dynamically.
I have published an updated tutorial on this topic entitled Highlight Current Page or Category in WordPress 3.0 Menus. Click here to read the new article.
Nov 18
Read my article in the Microsoft Expression November Newsletter
.jpg "CSS Based Horizontal Drop-Down Menu")
A month or so ago Microsoft contacted me and asked if I would write an article on Expression Web for their Expression Newsletter. How could I say no to such an opportunity? After some back and forth about the topic I landed on an article on how to create a Pure CSS Drop-Down menu. Over time I’ve encountered numerous solutions, most of which were clunky and didn’t work properly. So the tutorial demonstrates how to create a fully functional CSS-only drop-down menu utilizing the excellent CSS features in Expression Web.
That’s not to say you have to use Expression Web to get something out of the article though. You can follow the tutorial and get the same results even if you’re using Notepad to build your sites. It’s just that Expression Web makes it a hell of a lot easier to manage.
This article comes hot on the heels of my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours which contains an expanded tutorial on the same topic that also covers a layers-based drop-down menu. If you are an Expression Web 2 user of if you are considering buying or switching over to this excellent web authoring and publishing platform I humbly suggest you pick up a copy for yourself. It’s a quick read and it gives you hour-by-hour instructions on how to create a web site from scratch with the application. And once you’re done, you’ll have a fully working and standards based web site at your disposal. I wrote it as the book I wish someone had written when I started out and from the response I’ve gotten so far people are learning a lot from it. Which is what I set out to do.
If you’re interested in a preview of the kind of content you’ll find in the book or you just want to know how to make a Pure CSS Drop-Down menu, you can read the full article, The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web, here or subscribe to the Expression Web Newsletter.
