Design, Develop, and Grow
As promised, we have launched our WordPress theme to stand as our “finale” in the WordPress Customization Series.
Prebuilt is a red / white / grey based WordPress theme, coded in valid XHTML and CSS, which is now ready for download.
You can grab it from here.
This posts’ comments will remain open for discussion.
In our WordPress Customization Series, you’ve learned how to handle the header, make some basic layout changes, and most recently, go from html to a wordpress theme quickly and easily. Now, we want to review some of our favorite plugins which are essential to any WordPress installation.
First and foremost, comment spam has to be stopped in it’s tracks. There are two plugins that combine to do an absolute excellent job at stopping comment spam.
Akismet – An included plugin with WordPress 2.0+, Akismet uses a globally managed blacklist to automatically detect comment spam. Akismet requires an API-Key obtained from WordPress.com, and running it afterwards is effortless.
Spam Karma 2 – Spam Karma 2 is another spam killer. SK2 uses a “karma” system to decide if comments are posting to many links and repeating to many words. SK does a great job at detecting what is and isn’t spam, and you can set various levels of intensity for it’s filters.
Corrector – The most recent spell checker plugin I stumbled upon is by far the best I’ve seen. Corrector uses ajax to check and correct spelling, without even leaving the post. This plugin is quick and is essential in eliminating costly grammar mistakes in posts.
Get Recent Comments – Get recent comments is a comment getter that can pull the x latest amount of comments without any other unnecessary features. Get Recent Comments only takes a line of php code to display comments wherever and however you want to anywhere on your blog.
Filosofo Enroll Comments – There are many similar plugins, by my personal favorite is Filosofo’s Enroll Comments. Enroll comments allows someone to automatically become a “subscriber” of a post that they comment on if they check off that they’d like to receive notification of followup posts. When the user is logged in, at the end of each comment form the user is allowed to manage their subscribed comments.
Gravatars – Gravatars allow your users commenting to have an avatar for themselves, as assigned by gravatar.com, which serves avatars all over the place (Globably Recognized Avatar). They are very easy to implant and can be customized using a small amount of css.
Ultimate Tag Warrior – UTC is the best system for tagging posts in wordpress. Tags allow your posts to be found much easily by searching, and it also indexes them on places like Technorati. UTC is a highly adapatable plugin that gives you many options in a simple, drop in plugin.
These are just some of the many WordPress Plugins available today, which allow you to take wordpress to the next level quickly and easily. This is only a short list, because we wanted to focus on plugins you really need to have, not list every great plugin in every category. All these plugins can be obtained from the WP Plugins database.
Coming up next week, the release of our anticipated Prebuilt theme for wordpress, with support for some of the best plugins right out of the box. Stay tuned for more information.
On a day where more of the focus is on 9Rules, we’re back to finish the layouting elements of our WordPress Customization series.
In our last few articles, we’ve covered the importance of the WordPress Header file, and beginning layout changes, which were mostly minor code edits to accomplish certain things. Now we get to the heart of WordPress – taking advantage of it’s features to use it as much more than a blog.
Most beginners accept WordPress as what it is – a simple way for them to get their own ideas and opinions out by posting blog entries. Then there are the designers or more code-knowledgeable people who take WordPress to the next step, by adding there own graphics and customizing design elements in css files. Finally, there are those who understand everything wordpress is capable of, and they take advantage of all those features.
One great feature of WordPress is it’s ability to run multiple post queries. So, what does that mean in English? First, you must understand that WordPress knows what it’s doing by using a function called “The Loop“. The loop is how everything is done in WordPress, and it is used over and over again (hence, the loop ;)).
The loop decides how each post will be displayed, and what parameters go into certain functions. So what exactly is multiple queries? By default, WordPress themes tend to have a standard loop on their main index, which gathers all posts from every categories, and displays a certain amount as set in the options page. Sometimes by making small changes like indicated last week, the posts can be full or excerpts. Multiple queries allow you to layout posts from different categories in different areas of the site. For example, a three column layout with posts from one specific category in each.
In our case, we use multiple queries to display posts from our “Articles” and “Interviews” categories in their own columns, spacing them out from regular site news so they are more easily recognizable.
Let’s take a look at our code to see how we did this:
[php]
[/php]
The first thing we did was enclose both sets of code in their own css classes, allowing the posts to appear in two columns, rather than crammed together. As you can see in line 1, we start with a opening div class tag calling for “cusleft”. The tag is closed on line 10, before an opening tag for div class “cusright” is opened for the next column of posts.
Let’s take a closer look at lines 2-9, which contain the php code for displaying posts.
[php]have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
[/php]
The php code starts off by stating that you’re starting a new WordPress query, then goes in to ask for category name and showposts. In our case, the category name we wanted to pull articles on the left for was called “articles”. We wanted to pull only one post, so our showposts number was one. Let’s say you had a category called “reviews”, and you wanted to show the last 10 posts from that category. Your php code would look like this:
[php]have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
[/php]
Notice that the category name has been changed to “reviews”, and the showposts number has been increased from 1 to 10. The function continues, this time saying to itself, do not repeat the post (which eliminates the post showing more than once.) The next part of code determines how the post will be displayed. Let’s say you wanted the title to link to the full post content, and you wanted to display the whole post content. The code would look like this:
[php]
[/php] Notice how we changed “php the_excerpt to php the_content. By wrapping the code in a div, we tell it to output each post the same way. In this way, you can define style elements to be applied to each post being displayed. Welcome back. Now that you’ve had a week to play around with your WordPress header file, your probably itching to get designing, and move along with your layouting. Believe it or not, the jump from html to WordPress templates is not a hard one to make at all – in fact, it’s more like walking up stairs then jumping. Everything that happens in WordPress goes down in the index.php, the center of your blogging universe. This one file is usually the deciding factor in your visitors either saying “I should check this out” or, “WTF” – and leaving. The index is what’s going to grab the readers attention. If it’s impossible to navigate, read, and is a mess organization wise, your blog or site is a bust. While ultimately, content usually proves king over design, design plays a major role in visitors attitudes towards a site. Let’s take a look at that wonderful index.php, in this case, it’s WordPress 2.0’s default theme, Kubrick. This is the theme everyone installing wordpress starts with, and the theme most beginners stick with, simply because customizing WordPress is such a hard concept to grasp. First things first. If you’ve never found it to this file yet, nows the time to do it. Head over to the Presentation tab, then Theme Editor. Make sure you’re on the WordPress Default theme, as it will make it much easier to understand and follow along with my examples. The very first thing you notice is a small line of php code, looking like below: [php][/php] Look familiar? That’s our friendly header.php being called into the template. You’ll notice there are a few more of these php get functions throughout the file, including one for the footer and one for the sidebar. You’ll also notice that these appear frequently – in every theme file to be exact. These functions make it much easier to include things in each different theme file. Instead of copying all the header, footer, and sidebar code into every theme file, these functions do it all for you. This becomes a real time saver, because to change the header of the blog, you simply modify that one file (header.php), and wham, the changes are seen on all pages. Alright, alright, back on task. If you continue down the index.php, you’ll notice a whole jumble of code between the function for getting the header, and the function for getting the sidebar and footer. The first line you’ll stumble upon sets up the overall look of the page: [html] By quickly scrolling down to the bottom of the Index template, you’ll notice that div we just opened for id “content” gets closed right before that sidebar function. This will become important, but we’ll get to that later. The next block of code you see is essentialy the whole thing between the first opening and closing div we saw. It looks like this: [php] Sorry, but you are looking for something that isn’t here. [/php] Believe me, if I was new to code, I would quit right there after seeing all that. I’d have no place to start. So, let’s make things a little easier for you. Take a look at the first few lines of this php block. These functions are very easy to understand, simply by looking at them. Together, they’re saying, if there’s a post available, then show it. Now, it’s up to you to give it the parameters so it nows how and what to display, otherwise those functions go unused. [php] The parameter setup all goes down in the next few lines, beginning with another opening div, this time for class “post”. [html] [/html] This is where WordPress, stylesheets, and php combine to provide you with your posts. First, the post id is called upon. Usually, this is not shown, which is this case in this theme. Between the opening and closing h2 tags are php functions calling for the post title name, as well as the permanent link to them. In the opening and closing small tags, you get a function that will output the time of the post, as well as the authors name, as specified in the WordPress Dashboard. Next, we have the div that does all the displaying for each and everyone of your posts. [html] [/html] What this is doing, is grabbing the article content, in this case, the whole article content, and, if specified as a cutoff text limit in the WordPress Dashboard, or if you decided to insert the More tag into your post, a link to the rest of the post (Read the rest of this entry…). Below that is the final class in this file, which is “postmetadata”. This is where extra stuff like text links to categories the article was posted in, comments and the number of comments go. It’s fairly easy to see what php functions to which. Over the next few weeks, Devlounge will chronicle all customization elements of wordpress, from headers, to layout, and even what plugins you need to have. By the end of the series, you’ll be on your way to using harvesting all of the power of WordPress, to do much more than a blog. Sometimes, headers become lost as an way of customization for wordpress. But in many ways, your wordpress header can be the kickstarter of your blog, in both terms of search placement, and display for every wordpress based page. The WordPress Header is, by default, generated dynamically, with such things as the blog title and description, theme name, author, and stylesheet url. Usually, you’d prefer to keep these settings untouched, as it ensures that stylesheets will work correctly with your blog, and everything will flow right. But, in order for your blog to stand out, small tweaks to the header can make all the difference. By default, WordPress outputs titles as “blog name – description – page/post title”. While in most cases this would be fine, there comes a time when you may want to change the page title to your own. Maybe you want all pages to have just the site name, or, you’d like to remove the description tagline. These edits are extremely easy to make, but first timers who know basic html become nervous when they see php being used to generate the title tag. Looking at the php tags for the first time, you’ll find it’s easy to see the meanings behind them. In the WordPress Default’s theme header.php, you’ll come across the title tags being filed with the tags from the screenshot above. So, what does it all mean? In between the title tags is php code calling for information from the WordPress Options, Options tab, where you specify the blog name and description. The next few php requests check to see if the page is a single page or part of the archives, and then assigns them with the corresponding name, usually “blog name – page or post title”. So, how do you get around this? Start off by deleting everything between the title tages, so only the opening and closing tags remain. Next, you can enter the page title as you wish, for example, My Site. If you plan to include what page you’re on, you may want to include a space after your title, followed by a hyphen, space, and then the approriate php code. In this case you’d take all of the php code after the php tag containing “blog info” is closed. You’ll now have a title that’s been customized, and doesn’t rely on the WordPress Options to generate it. This gives you the ability to include your own slogan, and not include page and post titles at all if you’d like to keep them out. Another benefit of editing the header is the ability to assign alternative style sheets, such as custom stylesheets for Printing, which normal wordpress headers would not have. Adding an alternative style sheet is easy, and it only requires one line of code, pointing to the location of your print style. Since all theme files call for both the header and the footer (Index, Page, Single, Archives, Etc), the header is a great place to setup parts of your design which will repeat on every page, for example, a graphical banner and navigation. In the WordPress Default Theme, there are some quick stylesheet classes and allow for easy changing of elements such as a header background color and image. The actual page design begins after the stylesheet ends, following the body. Underneath the opening body tag, you can begin adding elements that you’ll want to be located on every single page. Another thing WordPress leaves out which is essential to earning blog popularity is metadata, such as keywords, descriptions, etc. These can be easily added, by adding just a few lines of code and filling in your best choice of keywords and site description. This will greatly increase your rank of search engines, and benefit your blog in the long run. Next week, we break down early layout techniques, and get you started with turning your blog into your own. Over the next few weeks, I’ll also be bringing you Advanced Layouting, Customizing the Sidebar, Making the Footer leave a better print, and Plugins you need to have.Customizing WordPress: Layout
Introduction
That ever dangerous Index.php
Breaking down that mess
Php get my help
Wasn’t that last weeks article?
[/html]
” rel=”bookmark” title=”Permanent Link to “>
Not Found
Wow, what a mess
[/php]” rel=”bookmark” title=”Permanent Link to “>
Customizing WordPress: Headers
WordPress Customization Series Introduction
It All Gets Started:
Understand It’s Purpose – Header.php
Output Better Titles
Adding Style to Your Sheets
[html]Setup A Common Header
[html][/html]
Meta Your Blog
[html]
[/html]Up Next
The Best of Devlounge
4 Tips to Personalize E-Commerce Websites
