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.

I got an email from Jason about how to edit the header height in my WordPress theme, Basic Simplicity.  I tired to reply but Jason’s email address was wrong so I thought I’d answer he question here since it could help other people control the look and feel of Basic Simplicity.

Here’s his question:

My question:  I’m trying to use my own header file but want the picture to be bigger.  I’ve rifled through the edit pages to see if I can change this but can’t find it.

Example:  Your comment says optimal size is 1000 x 140 and I want it to be 1000 x 300.  When I plug in my header picture it cuts off and remains 140.

Can you give me any tips?

The header height is actually not defined anywhere. The 140px I suggest on the admin screen is just a rough height for an image that would most likely fill the background of the header. The height is auto defined by the text that’s there. The image is a background image and is auto-positioned left and middle vertically.

To control the header height you could add this bit of custom code to your Custom CSS field on the admin form. Adjust the height with the pixel amount. The example is 80px.

#header{
min-height:80px;
height:auto !important;
height:80px;
}

Jason… I hope this helps!

The other day I submitted Basic Simplicity, my new WordPress theme, to the WordPress Free Themes Directory and it got approved today. You can see it in action on all my blogs.

It features a control panel that lets you edit colors on the fly, change the banner background image, add your Google Analytics code, and a bunch of other things. If you like it please give me a good rating

See Basic Simplicity at the Free Themes Directory

Here are a few of my blogs that use Basic Simplicity; you can see what a cameleon it can be.

• Tiny House Design (albeit somewhat modified)
• Do It Yourself Freedom
• Tiny Free House

I submitted my minimalist WordPress theme to the Free Theme Directory the other day and got a note back from them with a few suggestions. It didn’t take long to implement their recommended improvements and now Basic Simplicity 1.3 is available.

[download id="1"]

Continue Reading »

Recently I simplified the look & feel of my busiest blog by installing my new WordPress theme, Basic Simplicity. In the past when I’ve changed themes on Tiny House Design but I’ve never noticed so much noticeable effect in user behavior. The only real difference I’m aware of is that I’ve never used such an uncluttered design before.

Ad revenue has dropped and readership, stickiness, and total page views have increased. It’s too early to be able to provide any meaningful statistics but it seems that by focusing on content and allowing it to take center stage the ads are just getting overlooked.

Normally my knee-jerk reaction would be to move some ads back into the content itself except I like the increasing readership numbers too much so I’ll hold back and watch the trends for a while.

My suspicion is that a clean theme is better for increasing readership and cluttered designs are better for ad revenue. So if you are making a living from blogging be careful about switching to an uncluttered design, but if you’re still in traffic growing mode consider a simple theme.

In a month or two I’ll post some charts after I have some real data to prove of disprove my theory. In the mean time I’ll continue to watch and learn.

Over the last few nights I whipped up a simple administration screen for my free WordPress Theme. Now you can make very quick style changes right in the WordPress user interface; there’s no need to edit the stylesheet. You can also add your Google Analytics code, Google site verification code, and custom CSS.

• Go Get Basic Simplicity

These will be the last few edits for a while; I think I have it working well enough to start using basic simplicity on all my blogs. I have a few more features I’d like to add but I’ll hold off and give this version a careful test drive. If you give it a try too and run across any bugs please let me know. If you have any suggestions for future versions I’m all ears as well.

I just uploaded the next version of basic simplicity, the WordPress theme I created. The biggest changes are the addition of four more widget areas (for a total of 10) to make it easy to add advertising to the top right and bottom of posts and pages.

I also added a mini-stylesheet to the bottom of the main stylesheet. This is bound to cause a little confusion so in the next iteration I’ll create a theme admin screen to allow quick color and style edits right in the WordPress interface.

• Visit My Theme Page