I often get support questions like “I want to change the color of element “X” from default black to red” (or similar). If you have a look into the CSS files you normally should find out pretty fast which areas you need to edit to change colors, fonts and even sizes of specific elements. But sometimes it´s not so obvious and searching for the right CSS selector can be a pain. The famous Firefox addon “Firebug” makes it easy as 1,2 3 to find the right CSS.

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. I use it especially to edit CSS because you just need to klick on an element and Firebug shows all relevant CSS classes, IDs and selectors for it. You can simulate changes right in firebug and the changes take immediate effect (but you can´t save them). It also tells you in which CSS file you need to look and even what line. For a theme like BranfordMagazine that comes with several CSS files it is a pretty good timesaver.

Find out more about Firebug at its offcial Website.

Recently I have written about individual excerpt lenghts in BranfordMagazine. Today I will show you how to customize the excert “more” textstring and make it a real clickable link for a better user experience. If you use BranfordMagazine version 4.2 that functionality is already included by default.

Better user experience with clickable excerpt “more”

By default the excerpt of WordPress displays an un-clickable [...] at the end of the default 55 words. Well of course this makes the user somehow aware of the fact that there is more to read but he cannot click on the [...] string which causes irritations with less experienced users. Wouldn´t it be great if WordPress would add a real link at the end of an excerpt? Sure it would and here is how to do it.

The functions.php

Open your functions.php file inside the branfordmagazine-4 themefolder and paste this codesnippet into the file. As mentioned if you have version 4.2 or higher of BranfordMagazine you don´t need to do anything because this is already part of the theme:

In this example a link [continue reading...] will appear at the end of the excerpt after a linebreak. It is also prepared for localization. If you want something different just change the “[continue reading...]” string to e.g. “read on” or whatever you like. If you want the link to appear right behind the last word of the excerpt remove the < br / > tag.

Here is an example of three (clickable) dots right after the last word:

A little styling

As you can see there is a CSS class called .excerpt_more. You can now style this class to meet your requirements. it can be found in the style.css file.

Works everywhere

This little trick is not just for BranfordMagazine. You can use it with any theme as long as you run WordPress 2.9 or higher.

Custom Excerpts with “more” Links

The functions.php file now has not only an area to define custom excerpt lenghts but also an area where you can define the appearance of the default WordPress excerpt “more” string [...] as well as it is now really clickable (which it is not by WordPress default). A tutorial will follow soon.

100% W3C valid

One of the features that was missing in all previous versions is that BranfordMagazine now is 100% W3C valid. All errors have been erased. You will not really see this modification because the theme used to work without issues anyway but it is another improvement in terms of clean coding.

Here´s a list of the new stuff:

• Optionspanel with additional settings for Google AdSense and google Analytics
• Default settings of the options panel that work for most default WP installations
• Custom excerpts with clickable “more” links
• 100% W3C valid

If you want to update

If you want to update from version 4.1 to the new version 4.2 you need to replace the following files:

• functions.php
• index.php
• header.php
• sidebar.php
• /incudes/ui.tabs.php
• style.css

The Future

There´s more to come in future releases. I´m also planning to release a “Pro” version of BranfordMagazine with a whole bunch of new features and an optimised design. So stay tuned for updates.

Setting up the additional page template for the three-column-page in WyntonMagazine version 1.x is a bit different to the way it´s done for BranfordMagazine as of version 4.x. The main difference is, Wynton does not have an options panel yet and you need to do some minor code changes. This tutorial shows you how it works. Don´t worry. It´s easy as 1,2,3.

Start with the Categories

First thing you need to setup is the three categories for the three different columns. So open your 3-column template file (tpl_3-column-page.php) and look for three positions that say something like:

“9″ in this case is the ID of the category you want to show here. Now you need to enter the IDs that match your database. If you don´t know hoe to find the IDs, read this tutorial. Again: there are of course three positions that you need to edit because you have three columns.

A list of headlines from this category

A similar thing needs to be done for the three (or more) headlines below the article teaser in each column. You need to look for this piece of code:

In this case “3″ is the number of headlines to grap and “9″ is the ID of the category again. There are of course also three positions to edit .

That´s it for the code-part. The next part is about writing text and adding images.

Writing text and adding images

Asigning the template

Before you can use the template you need to write a page, assign the template to the page and simply save it. You don´t need to enter any text except the title because this will be grabed from the posts of the three categories you have defined before in the code.

Writing posts and uploading images

Now open your write post panel in your WordPress admin area and write some text. Asign the post to one of the categories you show on the 3-column-page template. Now upload an image and make sure it has the correct size. 260×150 is used in the Demo for example. Copy the URL of the image from the uploader.

Adding images with custom fields

