CSS: The Missing Manual Book Review
Posted on 01/20/2010My reason for picking up this book in the first place was as a refresher course, to reinforce and augment my already pretty basic knowledge of the subject of cascading stylesheets. Since I did not really have a manual, and the second editions publication date seemed to indicate it was up to date, I figured this book would be as good as any.
CSS: The Missing Manual, Second Edition, by David Sawyer McFarland is divided into five parts, the last being reserved for Appendixes. Part I covers the basics, and is indeed geared toward the absolute novice. A bit boring, I was able to skim through the majority of chapters, sparing myself the tedious long winded explanations that a beginner might be more apt to appreciate. That said, this part did do a good job covering the basics, with some pretty good explanations on the importance of Document Type and W3C validation. Inheritance, and the cascading nature of style sheets is also introduced, as well as the concept that HTML is for markup, CSS for styling, a theme that occurs throughout the book.
Part II, Applied CSS as one might expect, gets down to the actual formatting of the elements that make up a web page. Text, graphic, and image formatting is addressed, as well as dealing with white space. Formatting links and navigation bars is also included, with one chapter devoted to styling tables and forms exclusively with CSS.
Posted in Book Review | No Comments �
Configuring my WordPress Tag Template Page
Posted on 11/14/2009Tags associated with individual posts can be a powerful way of indexing a site. For me, I plan to write about multiple subjects, and hopefully will amass a good deal of content on each subject.
Tags are like categories on steroids, whereas a post will usually belong to one broad category, but can address a multitude of subjects (tags).
For example, in my previous post Optimizing the Header Template Page, I chose to place it in the SEO category because this particular template is where all of the imprtant meta tags that the search engines want to see are placed, such as title, description etc. But, the article also addresses the template hierarchy, the template pages themselves, even css and php on a broader scale, so I assigned each of these tags to the post.
Posted in Template Pages | No Comments �
Optimizing the Header Template Page
Posted on 10/21/2009SEO starts with the header.php template page. Using the versatile “bloginfo” template tags we can start the search engine optimization of our website right at the beginning. The first page to be seen by the engines is the header.php template, where among others, the all important meta “title” and “description” tags reside.
In a previous post, I created a flexible header by placing the two graphics on different layers using only the CSS style sheet. The purpose of this exercise was to get the header section to degrade gracefully as the screen resolution collapsed from 1280 to 1028.
As you may have noticed, instead of using the standard H1 header text tag, I chose to place a company logo graphic along with a tagline in place of text as the title of the website.
Using a logo image is a great idea for branding, but it also causes some problems SEO wise that are easily taken care of in the header.php template file.
The first thing I wanted was to have the logo image clickable, because by now even Pavlov’s dog knows that clicking the logo will take you back to the home page.
I accomplished this, and the stuff in the rest of this post by looking through the code of some other themes, and discovering the article Designing Headers in the WordPress Codex.
(more…)
Posted in SEO | 1 Comment �
Building the Category Template Page
Posted on 10/11/2009For the category page, I wanted to place a heading to let you know which category you were looking at, and maybe a short description of what that category is about. I place these tags just after the content div before the loop starts.
I also edited the category out of the post meta data to avoid the redundancy.
Since this website is still pretty young, I have some categories with more posts than others, in fact, some new categories will actually start out with only one post, as this is the nature of growth.
Instead of having one page with only a title and a couple of lines of text, I will first use a php query to determine if there a more than two posts in the category, and then run two while loops.
If the query returns true, that there are more than two posts, I will show only the exerpts. Otherwise, (else), the while loop runs again showing the full post.
The only thing is that if I use the more tag for the home page, that will also show up here (as well as the other template pages), truncating the post anyway. I gotta think there’s a workaround for that, but for now I just got to remember to lose the more tag as the post leaves the home page.
Posted in Template Pages | No Comments �
The Archive Template Page
Posted on 10/10/2009While it may not seem like it on the face of things, the archive.php template page has some awesome responsibility. As the page of last resort for up to eight templates, the archive acts as the last chance for formatting before the index is called for the all important category, tag, author, and date pages.
For that reason, you can see that the PHP is a little more extensive, covering a multitude of ifs and elses’.
When building the archive page, I simply borrowed it from the default theme and made some minor tweaks. The default theme’s archive page pretty much covers the gamut for what should happen in case one of the many possible events occurs, so why reinvent the wheel?
Here is the Loop for my archive.php template page:
Posted in Template Pages | 1 Comment �
Customizing the WordPress Loop for the Single Post
Posted on 10/09/2009While the home page of a blog is generally meant to show off a number of the most recent posts, each actual blog entry, or post, is stored in its own table in the database, and when retrieved resides on its own page.
Each post page is the actual content, and thus the heart of the blog, and is where interactive discussions originate in the form of the comment form. Comments must be turned on in the Admin discussion panel.
In the Template Hierarchy, when a user clicks on a link to a post, WordPress will first look to load the template page “single.php”. If single.php is not found in the themes directory, it will use the index template file.
Let’s examine the code for the single post page loop:
Posted in The Loop, WordPress Themes | 3 Comments �
Defining the Home Page
Posted on 10/07/2009In the main hierarchy of things, the first page to load when someone clicks on a link to your domain would be index.php. This is the template file that we used to create the look, feel, and functionality of our theme in general, and is and should remain the template from which all subsequent templates splinter.
Having recognized that the first page to load should be as customizable as any other page, WordPress developers have allowed the template file home.php to take precedence over index.php as the home page.
The conventional home page for a WordPress blog consists of a number of blog posts (usually 10) in chronological order with the most recent being at the top of the page. This, however, does not have to be.
The home page of a WordPress blog can be a single page iteself (i.e. About), an older Blog Post that is important enough to stick to the top of the list (i.e. “sticky”), a landing page for a particular category, or just about anything you want to convey at your “front door”. It can contain full posts, short exerpts that cut off at 55 words, or exerpts whose length you controll with the more tag.
What you choose to include or not to include on the home page is all determined inside the loop.
I have determined that the homepage for this site (for now anyway) will be pretty conventional, so lets go through the loop.
Posted in The Loop, WordPress Themes | No Comments �
Contemplating the Template Hierarchy
Posted onAs I have previously mentioned, up to this point the only template files in this themes folder were the index, header, footer, and sidebars. If you were to look into the default theme directory, you would see that there are many other possibilities for template files that allow us to style our themes at a very granular level. Category, archives, authors, posts, and pages can all have templates that set them apart from each other both visually and contextually.
WordPress automatically gives certain file names preference over others, and if a particular file is not found in the theme directory, it will use the next file in line, ending up at index.php if no other choice is available.
Before we delve further into the template hierarchy, it is important that we understand the most important part of the WordPress platform, the part that allows us to differentiate between these files, and the engine behind it all: a relatively small piece of coding known as “the loop“.
Posted in The Loop, WordPress Themes | No Comments �
Registering and Widgetizing the Sidebars
Posted on 10/04/2009Now that the layout of the theme is sufficiently bouncy, I will look to the sidebars.
Since I want to keep my sidebars separate for future experimentation, I will create two separate template files, sidebar1.php and sidebar2.php, and fill them with some stuff basically just to create a place holder.
I envision the possible need for an expansive navigation system for the users of this theme, so I created sidebar1 with with that in mind. For now I will use the Suckerfish verticle multilevel css menu as the place holder to remind me what this space is for, with plans to tweak it in the future.
I have no idea what I will do with sidebar2, but I’m sure I’ll think of something.
In the meantime, the immediate task is to widgetize both sidebar1 and 2, so as not to reinvent the wheel, which brings us to the introduction of the mysterious functions.php file.
Functions.php resides at the theme root, and is basicaly filled with plugins, or widgets, that are relevant and/or exclusive to the theme in use. I am very much looking forward to delving deep inside this very powerfull piece of PHP.
First, we need to tell wordpress that we have sidebars, and we do that by resistering them in functions.php.
Check out the code:
Posted in WordPress Themes | No Comments �
Flexible Header Graphic Design
Posted on 09/29/2009Ok, I got a little sidetracked. Anyway, I wanted to talk about how I am using the graphic images in the header in a separate post because imagery is a very important part of any WordPress theme design, and should be discussed in its own context. For me, a pretty picture is worth a thousand words, and is probably what draws us all subconsciously to examine a theme design in more detail in the first place.
A talented graphic artist can do wonders with a photo, collection of photos, vector drawings, animations, special effects and more. Stunning pictures and even movies can be made with today’s sophisticated software, predominantly Adobe’s Photo Shop and Flash.
I use Fireworks MX, and while I’ve looked at other software options, I am just more comfortable with fireworks because I’ve used it for so long. I’m not that great at graphic design and wouldn’t expect to make a living at it, but I am having fun when I do it!
Regardless of what software you use, the principals of graphic artistry remain pretty much the same.
It is beyond the scope of this post (beyond my scope too!) to get into the intricacies of Graphic Design, but since we are discussing a flexible liquid layout, it would seem to behoove us to examine the use of images flexibly incorporated into the design.
In the case of this site, I started with two images, logo.gif and headpic.jpg. Headpic is actually a collection of three images that I can move around as I see fit because I have the original .png file (this will come in handy later on).
If you will notice, the colorful background image in header.jpg (its fiber optics!) fades out as it extends to the left. The reason for this is that as the screen width shrinks, the two images are pushed together. Making the left side of the right image fade into transparency allows for the two images to coexist side by side without one overwhelming the other. This would be true even if the left side was not an image, rather the default WordPress theme header text.
Posted in CSS Stylesheets | No Comments �
