May 07
Build a fancy WordPress author box
If you have a WordPress site or blog with multiple authors it might be useful to create a custom author box for each of them so the readers can get more information about the author and see their other posts etc. This tutorial is an extension of my Fancy Profile or Author Box tutorial from a couple of weeks back that customizes the author box to work with WordPress.
The final result
The goal of this tutorial is to create an author box like the one you see at the top of this article. The box above is the actual output of the working code and as you can see it works quite well. The box is conditional and activated by a custom field so it will only appear when you want it to. The bio is the standard profile bio entered in the WordPress user profile area. The name is the chosen display name of the user and links to the author index for the author. The website link opens the user defined website in a new window. The Twitter link goes to the user Twitter profile. And finally the image is the user Gravatar. The Twitter link is a bit wonky – I’ll get back to that later.
If you don’t want to go through the entire tutorial and learn how this all fits together just jump to the bottom of the article and get the source code.
Building the code
We already have the baseline for the code, both HTML and CSS, from the Fancy Profile or Author Box tutorial but this is going to be a dynamic box so we need to replace the static content with WordPress functions.
Let’s start with the baseline code:
<div class="profile"> <div class="profileText"> <!-- Author bio goes here --> </div> <!-- END .profileText --> <div class="profileStats"> <!-- Author photo goes here --> <div class="profileName"> <!-- Author name linking to author post index goes here --> </div> <!-- END .profileName --> <div class="profileJob"> <!-- Author info (website and Twitter handle) goes here --> </div> <!-- END .profileJob --> </div> <!-- END .profileStats --> </div> <!-- END .profile -->
Retrieving the dynamic author elements
To generate the dynamic content we are going to use a set of standard WordPress functions. These have changed over the last year or so and as a result the ones featured in many older tutorials are now deprecated.
To get the author bio we use the_author_meta():
<?php the_author_meta('description'); ?>To get the author Gravatar we use a custom code block that gets the user email address and retrieves the correct Gravatar based on that address:
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>To display the author name as a link to the author index page we use the the_author_post_link(). It’s an all-in-one solution that outputs the name with the correct link attached:
<?php the_author_posts_link(); ?>For the links to the author website and Twitter account we use the_author_meta() again interspersed with some plain text. Note that you have to combine several functions to get the name displayed as well as the link created:
<a href="<?php the_author_meta('user_url'); ?>" title="<?php the_author_meta('first_name'); ?>'s website"><?php the_author_meta('first_name'); ?>'s website</a><br /> Follow <?php the_author_meta('first_name'); ?> on <a href="http://www.twitter.com/<?php the_author_meta('aim'); ?>" title="Twitter name: <?php the_author_meta('aim'); ?>">Twitter</a>
A caveat: The Twitter handle is a bit of a cheat!
If you look at the last line of the last code example you’ll see that for the Twitter name I’m actually calling the AIM value (AIM being America Online Messenger). This is because the standard WordPress profile page only asks for your e-mail, website, AIM, Yahoo IM and Jabber / Google Talk information. I wasn’t aware anyone was using AIM any more and I have a feeling this is a leftover from way back so I chose to use this field to output the Twitter handle because it has the least chance of anyone actually using it. There is a way to add Twitter and other handles properly but this requires the use of plugins – something I’m not a big fan of. If you’re interested there is some information on it in the WordPress Codex.
Putting it all together
Now that we have the source code and all the correct dynamic tags it’s time to put it all together. The end result (barring any changes you decided to make on your own) should look like this:
<div class="profile"> <div class="profileText"> <?php the_author_meta('description'); ?> </div> <!-- END .profileText --> <div class="profileStats"> <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?> <div class="profileName"> <?php the_author_posts_link(); ?> </div> <!-- END .profileName --> <div class="profileJob"> <a href="<?php the_author_meta('user_url'); ?>" title="<?php the_author_meta('first_name'); ?>'s website"><?php the_author_meta('first_name'); ?>'s website</a><br /> Follow <?php the_author_meta('first_name'); ?> on <a href="http://www.twitter.com/<?php the_author_meta('aim'); ?>" title="Twitter name: <?php the_author_meta('aim'); ?>">Twitter</a> </div> <!-- END .profileJob --> </div> <!-- END .profileStats --> </div> <!-- END .profile -->
Making it conditional
If you cut and paste the code above into your page or post template it will appear in every page or post. Which I’m pretty sure is now what you want. To make it elective you need to make a conditional statement in the code. I do this by using Custom Fields, in this case a field with the name “author” and the value “true” or “false”:
<?php if((get_post_meta($post->ID, 'author', true))) { ?> <!-- Code goes here --> <?php } ?>
This small function asks “if this current post has a custom field with the name “author” that is set to “true”, do what I say”. That way your box will only appear if the custom field has been defined.
The final HTML/PHP markup
With the conditional statement in place the complete markup to be pasted into your theme file looks like this:
<?php if((get_post_meta($post->ID, 'author', true))) { ?> <div class="profile"> <div class="profileText"> <?php the_author_meta('description'); ?> </div> <!-- END .profileText --> <div class="profileStats"> <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?> <div class="profileName"> <?php the_author_posts_link(); ?> </div> <!-- END .profileName --> <div class="profileJob"> <a href="<?php the_author_meta('user_url'); ?>" title="<?php the_author_meta('first_name'); ?>'s website"><?php the_author_meta('first_name'); ?>'s website</a><br /> Follow <?php the_author_meta('first_name'); ?> on <a href="http://www.twitter.com/<?php the_author_meta('aim'); ?>" title="Twitter name: <?php the_author_meta('aim'); ?>">Twitter</a> </div> <!-- END .profileJob --> </div> <!-- END .profileStats --> </div> <!-- END .profile --> <?php } ?>
Where to put the code
Like I said, this code has to be inserted into your theme files for the box to work. The easiest way to do this is actually to place it in a separate PHP file called something like “profile.php” and then call in from the theme files in question. That way you don’t have to edit the core theme files if you want to make a change to the box and adding it to new files means adding just one line of code.
If you placed this code (and only this code) in a file inside your theme called “profile.php” calling it from one of your core theme files is as easy as adding this one line of code:
<?php include ('<?php echo get_bloginfo('template_url') ?>/profile.php'); ?>Where you insert it depends on where you want the box to appear in relation to your post content. If you want it to appear directly above you insert it before the the_content() function call. If you want it to appear after you insert it after and so on. Since you’re only inserting one line of code it’s easy to experiment and move it around for the best placement. And since the CSS is flexible width it will work properly pretty much regardless of the width of your post area.
The only thing to keep in mind is that the author box must be called from within the loop, otherwise it will not work.
The final CSS markup
The CSS markup for the author box is pretty much identical to the CSS in the original tutorial. I’ve just added some specifications to avoid conflicts. All you need to do is paste this into your styles.css file, get the blue background image file and place it in your theme image folder and make sure the call to the file has the correct image folder name.
/* AUTHOR BOX STYLES */
.profile {
border: 1px solid #CCCCCC;
position: relative;
}
.profileText {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 10px;
line-height: 1.4em;
text-align: justify;
}
.profileStats {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
text-align: right;
}
.profileStats img {
position: absolute;
right: 0px;
bottom: 0px;
}
.profileName {
padding-bottom: 5px;
padding-right: 92px;
font-size: 1.2em;
font-weight: bold;
color: #2e4672;
}
.profileName a {
color: #2e4672;
}
.profileName a:hover {
color:#24375B;
text-decoration: none;
}
.profileJob {
font-size: 0.8em;
padding-right: 92px;
padding-top: 5px;
background-image: url('{image folder}/testimonialBlue.gif'); /* Remember to set the correct image folder here */
background-repeat: repeat-x;
height: 45px;
color: #FFFFFF;
line-height: 18px;
}
.profileJob a {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
/* END AUTHOR BOX STYLES */That’s all there is to it. Have fun adding this box to your website or blog and customizing it to fit with your theme. And if you like, drop a comment below to show it off to the world.
Apr 23
Build a fancy author or profile box with Expression Web
A profile box is a great way of quikcly giving your visitors information about a person featured on your site. These boxes normally feature a quote or short biography followed by the person’s name, affiliation and maybe a photo and usually are just straight up blockquotes or something similar. In other words they are a bit boring. But there really is no reason why they should be: Text and images on the web can pretty much be displayed in any layout you want. All you need is the creativity to come up with a better way of displaying it and either the knowledge of CSS and HTML to get it done or a tool to help you along the way.
In this tutorial I’ll show you how to build the fancy profile box pictured above and featured on the testimonial page on the Pink & Yellow Media website using Expression Web. If you don’t use Expression Web you can still follow along and use the code so don’t worry. Click here to see a working demo (opens in new tab or window).
Start with a design
The image above is actually the real Photoshop mockup I did for the project (if you look closely you’ll see that Tracy’s photo is blurry because I kept scaling it up and down to get the size right). I mock up all my projects, even if they are just small ones like this, in either Photoshop or Expression Design to have a quick way of altering the layout and design until I find something I like.
The completed design also serves another equally important purpose: With the layout done it’s easier to map out how the HTML and CSS needs to be organized to get the dynamic web content to match the static image. In it’s most basic form HTML works by wrapping content in boxes and CSS styles those boxes. Therefore mapping out what boxes are needed right on the design like below makes it a lot easier to figure out the next several steps.
Building the HTML markup
The boxed out image above gives us a clear indication of how the markup needs to be organized:
- There’s a box that contains everything that has a grey border
- The quote itself has to be contained within it’s own box
- The profile info (name, affiliation, image) needs to be wrapped in its own box
- The name is separate from the affiliation and needs its own box
- The image needs to float on top of other content, namely the blue background banner
From this we can start building the markup. I usually start working with actual content right away but I’ve been told most people get confused by this method so I’m going to recommend building the HTML framework first and then inputting the content. The next steps take place in Code view.
As step zero create a container to simulate the width of your website. This is just to make sure that the box expands and contracts properly when it’s done. To do this go into Code view and create a new line directly under the <body> tag. Type <div id=”container”> and Expression Web creates the end </div> tag for you. Hit Return several times to create space between the beginning and end tag.
A smart tip: To keep track of what tag closes what div insert a comment after each of the closing divs expalining what that is, for example </div> <!– END #container –>
Create a new line under the div you just created and create a new div, this time with the class profile like this <div class=”profile”>. This div is the outer wrap for the actual box. Again hit Return several times to make space between the beginning and end tag and identify the end tag with the comment <!– END .profile –>.
Create a box for the profile text by creating a new div inside the profile div with the class profileText.
Underneath the profileText div (not inside it) create a new box to contain the name, image and affiliation. Give this div the class profileStats.
Inside the profileStats div create two new separate divs with the classes profileName and profileJob respectively.
The framework is now complete and should look like the code example below. Notice how I use tab indents to visually show how elements are nested within eachother:
<body> <div id="container"> <div class="profile"> <div class="profileText"> </div> <!-- END .profileText --> <div class="profileStats"> <div class="profileName"> </div> <!-- END .profileName --> <div class="profileJob"> </div> <!-- END .profileJob --> </div> <!-- END .profileStats --> </div> <!-- END .profile --> </div> <!-- END #container --> </body>
Insert the content
With the framework all mapped out it’s time to insert some content. In Expression Web go to Split view. You’ll notice that in the Design view portion there are now three boxes with dotted outlines. Clicking on each of these will show you what box you have selected. At the same time you’ll see where you are in the framework structure in the Code view portion so you always know you are typing out content in the right place. Now you can insert your content in the different boxes. The bio, profile, quote or testimonial goes in the profileText box, the name of the person goes in the profileName box and the affiliation stats (position, company, website etc) goes in the profileJob box.
The image in this tutorial is 88px by 88px. To personalize this tutorial you should make your own image to use.
When it comes to the image it doesn’t really matter exactly where you insert it (you’ll see why later). But for structural purposes it should be within the profileStats box. To insert it place your cursor directly after the opening tag of the profileStats div and hit Return to create a new line. Click Insert on the main menu, select Picture and From File to open the Picture dialog. From here select the image you want to display and click Open. This will insert the image into your code. The image to the right shows the markup in Code view and what the cntent currently looks like in Design view (click for full size version). Below is the markup at this point:
<body> <div id="container"> <div class="profile"> <div class="profileText"> If there was a need for a Word Press Superhero [and there is] Morten would be your guy.<br /> Pink & Yellow Media took on the Design Schooled Kids website project because it would push Word Press to its very limits in both look and functionality. We presented them with a design and it they made it a reality – BIG TIME!<br /> Without hesitation I would highly recommend Pink & Yellow Media.</div> <!-- END .profileText --> <div class="profileStats"> <img src="tracyPic.jpg" /> <div class="profileName"> Tracy Sullivan</div> <!-- END .profileName --> <div class="profileJob"> Principal & Creative Director <br /> <a href="http://www.designschooledkids.com" title="Design Schooled Kids"> Design Schooled Kids</a></div> <!-- END .profileJob --> </div> <!-- END .profileStats --> </div> <!-- END .profile --> </div> <!-- END #container --> </body>
Styling the content
You now have the complete markup for the page. The next step is to create the styles that will make the box look the way you want it to.
Again step zero is to simulate the width of an actual site: On the right hand side of Expression Web you should have a series of panels, probably Toolbox, Apply Stles and Manage Styles. Close Toolbox and Apply Styles (you can always open them again from Panels on the main menu). I do 99% of my work from the Manage Styles panel. In the Manage Styles panel click New Style to open the New Style dialog. For the Selector type #container (the # sign means ID while a punctuation mark means Class). Go to Position and set the width to whatever width you are going to work with. In my case it is 506px. Click OK to apply the style. You should now see that the box is narrower than it was before.
.profile
The .profile class is the outer box that wraps the content. From the image at the top of the article we see it is supposed to have a grey border. If you want to, Expression Web will help you assign selector names to your styles. Click on any of the content in Design view and use the Tag Selector up at the top to highlight the <div.profile> tag. Now click on New Style in the Manage Styles panel and Expression Web will automatically set the Selector name to .profile. All you have to do here is go to Border and set all four sides to solid, 1px and #CCCCCC. Click OK to apply the style and you’ll see the content now has a grey border around it.
.profileText
You may have noticed you didn’t add padding to the .profile box to give the text some breathing space. This is because that padding would have affected the blue bar at the bottom of the box. You’ll see later. To create some breathing space for the profile text and set the font family create a new style with the selector .profileText. Under Box set Padding for all four sides to 10px. Under Font set the font-family to Arial, Helvetica, sans-serif and font-size to o.8em. Click OK and the text will indent and change font family.
.profileStats
The name and position in the design is a serif font and aligned to the right. This can be done in the respective styles for the individual elements or as we do it here in the overall style: Create a new style with the selector .profileStats, set the font-family to Georgia, Times New Roman, Times, serif and font-style to italic. To change the text alignment go to Block and set text-align to right.
.profileStats img
Right now the image appears above the rest of the profile stats. The design calls for it to appear in the bottom right corner. To do this we’re going to use absolute positioning. Create a new style with the selector .profileStats img. This style will only target the image. Go to Position and set Position to absolute, right to 0px and bottom to 0px. The absolute positioning ‘lifts’ the affected content out of the regular stream and positions it based on XY coordinates within the page, in this case 0px from the right and 0px from the bottom so the bottom right corner. But when you click on OK you’ll see that the image places itself in the bottom right coner of the page, not the box. This is because an absolutely positioned element will relate itself to the first containing element that has a position value set to something other than static which is the default value. Since there are no such elements it relates itself to the window itself. To fix this we need to change the Position value of the .profile box. To do this go to the Manage Styles panel, right click the .profile style and select Modify Style from the pop up menu. In the Modify Style dialog go to Position and set position to relative. Click OK and the image now appears in the bottom right hand corner of the box. But now it overpals the name and affiliation text. So that’s what we’ll fix next.
.profileName
To shift the profile name out from under the image create a new style with the selctor name .profileName, go to Box and set padding-right to 98px (88px for the image widht plus 10px for some breathing space). At the same time set padding-bottom to 5px. Under Font set font-size to 1.2em, font-weight to bold and color to #2e4672. Click OK to apply the new style.
.profileJob
This is where that blue stripe in the design comes in. The blue is actually a tiny .gif image tiled to the right and used as a background. Create a new style with the selector .profileJob. Let’s fix the text first: Set font-size to 0.8em, color to #FFFFFF and under Box set padding-right to 98px and padding-top to 5px. To add the blue background go to Background, set background-image to testimonialBlue.gif (image file) and set background-repeat to repeat-x. Finally because the design calls for the blue banner to be 50px tall go to Position and set height to 45px. It’s set to 45 rather than 50 because the padding is added on to the height and you already added 5px earlier. Setting height to 50px would mean the box is actually 55px tall.
.profileJob a
Finally to style the link create a new style with the selector name .profileJob a. Set font-weight to bold, color to #FFFFFF and check none under text-decoration.
Final thoughts
This box is fairly easy to implement in both static and dynamic sites. I have it running under WordPress on our company website though I had to create a special style for the paragraph tag to get that to work properly. The box is stested against all major browsers and works properly. The only divergence is a 1px shift of the image in Internet Exprlorer 6 which I think is acceptable.
Final HTML Markup
<body> <div id="container"> <div class="profile"> <div class="profileText"> If there was a need for a Word Press Superhero [and there is] Morten would be your guy.<br /> Pink & Yellow Media took on the Design Schooled Kids website project because it would push Word Press to its very limits in both look and functionality. We presented them with a design and it they made it a reality – BIG TIME!<br /> Without hesitation I would highly recommend Pink & Yellow Media.</div> <!-- END .profileText --> <div class="profileStats"> <img src="tracyPic.jpg" /> <div class="profileName"> Tracy Sullivan</div> <!-- END .profileName --> <div class="profileJob"> Principal & Creative Director <br /> <a href="http://www.designschooledkids.com" title="Design Schooled Kids"> Design Schooled Kids</a></div> <!-- END .profileJob --> </div> <!-- END .profileStats --> </div> <!-- END .profile --> </div> <!-- END #container --> </body>
Final CSS markup
<style type="text/css"> #container { width: 506px; } .profile { border: 1px solid #CCCCCC; position: relative; } .profileText { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; padding: 10px; } .profileStats { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; text-align: right; } .profileStats img { position: absolute; right: 0px; bottom: 0px; } .profileName { padding-bottom: 5px; padding-right: 98px; font-size: 1.2em; font-weight: bold; color: #2e4672; } .profileJob { font-size: 0.8em; padding-right: 98px; padding-top: 5px; background-image: url('testimonialBlue.gif'); background-repeat: repeat-x; height: 45px; color: #FFFFFF; } .profileJob a { color: #FFFFFF; font-weight: bold; text-decoration: none; } </style>
Aug 24
HTML Basics: Hyperlink Syntax – Absolute, Relative and Root-relative
My new book Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours is nearing completion (just finished final review of the first 10 chapters last night). The book is a revision of the original for the new version of Expression Web and in the rewriting process I also added some new content to help the readers better understand the sometimes confusing and mysterious world of web code. These additions were mostly brought forth by questions and comments from readers as is the case with the excerpt below about hyperlink syntax.
I chose this excerpt because it is relevant not only to people who use Expression Web 3 but to anyone who does anything on the web. When I started out in this field I was often confused about why there were three different types of hyperlinks and how and when to use them. Well, here is a straight forward explanation with examples:
Absolute, Relative and Root-relative Hyperlinks – an explanation
As you are creating hyperlinks in Expression Web 3, you will notice that the syntax of the link address in the Code view changes depending on what you link to. There are actually three different ways of writing a hyperlink address, all of which are used for different purposes:
Absolute Hyperlinks
Absolute hyperlinks are complete addresses that contain all the elements of a URL. They always start with some version of http:// followed by the domain name (for example, www.designisphilosophy.com) and optionally a page/folder. Absolute hyperlinks are used when linking to pages outside of the current site that have a different domain name.
Relative Hyperlinks
Relative hyperlinks are addresses that are relative to the current domain or location. They only contain the name of the target page prefixed with any necessary folder moves (for example, default.html). The browser sees that this is a relative hyperlink and adds the domain and folder location of the current page to the beginning of the link to complete it. If you use relative hyperlinks and you want to navigate from a page stored in one folder to a page stored in a different folder you add the folder prefixes to the hyperlink. For instance, a relative link from a page in Folder 1 to a page in Folder 2 would be ../Folder 2/page.html, where the ../ tells the browser you want to go out of the current folder and into a new one. When you create hyperlinks between pages in Expression Web 3, they are always inserted as relative links so that the application can easily update them if you choose to move files around. However, if you move the files around on your computer outside of the Expression Web program, the hyperlinks break.
Root-relative Hyperlinks
Root-relative hyperlinks are a subset of relative hyperlinks in which all the links are assumed to start from the root folder (domain name) of the site. They differ from the relative hyperlinks in that the address is prefixed by a forward slash (for example, /default.html). The browser applies only the domain to the beginning of this link. Root-relative hyperlinks are used in place of relative ones in large sites in which there is a chance the files will be moved around without using an application such as Expression Web 3 to update them. Because they refer to the root of the site rather than the current location of the page they are placed in, they work regardless of where the file is placed as long as they remain under the right domain.
Aug 17
Why a CSS Reset should be at the core of your stylesheet
The CSS Reset is a little known and often overlooked tool in web design that makes cross-browser and cross-platform compatibility a lot easier. It also ensures that you start with a clean sheet when building CSS-based web sites, whether they be single pages, static sites, WordPress sites or anything else. In my view the CSS reset is so important that web designers, even those just starting out, should use it at all times and make it the foundation of any and all style sheets they create. In fact the employment of the CSS Reset is a main tenant in both my books on Expression Web 2 and Expression Web 3 and is the basis of all my own design projects including the free WordPress theme Typograph.
Why do I need a CSS Reset?
If you’ve never worked with a CSS Reset before I can pretty much guarantee that the question you are itching to ask is “why do I need a CSS Reset”. After all, you’ve designed or worked with numerous CSS-based sites in the past and even though they didn’t have a CSS Reset they work just fine. Right? Well, let me ask you this: If you’ve ever tried to design a site from scratch using CSS, and you’ve tried to make it cross-browser compatible, you’ve probably noticed that your styles don’t always look the same in different browsers even though they should. In most cases this has been a Internet Explorer vs. the rest type of battle and you’ve probably written it off as such and just picked a side. But that’s not the only, or right for that matter, solution. If you run into a browser incompatibility issue where CSS is concerned, it’s more often than not due to the fact you haven’t properly defined your styles leaving it up to the respective browser to make guesses as to what you want the site to look like.
To put it in simpler terms: If you don’t define all the default CSS parameters in your style sheet, the browser will use its default parameters instead. And since different browsers have different parameters your site will end up looking different depending on what browser you use.
What does the CSS Reset do?
As the name suggests, the CSS Reset resets all the default CSS parameters to a neutral position thus overriding any predefined assumptions at the hands of the browser. That’s a bit of a vague explanation so I’ve made a visual example that illustrates it perfectly:
The image above shows the same piece of basic HTML displayed when no CSS is defined and when the CSS Reset is applied. It is pretty obvious what happens: When you create a HTML page with some basic tags like <h1>, <p>, <blockquote> and <ul> without defining the styles of these tags with CSS, the browser applies its default stylesheet to these tags. But like I said earlier, different browsers have different standard stylesheets and as a result the page won’t look the same across all browser. And although this isn’t really a big problem when we’re talking super-basic stuff like what is displayed above, it becomes a serious pain in the neck when you create complicated CSS layouts.
So all I’m doing is creating more work for myself?
Unfortunately the gut reaction from a lot of people when they see the image above is “Oh crap! Why would I ever do that? I just create tons of work for myself.” Well, that’s partly true: With a CSS Reset applied you do have to manually define all your styles unless you like the reset look (I don’t). But on the bright side that also means you are now in complete control of every aspect of your site and nothing is left to chance any more. And in my book the former far outweighs the latter.
If that doesn’t convince you, consider this: Before I startet using the CSS Reset in all my projects, I spent a lot of time trying to jury rig my code into playing nice in all browsers. This often included using IE hacks and JavaScript. After emplying the CSS Reset I only rarely encounter these problems, and when I do it’s usually because I made a mistake somewhere.
Alright, I’m sold. How do I start using the CSS Reset?
There are several CSS Resets available out there. The one I use is CSS guru Eric A. Meyer’s Reset Reloaded. It seems to be the most comprehensive reset and it is constantly being updated. To employ it I simply copy the code from the site and paste it in at the very top of my stylesheet. When it comes time to work on my own styles I make new ones leaving the CSS Reset intact. Cascading Style Sheets work as a cascade from the top down which means with the CSS Reset on top the browser will first read all the reset styles and then whatever styles I define below and apply them in order. That way the layout is guaranteed to be clean of browser junk and only shows my style code.
That really is all there is to it. So employ the CSS Reset and go forth and code.
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.