Go to the “custom fields” section of your write post panel and either enter a new custom field or select one from the dropdownbox if you already have used custom fields on the site. Enter “3-column-image” as the name of the custom field and the URL of the image as its value. You need only the last part of the URL after …/wp-content/uploads/ (if that´s your upload directory). For example “2008/02/wynton1.jpg” instead of the full URL “http://domain.com/wp-content/uploads/2008/02/wynton1.jpg” as you can see in the screenshot. Click on “Add custom field” and save the post.

That´s it. Now the image is grabed from the custom field and will be displayed on the 3-column-page together with an excerpt of the text from this article. Here you can see how it should look like.

BranfodMagazine uses the great open source TimThumb image resizer script, by famous WordPress developer Darren Hoyt, to automaticly crop and scale images to fit into their position on the homepage, the archives (e.g the category archive) and the additional 3-column page template. Normally it runs without any issue but sometimes images are not properly displayed. This tutorial explains the basic requirements for the script to run.

Checking the basic requirements

Personally I never had any issue with the image resizing with TimThumb. But I oftern hear from people or see it in the support forums posts, that images are not displayed as expected. To be honest: In most cases it´s a users mistake and not a script error. But sometimes it´s also related to the webhoster.

Here is a short list taken from Darren Hoyts Website and ammended with some own statements.

