Category Archives: Web Design

Centring Images Using CSS

While working on my latest theme, I wanted a way to centre images. CSS 2 doesn’t have any native way to centre align an image. But there is one way to force the image to be centred:

img.centred {display: block;margin-left: auto;margin-right: auto;}

This CSS code specifies that the image should be displayed as a block and the left and right margins are automatically sized, forcing the image to be centred.

WordPress 2.5 and Page ID’s

I’m currently working on a small project for a local business. As I’m under pressure for time, I’m using WordPress as a CMS.

Because I use pages for the site content, there are times when I need to know the page ID. For some reason the developers have decided it would be better that the admin interface no longer shows the page ID.

According to this thread on the WordPress forums, the solution is to mouse over the page link and check the URL in the browser status bar. Not a very elegant solution if you ask me. Help is at hand. Thanks to Nick Ohrn, there’s a plugin available to restore page ID’s. You can grab it from the official Restore ID WordPress plugin page.

WordPress and Page Templates

I’ve been doing a lot of work recently on my employers website. I had been using Joomla as a content management system, but it was overkill for what I wanted, and I found that it wasn’t the most stable of platforms. (Frequently, and for no apparent reason, pages that were published would suddenly become unpublished.) It was more hassle than it was worth, so I got rid of it and installed WordPress instead.

I decided on WordPress as I’m familiar with it, and with a couple of tweaks to the settings it no longer resembled a blog. It was relatively easy to design a simple template, and get the site up and running, but I did have one major issue. I needed an Events page and a News page to display what would traditionally be considered blog postings . The idea was that each page would be linked to one specific category and one category only. In other words, posts in the Events category would only appear on the Events page and posts in the News category would only appear on the News page.

While WordPress does allow you to specify a static page as your “Front Page” and another page as a “Posts Page”, there doesn’t seem to be an easy way to force WordPress to use two Post Pages, or to restrict a Post Page to just one category. One idea I played around with was to edit the header.php file and manually add the links to the actual categories. WordPress would then display the resulting page using archives.php. It’s then a simple enough matter to edit the file to display the posts as needed. It’s a quick solution but it does pose two problems:

  • The links are hard-coded into the header.php file. If for some reason the links are changed, or if the theme is updated, then the links have to be manually changed again.
  • Using links in this manner doesn’t give the same flexibility as allowing WordPress to manage the navigation, Pages and Posts.

The answer I found was to use Page Templates. By putting the code to retrieve the posts from each category into a Page Template I was able to bypass hard-coding the links and I could display only the category I needed on each page. If your interested, you’ll find a sample Page Template here.

My next thought is to expand this into a plugin in order to make easier to select which category should be displayed, and which page it should be linked to. I’ll have to think about how to go about it some more though.

Using WordPress Pages to Link to Another Site

You may have noticed that since I changed the theme for this site that there is now a page called “paulmc.org” that directly links back to the root of my website. Unlike a normal WordPress page, this page links to a document completely outside the WordPress hierarchy.

I’m sure that it would be possible to hard-code the link into the theme files, but every time the theme is changed, the changes would have to be re-coded again. There’s also the fact that every theme is slightly different, so each theme change could mean starting from scratch. Instead it’s much easier to update the WordPress database.

Updating the database will ensure that the changes are persistent across theme changes. The downside is that if you’re not careful, you could hose your entire WordPress installation. So if you’re going to do this, make a backup. I’ll say that again – backup your WordPress database before you even think of doing this.

The first step is to create a standard WordPress page. The title of the page should be the name that you want to appear in the link. In my case the page title was “paulmc.org”. Under the discussion tab on the right hand side of the writing pane, untick the “Allow Comments” and “Allow Pings” options. Don’t enter any content and publish the page.

Now it’s time to edit the WordPress database. To do this you’ll need access to phpMyAdmin. Connect to your WordPress database and look for the wp_posts table. Choose the option to browse this table. You now need to locate the entry that corresponds to the page you’ve just created. It should be the last entry in the table.

Now that you have located the page entry, it’s time to edit the database. Click the edit icon. There are two items that you need to change. The first is “post_name”. This should be changed to reflect the URL that you want to link to. If you want to link to a page that is in the root of your website, you need to use relative addressing. For example, in my case, I changed the “post_item” to “../index.php”.

The second item that needs to be changed is the “guid”. This should be changed to the full address that you’re linking to, including the “http://www”.

To apply the changes that you’ve just made, click the Go button. Exit out of phpMyAdmin and you’re ready to test your changes. Refresh your blog and test that the link takes you where you want to go.

Update: Changed the name of database entry from “post_item” to “post_name”.