WordPress Max | WordPress Guides For The Geek Impaired

Change WordPress Header Font Size And Color

Changing the font in the header of WordPress blog theme can be done if you know what files to edit. However the code to edit can (and will) vary in all themes. This WordPress guide will help you figure out what code your header is using to call for the blog name and description and how to edit it.

The first step is to make your WordPress theme’s files writable. To do that you must change the permissions in your hosting account. I suggest connecting to your hosting account with an FTP client, and browse to the theme and change the permissions on the whole theme’s folder and all the files within it to 777. Otherwise you may need to change one file at a time if doing so in the control panel of the hosting account. The path to the theme is the blogs directory then wp-content/themes/your-theme. You could just make the whole themes folder writable.

From within the WordPress dashboard, click Presentation or Design, then Theme Editor. Almost all theme editing is done in the stylesheet (style.css) file, and all other files are just displaying the settings that are specified within the stylesheet. There are exceptions to this but beyond the scope of this WordPress guide.

WAIT!!! Before doing any editing copy the contents of the file and paste it into a text file like Notepad for safe keeping before you attempt to edit it. If you screw things up you can paste the original back in to restore your file. Remember this is extremely important and I take no responsibility for what you may do to your WordPress blog!

On the right side of the Theme Editor are all the files associated with your active theme. Finding the correct code to edit to change the font of the header is in the header.php file. While you don’t need to edit this file the clues to what the header is calling for from the themes stylesheet can be found in the header.php file. Below is the code from the header file found in the default theme.

<div id=”header”>

<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div class=”description”><?php bloginfo(‘description’); ?></div>

The code between the <h1> tags is the clue we are looking for that calls up the name of the blog. The blog name in the header is styled by the <h1> tags, and the description is being called from the <div class=”description”>. Now that we know what is styling these two items we can edit the style.css file to change the way these two items are displayed. Remember that this case is specific to the WordPress default theme and you need to look at your specific themes header file to determine what code you need to work with. In most cases the <h1> tags call up the blog name but the description or Tagline can be called almost anything.

Now click the themes style.css file on the right side of the Theme Editor and look for the code from the header file. In this case it is

h1 {
font-size: 4em;
text-align: center;
}

#headerimg .description {
font-size: 1.2em;
text-align: center;
}

If you want to change the color additional styles can be added like this:

#headerimg .description {
font-size: 1.2em;
text-align: center;
color: #666666;

}

The h1 code and description can now be changed to a larger size or aligned differently, it can be aligned to the left, right or kept centered. The font color can also be changed by adding this code color: #666666; and changing the color code number to your liking. Make your changes and click Update File, then look at your blog to admire your work. You may need to refresh your browser to see any changes. There are numerous css styles that can be applied to the text in a stylesheet, far to many to place in this post. For css color codes check out CSS Color Chart or Google css color codes. For more styles that can be applied, a quick Google search for css font styles, can keep you busy experimenting for hours.
Thanks to Stephen from The Lazy Way To Buy And Sell Cars blog who asked for this guide and a million other questions on Ask Max

Similar Posts:

• Edit Modify Or Change WordPress Links
• Add Or Change WordPress Header Image
• Change Color Of Links In A WordPress Theme
• Specify WordPress Navigation Page Links
• WordPress 404 Redirect And 404 Custom Message

If you liked this post, feel free to leave a comment that is relevant to the post or subscribe to the feed and get future articles delivered to your feed reader.

Sorry but due to the spamming of a few all comments are moderated and will appear when approved and all drive-by comments will be deleted!

Powered by Wordpress | WP Premium theme by WP Remix
Copyright 2007. WordPress Max | WordPress Guides For The Geek Impaired. All rights reserved

• Home
• Sitemap
• Privacy