Michael Janzen

I got an email from a fellow named Matt who is using Basic Simplicity, my WordPress Theme. He asked how he could use his own custom image in the header. The only caveat is that any edits made to any theme will need to be duplicated when you upload an update to the theme; so be sure to keep some notes for yourself when making changes to files. Actually that’s why I built the admin control screen for Basic Simplicity… I wanted to store the most commonly customized items in the database instead of the php files. This will make future theme updates more seemless. Here’s his question and my response.

Hi Michael

Great theme.
I would like to change the header to my own custom design. How do i do this and can it be done so the image/header is a link to my site url?

I’m no coder so i hope you will go easy on me. I did look around however can’t find the answer before emailing you?

Thanks for all your help.

Matt

The admin control panel lets you swap images. Normally you’d just upload a new image to the images folder via FTP and then enter that file name into the field on the admin screen. File names should not have spaces or special characters ideally. Best to name them things like my-custom-header.jpg. The trouble is… this will make it a background image which is not click-able.

Here’s one way to make a click-able header you’ll need to edit the header.php file (appearance > editor).

Find this <div id=”header”> (you’ll see some code here) </div>

Replace the code between the <div id=”header”> and </div> with your image. Here’s some html that should work:

<a href=”<?php echo get_settings(‘home’); ?>”><img src=”<?php echo bloginfo(‘template_url’); ?>/images/my-custom-header.jpg” width=”980″ height=”120″ border=”0″ alt=”<?php bloginfo(‘name’); ?>” /></a>

Then go to the admin control panel for basic simplicity and enter the following in the custom css field at the bottom:

#header { padding: 0; }

The width of the image should be 980 pixels, the height can be whatever you want.