Archive for October, 2007

My space web page - BLOG DESIGN SOLUTIONS Simply save this code as

Wednesday, October 31st, 2007

BLOG DESIGN SOLUTIONS

Simply save this code as category.php and place it in /wp-content/themes/default/. Now that we have a category template file, we need to decide what we want to customize. Let s make this the Gorillas category. Heh, gorillas are funny. Make sure to have more than the Uncategorized category to play with. Create a new category by going to the Dashboard and selecting Manage . Categories. Call the category Gorillas and give it a description if you want. Finally click Add Category. Make a note of its ID because you ll need that in a second. You also need to have at least one post in a category before you can see it, so go ahead and add a post by clicking Write . Write Post in the Dashboard. When you have written it, make sure you select the Gorillas category at the top right and then click Publish. You can now view the category from the frontpage of the blog. You ll now create a template for the Gorillas category (with whichever category number you noted in the last paragraph), okay? Good. You need to have some links to gorilla resources on the Net offered to your visitors while they are in your Gorillas category listing. First, we edit our previous template name section like so: Now usually we would want to just call and include the template file sidebar.php, but we want to add context-sensitive info, and the menu is the best place for it. So we will be hard coding this bit in this template between the closing div and before calling the footer:

Web hosting domain - WORDPRESS Context-sensitive information is the bee s knees Giving

Tuesday, October 30th, 2007

WORDPRESS Context-sensitive information is the bee s knees Giving information to the user that is both contextually correct as well as useful should be the goal of any webmaster. A prime opportunity to do this is when a reader is browsing your category pages. You will find on Chris s site, where appropriate, a list of other resources specific to the cat egory you are browsing in the left-aligned column. Two prime examples are the Tutorial (www.chrisjdavis.org/category/tutorials) and Web Standards (www.chrisjdavis.org/ category/web-standards) categories. On each one, you find links to offsite resources. Now this is a very limited example of per category templates. If you want, you can change every aspect of the way the Page is displayed, load alternate stylesheets . . . anything! The sky s the limit. But think before you go crazy, people. So what does one need to do to tap in to the power of per category templates? Glad you asked! Let s write some code, shall we? After the previous discussion, creating these templates will be a piece of cake. We ll start by making sure we actually have a category.php file to begin with. You will find it very helpful to have a good layout with which to browse categories, and your readers will, too. If you don t have one, simply open a new file in your favorite text editor and enter this code to get you started with a category template:


, ,

BLOG DESIGN SOLUTIONS We could (Web host) have put some

Tuesday, October 30th, 2007

BLOG DESIGN SOLUTIONS We could have put some of this in the Page Content area of the Create Page screen, but for this demo we want to have everything in the template, so on we go:

Commenter Heat Map

Below is a heat map of the commenters here.

Notice the call to the plug-ins. Finally, we close with the footer call: That is the entire template; now we save it as new_archive.php, place it in /wp-content/themes/default/, and then log into the WordPress admin area to create a new Page. Finally, we need to create a blank Page and link it up with the new template. Let s go to Write . Write Page and get down to business. We need to give our Page a title, let s say My Archives. We can skip down past the Page Content area to Page Options. The first field should be Page Template, and in the drop-down box we should find Archives Template select that, make sure you have my-archives as the Page slug, and click Create New Page. That s it. If you have installed and activated the plug-ins, when you load http://localhost/my-archives/ you should see your lovely new Archives page. Let s continue our exploration of custom templates by looking at another little-known power hidden within the theme system: per category templates. Hidden spiffiness abounds Deep within the recesses of the WordPress code base lies dormant the power to create custom templates for each of our categories; what is astounding is how easy it is to create them. This sleeping giant merely awaits the correct filenames to wake and unleash untold shininess and spiffiness upon your visitors heads! This isn t a feature for everyone, but we think that for a select few it can be a breath of fresh air, not to mention a solution for many frustrations. When you get down to brass tacks, this is a profoundly easy feature to exploit. All you need to know is the number of each category and what you want each category to look like. Let s look at how it can be used on Chris s site (www.chrisjdavis.org).

