Since starting this blog late last week I’ve been trying to get up to speed with WordPress as quickly as possible. Most of the basics were easy to get through but the site design part took me a little longer than I anticipated. To get exactly what I wanted (which I still haven’t achieved) I went through a bit of crash course in PHP so I could dismantle the theme template and figure out what does what and how to change it without completely breaking the site.

Like most people working in the computer field I’ve done a little bit of Web site design in my time. I certainly wouldn’t call myself a Web designer, but I’m not a complete novice either. Most of what I created in the past was basic HTML with layout control done with tables within tables. Now, of course, I’ve switched over to CSS; however, I’m still a bit “old school” when it comes to thinking about site design. For example, I often obsess on the banner image for a site and can’t go much further before that image gets created. Once created, however, I like the image to be a hyperlink back to the home page of the site. Unfortunately, most WordPress themes don’t work that way straight out of the box.

If you take a look at a WordPress (WP) theme, you find that the header for a page usually inserts the title and sub-title you entered on your options page within the WP admin interface. A link back to the home page of the site gets connected to the main title. Click on that title and everything works fine. Click anywhere else in that header area and no link appears. This short coming was the first thing I wanted to change.

I browsed through the WP theme directory and took a close look at several themes until I found one that was close to what I wanted. I settled on Abstrakt3c 3.0 by Kaushal Sheth. The layout was straight forward, looked like it was easy to customize, and used an image in the header close to what I wanted to do.

The header image gets set in the header.php file around line 65 along with a few other image settings:

#header { background: url(”/images/abstrakt-masthead.jpg”) no-repeat bottom center; }

I looked in the image directory of the theme and found the image mentioned above. I viewed it in an image viewer and sure enough this was the image that I wanted to change. Rather than change the file name listed in the header.php file, I decided to rename my image in the event this image was used in one of the other php files in this theme.

Further down in the header.php file I also noticed where the box size gets set for this image. Down near line 72 I found this statement:

#header { margin: 0 !important; margin: 0 0 0 1px; padding: 0; height: 180px; width: 800px; }

Since my image was larger than the original image I had to increase the height for #header from 180px to 257px. I saved the changes to header.php and viewed the change. Yes! Just what I wanted. Well, not exactly what I wanted but at least I was on the right track.

I scrolled down further through the header.php file and found around line 102 the php code that inserts the title and sub-title enclosed in the headerimg div. I played around with this section for a bit and finally decided the best solution was to remove everything from the headerimg div tab to the closing div tag of that section. Once this code was removed, my title and sub-title disappeared from my banner image. Now, the final step: make the banner image a complete hyperlink back to the main page of my site.

First thing I decided to do was head back to line 65 and comment-out the #header background setting but I left the #header settings found on line 72. Next, I scrolled down to where I previously removed the title and sub-title PHP code and inserted a simple href that surrounded an img src tag that referenced my banner image (this href was within the header div tag). Finally, I saved my changes and checked out the final result. Perfect!

Not exactly the most difficult task for a seasoned WP user or someone well versed in PHP; however, I’m neither of those at the moment so adjusting the header.php file to produce a header just they way I wanted was a significant achievement.

Share, Bookmark, or Email this post

If you liked this post, subscribe to TechTraction's RSS feed or TechTraction's email feed

Filed under: How-To & Tech Tips