A brief Introduction to Child Themes

People often ask what happens to customizations after a theme update. Well the short answer is: They will get lost.

Why is that? When you update a theme there is normally no build in update routine like you have it for WordPress core updates. That means when a new version of a theme comes out you need to replace the old files with the new ones and that overwrites your custom changes. By the way this also would happen in case of a WordPress update if you would have changed WordPress core files. That is the reason why you should never make any changes to WordPress core files. But how can you customize a theme and stay safe in case of an update? The solution is: A child theme.

What is a Child Theme?

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme (Source: WordPress Codex). It contains at least a screenshot, a style.css and a functions.php file. But it can also have an image folder and/or any other theme template file you want to customize.

Screenshot

All WordPress themes have a screenshoot image included – typically this is called “screenshot.png” and is a visual display of the theme, which can be seen on the Appearance > Themes page inside your WordPress admin dashboard. Since child themes have their own folders and are activated like any other theme, they require a screenshot like a standard theme.

Theme Files – Templates

The parent theme, is where all of the theme files (templates files) are kept. This would include the typical theme files such as footer.php, header.php, index.php, page.php, single.php and so on. Child themes can also include these files – and the hierarchy works in a way that if any of those files exist in the child theme folder, they will override the parent theme. In other words, if you customize a footer.php file and place it into your child theme folder, that will be used instead of the footer.php in the parent theme.

Theme files are also called templates or template files. A template in this case is not a complete theme. A theme is a “collection” of various templates (or template files).

Stylesheet – CSS File

The style.css (stylesheet) of the child theme imports the parent theme stylesheet. As long as you don´t change anything in the child theme the styles of the parent theme are used. Any style from the parent theme you add to the child theme stylesheet will be used instead of the parent themes style. So if you change e.g. the color of a h1 heading in the child themes style.css this will be used instead of the original color used in the style.css of the parent theme. And because the stylesheet controls 100% of the design you can use it to modify any area of the theme.

Functions File

Most WordPress themes have a functions.php file – which is typically a file where you can control certain behaviors of how WordPress is run or how the theme outputs various things. For instance, a functions file can register sidebar widgets and how they are styled, as well as a number of other “function” related things. Again you can use the child thtmes functions.php to overwrite the parent themes functions.

Images Folder

This one is  self-explanatory – as with (almost) any WordPress theme, there is an images folder which is used to hold images that a theme requires. Use this to hold background images, icons, navbar gradients, etc. If you don´t need other images than the parent theme already uses, you don´t need an image folder in your child theme.

Conclusion

Child themes a the perfect way to make “heavy” customizations to your theme without beeing afraid of future updates. If you update a theme the child theme files will remain untouched and your individual changes will not get lost.

Further Readings

• Child Themes at the WordPress Codex

All of my themes come with a very nice image effect called “prettyPhoto“. It´s a lightbox clone that opens image links automatically in an overlay or modal window. You don´t need to do anything but link the inserted image in a post or page to its own file. pretty Photo detects image links automatically.

Although this is already a great feature on its own you can use this build-in functionality even more effective. NextGen Gallery is one of the best and most famous image gallery plugins for WordPress. One great thing about NextGen Gallery is the possibility to use various Javascript effects for displaying images. Thickbox – which is included in WordPress by default – is just one of them. Many others are already prepared but you can also use your own.

And this is where prettyPhoto comes into play. If you have NextGen Gallery installed and activated you go to the options page of the plugin. There you should see a tab called “Effects”. On this tab you can select from various Javascript effects. Select “own” as Javascript thumbnail effect and add the following line into the textbox:

Save the settings and navigate to your Gallery page. If you click on a thumbnail it will open in a nice prettyPhoto window.

Screenshot taken from Matthias Priebe

Widgets or default Items – You decide

Many people prefer to use widgets instead of sticking with the default stuff or put some code inside the sidebar.php file manually. That´s fine since widgets are very handy and usefull and make it easy to move and change things in the sidebar. But you need to be aware of the fact that you can basically just EITHER use widgets OR the default stuff. If you use widgets (even if you just use one single widget) the default items are not being displayed anymore with the exception of some things in BranfordMagazine. BranfordMagazine sidebar is build to have the widgetized area between some hardcoded stuff that will last even if you use widgets. That´s the list of news on the homepage aswell as the RSS and “who writes” links.

