wp-toolbox

Center an Image with CSS

Bill Toomey — Sun, 30 Mar 2008 18:00:28 +0000

Centering an image is a bit of a tricky endeavor. It used to be just a case of wrapping the image in

tags but that's no longer the case. In today's web standards we can't use the code and as a result we need to develop some CSS code.

The following code is something I've been using for awhile now and I'm quite happy with it. It can be used to center images and can also work with text and certain types of media (like YouTube videos.)

To get started you'll want to open your stylesheet.css file and browse to the area which holds rules concerning images. This code doesn't have to go anywhere specifically - it's just helpful to put it near all the other image related rules.

In this post we're just going to create a CSS class that's meant to handle images that appear in posts - if you're so inclined you can also use it in your general theme structure too. (more...)

Small Schedule Hiccup

Bill Toomey — Thu, 10 Jan 2008 13:21:04 +0000

Both of the PCs I use for writing have recently gone down for one or another reason. My Laptop is currently being repaired by Gateway while my desktop Monitor awaits repair by Best Buy.

As a result the posting schedule will be slightly interrupted for the next couple of days. I'm hoping to be able to continue posting using a work computer but the Basic Theme Design Series will go on a temporary (2-3 day) hiatus.

There will definitely be a new post on Saturday - hopefully earlier.

Sorry for the inconvenience.

Adding Background Images to a WordPress Theme

Bill Toomey — Wed, 09 Jan 2008 01:07:59 +0000

If you've been following our series on Basic WordPress Theme Design this post essentially plays the role of part 5. In this post we'll return to the theme we've been building and we'll add some background images as well as some background colors. With one minor exception we'll mostly be working with our style.css and header.php files.

This post will advance our WordPress theme from what you see in this example from Part 4 - to what you see in this one.

I'll provide the two images needed for this part of the project but feel free to use your own if you want to.

Let's get started!

(more...)

Customizing the Tag in WordPress

Bill Toomey — Tue, 08 Jan 2008 15:00:17 +0000

At hackingWordPress we write A LOT of longer posts and we use the tag A LOT. We do that for a few different reasons.

The first reason is a practical one. Without breaking our posts off somewhere our frontpage would run on endlessly! Five back-to-back long posts would drag things out way to far. The tag allows us to break things up a bit and keep our front-page scannable.

On a more devious note it also helps us make our posts more clickable in our category pages, front page and even in our RSS feed. If you're subscribed to hackingWordPress you'll see that the more tag causes our a link to appear beckoning you to click through to read the post. It's a great way to get people visiting your site rather than just looking at the content in your RSS feed!

In this post we'll go over how to quickly customize your what displays on your blog to help get a few more visitors! (more...)

Creating a Basic WordPress Theme pt 4 - A More Recognizable Blog

Bill Toomey — Tue, 08 Jan 2008 03:40:08 +0000

If you've been following our series on Creating a Basic WordPress Theme you should now have a blog that looks something like the example generated by part 3. While the text is probably very different the basic idea should be the same.

In this post we'll add the code needed to take our previous example and make it a bit more like a standard blog theme. Specifically we'll be moving the sidebar to the left of the main content block and we'll be trimming the edges to give the theme a nice set of borders around the outside. By the end of this post our Blog will look less like the previous example and more like this.

This post will mostly be concerned with CSS but to kick things off we do need to add a new

block to our index.php file. After that we'll be working almost exclusively with our stylesheet.

(more...)

Creating a Basic WordPress Theme pt 3 - Creating Basic Structures

Bill Toomey — Tue, 08 Jan 2008 01:00:49 +0000

In our last few posts we walked through the creation of a basic WordPress theme. It wasn't anything pretty but it did manage to display our most recent posts and our blog's sidebar. In this post we'll be using CSS and some HTML to create a header, footer, and main body for our new theme.

We're going to be keeping things very simple as we continue along the path to full theme creation so don't be surprised by our choice of primary and secondary colors when setting up portions of the page. Later on we can go back and add a more appealing color scheme but for now it's best to keep things simple.