• TimThumb requires the GD library, which should be available on any host sever with PHP 4.3+ installed.
• Once installed and in-use, TimThumb will automatically create a /cache/ subfolder with proper write-permissions (if it doesn´t already exist). If your host server doesn’t allow this by default, be sure to manually change the /cache/ folder permissions to 777.
• If your web-hoster doesn´t allow 777 permissions or if 777 doesn´t work, try 755 which sometimes solves the issue.
• In addition, make sure the folder which contains TimThumb is set to 777 (the /scripts subfolder by default).
• Use absolute paths for your images (incl. http://…)
• You can´t use external images (for security reasons)
• Make sure the images are uploaded into each post using the post image uploader or attached to the post by using the “attach” functionality in the media library (as of Wordpress 2.9). See also this article for more information.

Still problems with the images?

If you have followed all this “rules” and the images still don´t show up, double-check your settings and look if there is still anything not set correctly (I´m not kidding…). If they still not show up I reccomend to get in touch with your webhoster because i assume it´s on their side. Maybe some security settings avoid proper working of the script.

You can also visit Darren Hoyts TimThumb support forum for further assistance.

BranfordMagazine comes with a nice tabed interface on the homepage. By default (see my demosite) it has three pre-defined tabs but of course you can add or remove tabs to meet your specific requirements.

Changing the names of the tabs

By default the names of the tabs are:

• “Leadarticle” which holds the most recent article from a specific category (e.g. “news”)
• “Recent Posts” which lists the 7 most recent posts from any category
• “About” which shows just a few lines of regular text that explains a bit about the theme

In order to change the tabed section you need to open the file ui.tabs.php located in the /includes subfolder in the themes-directory. First I show you where and how to change the names of the tabs. Look up this piece of code on top of the file:

If you want to delete e.g. the “About this Theme” tab just delete the whole line:

If you want to add another tab, add a line following this scheme (“X” needs to be a number):

That´s it for the names of the tabs. Let´s now change the content of the tabs.

Changing the content of the tabs

I´ll use the “Recent Posts” tab as an example. Again look into ui.tabs.php:

As you can see this area is wrapped by a DIV element with the ID=”fragment-2″ corresponding to the ID of the link that defines the tab-name. This must match. Otherwise it can´t work.

This is just regular HTML-formated text you can put here almost everything you like. Just make sure it uses HTML-markup. If you like to put an image here you must use the whole HTML image-reference code. If you don´t know about HTML please learn at least some basics. Have a look at this documentation or use Google to find out more.

The next piece of code is the WordPress template tag that shows the 7 most recent articles.

You can now add or delete tabs and their content. Always make sure you do both. Just deleteing the “About this Theme” tab-name will not remove the content of that tab. If you add another tab (name) like “Info” and don´t enter any corresponding content you will not see anything.

I hope it´s clear so far. It´s no rocket-science but you need to work inside the code a little bit. That requires at least basic HTML, CSS and maybe PHP knowlege. Always backup your files before you make any changes!

WyntonMagazine, my prominent Wordpress magazine style theme, unfortunately does not have an optionspanel in the backend in the current version 1.1. That´s why you need to adopt some things right in the code. But don´t worry: It´s no rocketscience and this tutorial shows you how.

Using custom fields

Since WyntonMagazine uses custom fields to display images on the homepage, you should know what custom images are and how they work. Read all about custom fields here at the WordPress codex.

Getting started with the lead article

Open the index.php file in your favorite editor and look up this code snipped:

The code “showposts=1&cat=1″ means it displays 1 article from the category with ID 1. You need to change this ID to whatever category you like to show here. If you don´t know how to detect the category IDs read this article.

Also use the same ID where it says “include=1″ because this is the category headline.

The image of the leadarticle

Now lookup this code:

Here “Leadimage” is the name of the first custom field. You add this custom field in your write post panel of the WordPress admin area. Below the texteditor you will find a box called “custom fields”. You need to add a custom field if you use this function for the first time. Enter “Leadimage” (big “L”) into the “name” of the custom field and put the URL of an image into the “value” field as you can see on top of the screenshot. As you can see you only have to put a part of the image URL. It´s the part after the uploads folder where the images are stored.

If you have used the custom field once (in any article) you can use the dropdown menue like it´s also shown on the screenshot. In the screenshot you can also see the list of all custom fields that you can use in WyntonMagazine.

The featured articles on the right side

Another three articles are teasered on the top-right of the homepage. If you display the second, third and fourth article of the same category as the one in the leadarticle you need to be aware that the teasers can only be displayed if there are articles. For example if you set everything up and have only one article in this category you cannot expect the featured articles to display something because there is nothing to display. You will see it if you have another article written in this category.

Look up this code in index.php:

“showposts=3&cat=1&offset=1″ means that 3 articles from the category ID 1 are displayed. The offset is 1 which means the second latest article is the first to show. The latest article is already the leadarticle.

The images of the featured articles

Again a custom field needs to be set in the article in order to make an image appear here.

The name of this custom field is “featured-article-image” and you can set it up just like described before.

The lower area of the homepage

In the lower ara below the advertising space you find the latest articles from 6 different categories. You need to setup the IDs again by changing the three areas as follows:

“array(3,4,)” means the IDs 3 and 4 for the first column called “homeleftcol”. Also look for “homemidcol” and “homerightcol” and change the IDs acordingly.

The custom field for the image in this section is always “home-category-image”.

Imagesizes

As WyntonMagazine currently does not use TimThumb script to crop and rezize the images automatically you have to use the images in the correct sizes. You don´t need to use the exact sizes that I use in the demosite but I do reccomend to use them since they fit very good. The used sizes are:

• 350×250 pixels for the leadimage
• 258×80 pixels for the featured images
• 100×100 pixels for the thumbnails in the lower area

As you need the correct image size for the specific area where the post will be displayed, you will need more than one image for many articles. For a newsarticle that will be displayed as the leadarticle as long as it is the most recent newsarticle you will need two images and their custom fields. One will be the “Leadimage” and the other one will be the “featured-article-image”. Why? Well, because the leadarticle will become a featured article once it is not the latest from this category anymore.

I know this is not the best way of doing that and a next version of WyntonMagazine will use TimThumb script to crop and resize images automatically and will also get an optionspage for easier setup. But due to a lack of time there are no clear plans when this is going to happen.

In another article I already wrote about using individual excerpt lengths in BranfordMagazine. This brief tutorial shows you how to use individual excerpts for every post in order to get more control over your content. I use this in the leadarticle of my BranfordMagazine demosite.

When you write a post you will find an “excerpt” panel (German: “Auszug”) normally right below the text editor panel. You just have to type in whatever text you like and the_excerpt() template tag will use it for the excerpt automatically. The advantage here is that you can control the legth of the text and also use html formating such as bold text.

That´s it. Pretty easy. Isn´t it.

BranfordMagazine uses the excerpt template tag for auto-shortening texts on the homepage and in other areas. This is nothing spectacular since many themes do it like that. But BranfordMagazine (as of version 4.1) uses the power of WordPress 2.9x to provide a function for individual excerpt lengths. Be aware that this doesn´t work with WP versions prior to 2.9. By default this is used for shorter excerpts in the featured articles section.

How to use individual excerpt lengths

Open your functions.php file in the theme directory and look up line 38. You will see this function:

I think it´s more or less self explaining. By default (and based on my demo site) it means that the excerpt of category 4 (featured articles) is limited to 25 words. The excerpt of any other category is limited to 55 words which is the WordPress default. Now you can easily change the lenght of your excerpts just by changing the numbers 25 and/or 55 to whatever you like.

Extending the function

You can also extend this function to archieve other categories to display different excerpt lengths. Try something like this:

It´s up to you now. Play around with it.

The update fixes the display of the “continue reading” link in the leadarticle and the length of the excerpt can now be modified in the functions.php file. I will write a tutorial for that as soon as possible.

If you like to update you just need to replace the following files with the new ones:

• /includes/ui.tabs.php
• index.php
• functions.php
• style.css (not really needed, just for the correct versionnumber)

Download now