Wanna have it all? It´s possible

For most people that´s just fine but what if you want to have both? Of course there is a way to use widgets AND some of the default stuff. Imagine a text widget. You can use a text widget not only to display text but also to key in html or php code. This requires a plugin like exec php to be installed in order to be able to execute code. Once the plugin is installed you can put code in textwidgets and it will act as if it is written into the file. The new custom widgets that where introduced in BranfordMagazine version 5 and WyntonMagazine version 2 are also a great opportunity of adding dynamic content. They provide some of the hardcoded functionality of the sidebar in a flexible widget (such as the “more from this category” list).

An example for hardcoded Stuff in a Textwidget

Let´s say you want to have the latest news block from the homepage of BranfordMagazine but for everything else you want to use widgets. Well put your widgets into the sidebar and put a textwidget on top. Now check out sidebar.php and copy this piece of code into your textwidget:

You need to change some small things now. You see the variables that are been used by the options page (backend) which do not work in this case (maybe I will find out why and change that).

‘.get_cat_id(get_option(‘prinz_lead’)).’
‘.get_option(‘prinz_sidenewsnumber’)

For the first you put the ID (a number) of the category (your newscategory) and for the second you put a number to tell the site how many newsheadlines to display.

That´s how it might look like then:

In this case “1″ is the category ID and “5″ the number of posts (headlines) to display.

That´s it. Now you can use this little workaround for any item from the default sidebar that you like to use together with widgets.

Getting completly rid of the default Stuff

As I mentioned earlier there is some default stuff that will remain even if you use widgets. It´s the “News” list on top of the sidebar and the “Stay informed” list as well. If you want to also remove those parts from the sidebar you need to open sidebar.php and remove the following lines.

The “News” Section

The “Stay informed” Section

Preperation on the Options Page

Everything can be setup in the themes optionspanel or optionspage in the WordPress admin area. You find the optionspage unter Appearance > BranfordMagazine Options (as an example for BranfordMagazine). Here is a Screenshot.

Now select the category from the dropdown list for each of the three columns. Also set the number of posts. Do not set a “0″ for “number of posts per category” because this will make the template cause errors or at least unexpected bahaviour.

Assigning the Template to a Page

In order to use the template you need to assign it to a page. Just open the “new page” panel and type in a title for your page. You don´t need to enter content because this will be pulled from the three categories you have defined on the options page before. Then assign the “3-Column-Page” template from the “Attributes” metabox (normaly right to the editor window).

The result should look more or less like this.

Tutorial updated on Fabruary 1st 2011

When it comes to customization the background color or -image of a page can really make a huge difference. With PRiNZ Pro themes it´s so easy to define a custom background color or set an individual background image. Let me show you how that works.

Simply go to Appearance > Background in your WordPress backend. This feature was introduced in WordPress 3.0 and is only visible if the activated theme supports it. All PRiNZ themes do support this and many other new WordPress 3 features such as custom header or custom menus.

Background Image or -Color…or both

If you want to use an image as background select one from your harddrive and upload it. You can make additional settings:

• Postition: Select whether you like it left, centered or right aligned
• Repeat: Choose vertical-, horizontal- or tile
• Attachment: Define if the image should be fixed or scrollable

If you have an image that produces a background pattern for the whole background you might not need to set a background color. If you have an image e.g that you stick to the top left of the background then you might need an additional background color.