Web hosting company - and Chris s Commenter Heat Map plug-in (www.chrisjdavis.org/hacks/1.5/ cjd_comment_heat.zip).

Monday, October 29th, 2007

and Chris s Commenter Heat Map plug-in (www.chrisjdavis.org/hacks/1.5/ cjd_comment_heat.zip). After you download these two plug-ins you need to place the *.php files in your Plugins folder located at wp-content/plugins/. After you have done so, load /wp-admin/plugins.php in your browser and activate it. When you load the Plugins Manager, things are pretty straightforward. Find CJD Comment Heat and SRG Clean Archives and click Activate in the right column for each one. You re now ready to move on to the next step. But before we go on, we ll talk a little bit about what each of these plug-ins does. CJD Comment Heat In a nutshell, CJD Comment Heat creates a heat map of the comments that have been made to your site. You can see an example of this plug-in at work on Chris s site: www.chrisjdavis.org/archive/#heat. As you can see, the image, powered by Gravatars (http://gravatar.com), becomes bigger when there are more comments made. If you mouse over the image, you ll see a tooltip telling you how many comments a user has made. SRG Clean Archives Clean Archives from Shawn Grimes is a plug-in that gives a clean, straightforward look at archives, broken out by month. You can see it in action over at Shawn s site: www.sporadicnonsense.com/archives/. Using the plug-ins First things first. Every custom template must start with the following code (this file is called new_archive.php): We call for our header.php file and start adding our content:

Here are the archives for .

Search the archives.

WORDPRESS 205

BLOG DESIGN SOLUTIONS (Tomcat web server) The Page now has a

Sunday, October 28th, 2007

BLOG DESIGN SOLUTIONS The Page now has a headline, which should read Archives, although the Page itself is probably rather empty. If you want to write a small introduction or a set of instructions for your Archives page, go right ahead and edit the Page content. Regardless of how you end up using the various parts to form your template, starting out by looking at what Kubrick does is probably a good idea. The template files that make up Kubrick can be found at /wp-content/themes/default/). Let s now talk about custom templates and, more importantly, how we can bend them to our will. Advanced templating in WordPress Where do we turn when the techniques we have outlined are just not cutting it? What if we want just one of our Pages to have a blue background while the rest of them have white backgrounds? What happens when we want to add a page to our site that doesn t have anything to do with our posts or categories? Again we turn to templates, but this time to a lesser known subset of templates: custom templates. Templates, posts, Pages, and plug-ins There are a number of strictly defined templates in WordPress. But there is also another category of templates that can be anything, can be called anything, and can be applied to any Page you create in WordPress. The fun begins with custom templates. It is a little-known fact that you can apply custom templates to blank Pages in WordPress. What this means is that you can create a completely blank Page in WordPress and then apply a custom theme template laden with code to it. As an example let s look at the archives page at Chris s site Sillyness Spelled Wrong Intentionally (www.chrisjdavis.org/archive/). If you were to look at the page via the WordPress admin, the Page content area would be completely blank. If you then opened the custom template, you would see a whole mess o code, and interestingly enough the_loop would be nowhere to be found. In fact, the only WordPress core code that you would find would be get_header(); and get_footer(); . The rest is either embedded code or plug-in calls. So let s get into some code Our first step is to create the custom template that will be applied to the Archives page. Because we do not want to reinvent the wheel, we ll be making use of Shawn Grimes Clean Archives plug-in (www.sporadicnonsense.com/files/srg_clean_archives_1.5.zip)

Medical web site - Archives by Month: Archives by Subject: Now this

Sunday, October 28th, 2007