To start we'll create a basic header that will display our blog's title with a link to the blog's main content. Then we'll move on to structuring the main body which contains the sidebar and posts and finally we'll put together a rudimentary footer.

By the end of this post we'll have moved from a theme that looks like our example from part two to a theme that is a bit more color coded.

Now - to work.

(more...)

Wrapping Text Around Images with HTML or CSS

Bill Toomey — Mon, 07 Jan 2008 06:00:33 +0000

Many bloggers swear by the use of images in their posts. Images are a quick way to provide flair for your posts as well as increase their readability. In most cases a solid graphic can also help people better understand what exactly your writing about.

When designing a theme, or even just tweaking a theme for your own use, it usually pays to take a few seconds to create a some special rules for dealing with images. In this post we'll cover the use of HTML and / or CSS for managing images as they'll appear on your site.

The red block you see throughout this post is meant to illustrate the various benefits and shortcomings of each method.

(more...)

Creating a Basic WordPress Theme pt 2

Bill Toomey — Mon, 07 Jan 2008 00:00:37 +0000

In Part 1 of our Creating a Basic WordPress Theme series we kicked off our custom theme by creating a header, footer and style sheet. These three files make up one part of a barebones theme and offer some of the structure that's needed for bringing the whole theme together.

It's now time to get down to working with some Template Tags and getting the theme actually working. In this post we'll start by creating basic functions.php and sidebar.php files to make our theme widget ready. We'll also create an index.php file that invokes the WordPress loop and starts displaying our posts.

By the end of this post we'll have a working WordPress theme! It won't have any styling and it will lack some things like comments and a developed sidebar but it WILL be working.

(more...)

Creating a Basic WordPress Theme pt 1

Bill Toomey — Sun, 06 Jan 2008 22:00:43 +0000

When you're first getting started with a WordPress theme there really are only six files that you need. With only these six files you can create a blog that has a consistent header and footer, has a dynamic (widgetized) sidebar, displays an index page, displays single pages/posts and even displays categories, archives and searches.

Yes, most themes consist of more than just these basic six WordPress theme templates but ultimately these extra templates are just the result of customization.

While we will eventually get into creating more customized template files this post, and most of this series, are based on the creation of a basic WordPress Theme. In fact - using just these six basic files we can create a fully functioning theme in a matter of just a few short hours.

(more...)

Setting up a Local WordPress Sandbox

Bill Toomey — Sun, 06 Jan 2008 21:00:50 +0000

Generally speaking there's a little bit of prep work you need to do before starting a WordPress theme. It's hard to try developing a theme when you're constantly downloading and uploading files to confirm how well they're working and it's even harder to maintain a blog when you're constantly changing the live theme.

To get around this it makes sense to setup a sandbox where you can play around with theme design all you want without worrying about breaking your live theme. While you always have the option of creating a secret directory on your current hosting account it's much easier to install WordPress locally and then play around with the files on your own machine. This prevents you from constantly uploading and downloading files and lets you achieve a safe working environment that doesn't hurt your live blog.

WAMPServer is pretty much widely recognized as the best software to use when installing WordPress locally on a windows machine (XP OR Vista) - it's also free and easy to use which is a big plus.

Rather than spend a long time outlining how exactly to install and setup WAMPServer I'll default to an excellent post that was written over at Weblog Tools Collection.

This two part post will help you get WordPress up and running locally in a matter of just a few minutes - the longest part is the download itself!

In part one you'll download the software and get WAMPServer running locally in Windows (this method works in XP and Vista)
In part two you'll get WordPress running in Windows and learn how to migrate your public blog to your local machine

While the second part of the second part is helpful I think in the long run you're better starting a fresh blog locally for the purposes of theme design. Over the course of this project we'll be creating special posts that showcase different HTML, CSS and JavaScript related posts to make sure things are running well so you might as well have a blank slate to work off of.

Either way it's really up to you.