Changing the Theme

5 Responses to “Changing the Theme”

1. 

   Charles Kelly June 23, 2011 at 9:34 pm #

   How can I change the wording in the header? I’d like to make it three lines. A centered main title (3 words), with an upper flush left, smaller interductory statement (4 words), and a lower, smaller flush right statement (4 words).
2. 

   Shawn June 24, 2011 at 9:15 am #

   Hi Charles,
   In order to make these changes (and assuming you’re using the default theme, Twenty Ten), you’ll have to edit the theme files themselves. You can edit theme files using the built-in editor in Appearance > Editor. The title and subtitle are located in the file named, “header.php.”

   Open that file in the editor, and then look for this PHP instruction on line 73:

   <?php bloginfo( 'name' ); ?>

   This line of code tells WordPress to insert the blog name, which you set in Settings > General. I would recommend leaving this alone, and changing your site name (title) in Settings > General instead.

   To align it in the center of the page, you’ll need to edit the theme file named, “style.css.” Lines 511-514 control the position of the site title.

   Replace, “margin-right: 270px;” with, “margin-right: 0;” and then add a new line, immediately underneath this line, with this instruction: “text-align: center;”

   Now your title will be in the center of the header.

   The subtitle is automatically generated by WordPress, using the Tagline you specified in Settings > General. This tagline is inserted into the header by this PHP instruction on line 66 of the file, “header.php”.

   <?php bloginfo( 'description' ); ?>

   You can simply replace this line of code with your preferred text, if you like. But it might be better to simply change your site’s description in Settings > General. This line already appears on the left-hand side of the page.

   To add your third line, you’ll need to create a new H2 line, similar to the one you just moved. The easiest way to do this is to copy and paste the H2 containing the site description, and then give this new H2 its own, unique ID. Here’s an example:

   <h2 id="my-tagline">Your 4-word statement here.</h2>

   Save your changes, and then return to the theme editor, opening the file named, “style.css.” Lines 528-533 control the style for the site description.

   Add a new line with this instruction: “float: left;”

   Then, add this new set of instructions just below line 533:

   #my-tagline {
float: right;
clear: none;
}

   You may have to experiment with the positioning, especially since this will place your right-aligned tagline directly underneath the search form. But this should at least get you started.

   It sounds harder than it is, but this is actually a fairly simple modification. So, welcome to WordPress theme editing!

   All the best,
   Shawn
3. 

   Bill Harrington September 22, 2011 at 9:37 am #

   I’m new to blogging and I’d to choose a simple, clean and flexible theme to help me get started. Twenty Ten and Twenty Eleven both seem to be good choices. However, I’d also like to change the image in the header from time to time with some other photos. Can you tell me how to edit the code in either theme in order to modify the size of the image so that it will accommodate more normal size images in a landscape orientation rather than the extreme landscape mode (which is something like 900 px x 200 px in Twenty Ten)? Thanks.
4. 

   Shawn September 22, 2011 at 9:59 am #

   Hi Bill,

   To change the default size of the header image, you’ll need to edit the functions.php file in the theme. Go to Appearance → Editor and then select the file named, “functions.php” from the list of theme files on the right-hand side.

   Scroll down until you see these two lines (lines 122 and 123):

   define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 288 ) );

   You can manually change the dimensions (1000 and 288), and then re-save this file.

   BUT, if you ever upgrade this theme, you’ll lose your changes. So, it’s typically a better idea to create and use a “child theme” to make changes like this. And here is a tutorial that outlines exactly how to do that:

   http://www.blog.web6.org/twenty-eleven-header-image-how-to-change-size/

   Hope this helps!
   Shawn
5. 

   Yolanda Loafer October 27, 2011 at 10:40 am #

   You are a RockStar..thanks for your information!

Leave a Reply