Now this code is working (you should go ahead and test it, just to make sure). If you have a brand spanking new install of WordPress you probably won t see much change because you don t have any content that isn t in the current month. Don t worry, though, because when you do have months and years worth of content this will be a great trick to employ. Now we can move along to the main column of the Page. We don t want to hard code the name of the Page into the HTML; instead we want to read the name of the WordPress Page. This is easily done because Pages (being little more than static blog entries) use the same Loop as your normal blog. Replace with the following lines of code:

Read the rest of this page »

‘); ?> Pages: ‘, ‘

‘, ‘number’); ?>

WORDPRESS 203

BLOG DESIGN SOLUTIONS Archives is a pretty basic

Saturday, October 27th, 2007

BLOG DESIGN SOLUTIONS Archives is a pretty basic template. Let s take a look at the code:


Archives by Month:

Archives by Subject:

Let s make this code a little more fun for us and usable for our visitors by making some quick edits. For starters, we ll move the current monthly and category archives into a sidebar, we ll replace them with a list of the ten newest entries, and, heck, we ll throw in a list of the top ten most-commented entries (we ll refer to them as the most popular entries) for fun. First, move the content of the widecolumn into its own sidebar div and rename the widecolumn div to narrowcolumn. (The difference between the narrowcolumn and widecolumn classes in the Kubrick template is that the widecolumn class is centered on the page, leaving no room for a sidebar; whereas the narrowcolumn is aligned to the left, leaving space to the right for a sidebar.) We have to make a few changes to the content of the sidebar to make it validate and style correctly. The following is a good way to go about marking it up:

WORDPRESS Figure 5-6. Your colophon page now with (Web site layout)

Friday, October 26th, 2007

WORDPRESS Figure 5-6. Your colophon page now with contact form! Congratulations! You just created your first custom template for WordPress. This is a pretty simple example of what can be done if you leverage the theme system correctly. The code processing the contact form and shooting off the e-mail is in the code download, so go check it out. Now let s look at customizing an existing template. Customizing an existing template Open up wp-content/themes/default/archives.php in your text editor, and let s get to work! (Make sure to open archives.php, not archive.php!) 201

Free web space - BLOG DESIGN SOLUTIONS After that step, we load

Thursday, October 25th, 2007

BLOG DESIGN SOLUTIONS After that step, we load the header and define a

tag with the “narrowcolumn” class (creating a 450px wide column, as defined in style.css). We load all the normal template tags that we use to call our post/page content. After the php endwhile; endif; is where the fun begins. Here, we include the form and form elements that allow our readers to send us some e-mail. We re not covering the PHP that you need to process and send off the e-mails; that again is beyond the scope of this chapter. So we save the page again and make sure that the shiny new colophon.php page is in /wp-content/themes/default/, whether that is on the local machine or on a remote server. We then go back into the WordPress admin, and load Manage . Pages and then select to edit the Colophon. When the page loads for editing, notice the drop-down menu for Page Template (halfway down the screen). Now is the time to do something with that. If you click the drop-down menu, you should now see Colophon Template as a choice, as shown in Figure 5-5. Figure 5-5. Applying the Colophon Template to our Page named Colophon in WordPress admin Select Colophon Template from that menu, and then for the fun of it, go back up to the Page Content text area and add this to the end of the text: And hey, if you think we re great, leave me a message with this nifty contact form below! Save the page; the browser will reload the page with a message at the top that says Manage Pages. Click that link and then find your colophon page in the listing on the next page. Click View. When the page loads, you should see the screen shown in Figure 5-6.

BLOG DESIGN SOLUTIONS You should see a web (Abyss web server)

Thursday, October 25th, 2007

BLOG DESIGN SOLUTIONS You should see a web page similar to Figure 5-4. Figure 5-4. The Colophon page as your visitors would see it That is to say, it works. It s not a particularly interesting page, but we re about to remedy that with a little bit of code magic. Open up a new blank document in your favorite editor and save it as colophon.php in your default theme folder. Now let s get on to adding some shine to this dull page. Editing the Page First, open up with the standard template file header. It is important to name your custom templates something descriptive because WordPress will label each one by reading the Template Name line.