Type the hex-code (e.g #000000 for black or #ffffff for white) into the field. Save everything and look at your page. The changes will be available immediately.

If you don´t want an image but a color for the background just type in the color code and hit save changes without uploading an image. That´s all. Now you can play around with images and colors to find the page background of your choice.

Thanks to WordPress 3.0 changing the default header or logo of PRiNZ Pro themes is easy as 1, 2, 3. On the themes options page you can decide if you want to use the sitename (blogname) and description or a logo in the header of your WordPress site. By default a logo is used. If you go for a logo you surely want to use your own custom logo in the header. This tutorial shows you how to do that.

Go to Appearance > Header in your WordPress admin interface. You will ses a page that shows the current (default) header image, some information about that image (width, height), an upload box for a custom header image, a remove button to remove an image that was uploaded and a button to restore the original header image.

Now move to the upload field an click “browse” to browse your harddrive for an image that you like to use. Make sure it has the right dimensions (625×100 or 940×120 depending on the version). If it doesn´t have the right dimensions WordPress gives you the chance to crop it before uploading it.

Once you found the right image click upload. You´re done! That´s all you have to do. Your new custom header will now appear on your website.

Changing the allowed Image Dimensions

In case you want to change the dimensions of the header image from default to something different, you just need to open /tools/wp3-stuff.php (an include file of functions.php) and change the two figures to the values you like.

BUT ATTENTION: Make sure the new dimensions do not destroy your layout.

Some little Code Tweaks

Currently there is no setting in the optionspage to switch between logo and text-header. This might be integrated in future updates. So meanwhile we need to edit some lines of code. Don´t worry. It´s no rocket science. I suggest to start with deleting the logo image (make it invisible).

Make the Logo Image invisible

Open the file style.css which is the main CSS file. and look up line 248 (in BranfordMagazine). Either delete or set in comments to make it invisible (put /* before and */ after the line)

Make the Blog title and Tag Line visible

First you have to set a title and tagline in the WordPress admin under Settings > General. Then you open the file header.php and lookup line 82 and 85 (in BranfordMagazine).

Remove the double slashes (//) in front of bloginfo('name'); and bloginfo('description'); to uncomment the php code and make it visible. It should look like this:

Of course you need to save the changed files and upload it to your server again. That´s all. Now your site displays the title of the blog and the tagline instead of an image in the header. The line numbers might be different if you use Wyntonmagazine or any other theme in the future but the code is pretty much the same.

Styling the Header

If you like to style the header text just open style.css again and change the folowing lines for the blog title:

And for the description / tagline:

Further reading

• Changing the Logo

Using Widgets

Using widgets is pretty easy and most WordPress users will know it. If you are brandnew to wordpress I reccomend to read a short introduction to widgets at the WordPress codex – the official documentation for WordPress.

Custom Widgets

As already mentioned above the custom widgets of e.g. BranfordMagazine add some extra functionality such as the Newsletter Widget and/or support specific functionalities such as the “More from this Category” Widget. Here is a more in depth description of the custom widgets.

PRiNZ Newsletter

The newsletter widget uses the email functionality of feedburner and lets your users subsribe very easy by providing a simple signup form. In the backend you can add a headline such as “Newsletter”, you need to enter your Feedburner ID and you can set a text that appears in the signup box.

PRiNZ About

This widget provides a sidebar box that displays information about the author or admin of the site. You can define if it should display an image (requires Gravatars), you can enter a little description, set a link to a page (e.g About us page) and define the name if the link.

PRiNZ More from this Category

There is nothing to set for this widget but nevertheless it adds great functionality to your site because it displays the 5 most recent posts from the same category of the post users are currently reading. This works only on single post pages of course.

PRiNZ Author Posts

Again there is nothing to set for this widget. similar to the “More from this Category” widget it displays the 5 most recent posts from the author of the article that a user is currently reading. This one also works on single post pages only.

PRiNZ Twitter

Twitter becomes more and more famous and also an important communication tool. The twitter widget lets you display your last x tweets in the sidebar. You can set the title need to enter your twittername, a number of tweets to show and you can add a link to your twitterpage if you like to.

PRiNZ Recent Posts

Why another recent posts widget you might ask. WordPress provides one by default. That´s true but it doesn´t deliver the style that fits for my themes. So the recent post widget does nothing else than the regular recent post widget but it adds the correct style that matches the themes style.

PRiNZ Comments

Just like the recent posts widget the comments widget lets you display a list of recent comments but again in the themes specific style.

PRiNZ Contact Info

The contact info widget provides a nice way to display some contact information in the sidebar. You can enter a title, your name, adress telephone and spam protected email adress.

Finally…

…it´s up to you which widgets you use and how you arrange them in the sidebar or somewhere else. As you know my themes have several widgetized areas and you can use the custom widgets in each of them of course.

Which additional widgets would you like me to add in furture updates and themes? Post a comment!

Find out more about Firebug at its offcial Website.

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 Function

Open your tools/various-functions.php file inside the branfordmagazine-pro themefolder and edit this (or similar) codesnippet:

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.