Editing Wordpress themes

TODO: add in Power Tips for WordPress Template Devs

To edit a theme, you will need the ability to connect to your server using an FTP client. For OS X, popular clients include Cyberduck (free and open source), Transmit ($17.95) and Fetch ($29; but available free to students); for PCs, a popular client is FileZilla (free and open source).

All the files in a WordPress theme are contained in the directory /public_html/wp-content/themes/THEMENAME/, where THEMENAME corresponds to the title of the theme you are working with. Before editing your theme, you should back up that folder to your local computer so that you can always recover any changes or fix anything that you break.

Even without FTP access, you can usually see, but not edit, the main CSS file here: http://SITEURL/wp-content/themes/THEMENAME/style.css.

This process is the same for editing the masthead. You would connect via FTP, go to themes, and look for the file that contains the section you want. If you wanted to edit the header image, you'd look for header.php. The code for the header image (in the Gazette theme) is:

<div id="header"><!-- START LOGO LEVEL WITH RSS FEED -->
		<h1><a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?>">
                <img src="<?php if ( get_option('woo_logo') <> "" ) {  echo get_option('woo_logo'); } else { ?><?php bloginfo('stylesheet_directory'); ?>/styles/<?php echo "$style_path"; ?>/logo.gif<?php } ?>" alt="" />
                </a></h1>

All of the things in <?php ?> tags are telling WordPress to call in information from the database. They look scary, but all it would do is replace get_option('home'); with the URL to the homepage of your site, etc.

That doesn't seem to specify a specific size for the header, so you'd want to look at your CSS file. You'd search first for the div, which you can find in a tag that looks like: <div id="header">. So I searched for #header (div ids are prefixed by "#" in the css file and ids are unique per document. Classes, which can be reused, are prefixed with a "." in the css file) and found:

/*- Header -*/
#header{ height: 100px; background-color: #ffffff; margin: 0 15px; padding: 0px; }
/*- Logo -*/
#header h1{ float: left; display:inline; line-height: 100px; font-size: 24px; }
#header h1 a{ display: block; height: 93px; width: 389px; color: #000000; font-size: 28px;

So, if you wanted to change the image size, you'd want to make sure to change the height setting in #header and #header h1 a by the same amount (so if your new logo is 50px taller, increase each by 50, to 150px and 147px respectively) and you could alter the width by changing "width" in #header h1 a.