How to Add a Logo to WordPress Header

How to Add a Logo to WordPress Header


WordPress is the world’s most popular and leading template blogging platform. You can also customize WordPress software and make certain changes to the code by yourself. You can even visit the WordPress website, sign up for a free account and host your own blog. By 2011, well 32 million people had created blogs on WordPress. Among many other things, one big advantage of using WordPress for your website or blog is that it comes with a wide range of customizable themes. After selecting a theme, you can then make numerous changes to its appearance.

Every theme has different options, and it will be a good idea to learn of ways on how to navigate through your blog before changing headers, icons and other elements. In this article we will discuss how to add a logo to a WordPress header as well as how to change it.

A WordPress theme defines the feel and look of a blog. The web is bustling with a variety of free and premium WordPress themes, and these include many that make it easy to change or add a logo to match with your business. When searching for a customizable theme, look for one with an options page because that’s one that will make it easy for you to upload your new logo onto the header. If you need to edit a theme that doesn’t have this feature, check style sheets to swap in your logo or add a logo onto the header.php.

Many WordPress bloggers and website owners prefer adding their own logos without using complex code or hiring developers to do it for them. Let’s look at how to add a header logo to your Simplicity WordPress theme.

1. Understand the Dimensions

The header of a Simplicity theme is the wide, blue area located at the top where you get to see the blog name and description. The width is 940px wide at the header. This means that any logo to place on the header shouldn’t be wider than that. As for the height, there’s not much to worry about as the height will expand to fit perfectly.

2. Upload Your Image/Logo

To upload your header logo to your web host, use an program like SmartFTP. refers to , and it’s basically a program that facilitates for the transfer of files between a home computer and a web server like your web hosting account.

The Blog Millionaire Podcast

The top rated blogging podcast on iTunes is hosted by Brandon Gaille. He built his blog from zero to 1 million monthly visitors in less than 18 months, and he shares his secret strategies in his award winning podcast. Listen to the Latest Episodes Right Now.

If you don’t have any experience of using an program, you will get to login details from your web hosting service. You’ll need the , URL, username and password. Upon getting your information, you can go on and login. You may want to upload your header logo to a folder in your web hosting account like: /wp-content/themes/Simplicity10/logos.

3. Adding Your Logo to The Theme

The following step will be to tell the theme where on the header you want to place your header logo. To achieve this you will need to change your style sheet template. On the WordPress control panel, click on the Presentation tab. From there click on the Theme Editor and the style sheet template will appear in the code box. If some unknown reason it doesn’t appear, click on the style sheet link from a list of theme files to right end of the page.

4. Remove Blog Name and Description From Header

The final thing to do is to remove the blog name and the description from the header. Located on the right end of the Theme Editor and about half way down on the list of files is a link named Header. On that page, scroll down until you reach the following code.

div id=””header”” style=””cursor:” pointer;”=”pointer;””

How to Get Millions of Visitors to Your Blog

Find out the four things you need to do to get your posts to rank on the first page of Google, which will drive a ridiculous amount of traffic to your blog.

h1 class=””blogtitle””

p class=””description””

Change this to:

div id=””header”” style=””cursor:” pointer;”=”pointer;””

Click on Update File to save it and you’ll be good to go.

You may need to adjust the height and width of your header in order to make your logo more visible.

This is an important area of customization. The customization error is normally encountered when trying to configure your custom logo. In certain instances your logo may becoming bigger than the provided size of the logo header. For this, half of the logo may not be visible in the header.

To resolve such issues, you need to play around and change some numbers in the code until you get the right dimensions. Look for the #title area tag and change the width percentage to align everything and put it in good order.

If you don’t notice any changes after making these customizations. Try refreshing the or clear the History cache on your browser.

Keep in mind that your WordPress site is programmed onto your website and not hosted at, you’ll need to get a web developer to enter the new lines of code so as to adjust your WordPress header logo.

Designing the Perfect Logo

10 Biggest Blogging Mistakes to Avoid at All Costs

These ten mistakes can destroy your chances of ever having success with your blog.