Add a Logo to WordPress Blog with Dynamic Headers by Nicasio Design
I have recently had a request for more information on this and think many will appreciate and need this info. Everybody wants to customize their blog and make it more personal here is the best way to do that. The reason I appreciate: Dynamic Headers by Nicasio Design so much is because it enables you to dynamically change your blog's logo or header image. Whatever you might want to put up there. This is good because it means you only modify the code once and the change is minimal.
First things first. You will have to download and install the pluggin. This is easier then ever with the latest version of WordPress it pretty much does it for you. Simply log in to the WordPress administrator interface and go to the Add New option from under the Plugins section. Search for: Dynamic Headers by Nicasio Design and then install it and activate it.
Next you will have to create a folder called: header-images inside your wp-content folder. It needs to be called exactly that and be in that exact location. You should be able to create folders from FTP or your File Manager.
Now you will need to upload your logo into that folder: wp-content
From the WordPress Admin intreface go to Appearance > Editor then click on Header (header.php) find the line of code that reads:
<body>
Directly under it insert this line of code:
<br><br><br><center><?php show_media_header(); ?></center><br>
This will add the tag that is needed by the plugin and also center the logo. I've added a three lines for spacing before that. If that is too much you can remove one or all of the <br> tags.
Last you will need to tell the plugin what image you want it to use for the logo. Make sure you are still logged into the WP Admin interface and go to: Headers > Settings (Look at the very very bottom it is under the Settings menu.) In here select your image name for both drop downs under: Default Header Media and Blog Page Header.
Tada! You are done. Next time you update your logo or want ot replace it with another image simply upload the new image into the /blog/wp-content/header-images/ and then tell the plugin to start using that one from: Header > Settings.
I really hope this has been helpfull, and remember I like hearing back form you as much as you like reading my posts
Enjoy this article?
Recent
- Google Talk on Port 80
- Deleting duplicates in Thunderbird
- Disabling the Firefox Delay Timer
- What is a favicon ?
- Adding Meebo to your Website
- Tunnel your connection with Putty and Firefox
- Get a real domain for your MySpace account
- Add a Logo to WordPress Blog with Dynamic Headers by Nicasio Design
- Best 3G Touch Phone
- Where are my Skype images saved ?
Pages
Archive
- April 2010 (1)
- January 2010 (2)
- July 2009 (6)
- June 2009 (4)


August 23rd, 2009 - 12:45
Thanks for that! I spent hours searching for how to put the header in the center:)
August 25th, 2009 - 23:17
You are welcome Sirje.
September 17th, 2009 - 14:43
Thanks for addressing this Mike. At Nicasio Design we get tons of questions about the plugin, and we try to answer as many as we can, but being a small commercial firm we sadly don’t have the time to answer them all (it could be its own full time job).
It’s great when the community finds solutions and shares. We all benefit from this!
Thanks Again,
Dan Cannon
Nicasio Design
September 17th, 2009 - 15:07
Dan,
Most welcome. I love the plug-in btw
November 26th, 2009 - 03:01
thanks for the code!!! Was such a simple tweak! I could not figure out how to get the logo centered. I called the group that built the plugin – they said I would have to pay $150 for consulting work… thank God for internet!
November 30th, 2009 - 18:13
Khan seriously. So ridiculous.
August 8th, 2010 - 07:08
You have no idea how this helped me, I was getting to rip my hair out then suddenly a logical answer
Thanks Again.
August 9th, 2010 - 14:57
@Ron,
You are very welcome I’m happy I was able to help you out with this post.
August 28th, 2010 - 08:25
Hi Mike:
I love what your doing with the lightword theme! I was wondering if you could share how you added your footer to your posts? “Enjoy this article”
August 30th, 2010 - 15:03
That is part of a feature offered by the “Digg Digg” plug-in.
February 8th, 2011 - 20:53
Thank you for this interesting article. I will be sure to get the word out about this on my site
Outstanding! Can’t wait to read next article.
February 25th, 2011 - 14:51
This works great, I want the image to load to the left. I changed the word center to left, but this does not seem to work. Any suggestions?
February 25th, 2011 - 15:36
@Allison
Could be related to your theme. Please paste or email me just the code you are using for the logo.
February 25th, 2011 - 15:46
Sorry, I didn’t design this blog, so I am not 100% sure where it is. I am assuming it is in the style sheet so forgive me if I this is not it below. the address is
http://www.simplesolutionsdesigns.com
February 25th, 2011 - 16:17
@Allison
It looks like you might not have read my article above. Have you installed the plug-in and edited the code specified in the header.php per the instructions above ?
February 25th, 2011 - 16:38
I downloaded the plugin, activated it and followed all the directions. I immediately got an error that said the file did not appear to be writable so I contacted my server administrator and he made the folder writable and added the folder.
I reactivated the plugin, uploaded the image, changed the default settings and even deleted the old image so that I could tell each page which image to use. So it lets me select the image, write now I am only working on one page, the furniture design page. If you went to my website you would have seen a blank square where the image goes. If you click on the furniture design page you will see the image I want to use on that page centered in the header area.
February 25th, 2011 - 18:43
@Allison
I deleted the code because it does not help.
There are two things I would like you to check:
1. Have you selected your image: “AE Logo.png” in both drop downs inside of WordPress under: Headers > Settings ? (Tip: whenever naming something for the web try to not have any spaces in the name)
2. Have you entered the line of code from the post in your Header file under the tag ?
February 25th, 2011 - 19:55
I just did #1, and the logo still positions itself center The reason I wanted to use this plug in, is that it allows me to use different images on different pages by selecting the image in the page editing. By setting it from no default to AE Logo.png (will change the name thanks) it puts the same logo on all pages.
#2 I have entered the line of code into the header.php file, under header see below. I am a little confused because in your directions you say to enter the code
and now you are asking if I entered it under the tag? Below is what it looks like right now.
February 25th, 2011 - 20:23
Allison,
WordPress is trying to interpret the code I will be looking into how to stop this from hapenning in the future so that code can be posted in replies. However for now go back to your header file and replace the line of code that says:
<br><br><br><center><?php show_media_header(); ?></center><br>
with:
<br><br><br><?php show_media_header(); ?><br>
This will basically remove the code that makes it align to the center of your page. It shoudl now align to the left of the page. However this might not be exactly where you want it to be. You will see what I mean after you do that. What you will need to do in the end is re-create the logo on the background you want with a large background to the left of it that will essentially push it out to the right the correct ammount. (I can try to explain this in more detail later if you are the one creating the actual logo.)
If you don’t want it on all pages then only select it form the second drop down in the Headers > Setting option in WordPress. You woudl then need to figure out how to manually set a different one of the rest of the pages.
February 25th, 2011 - 20:46
In order to have your code show up on the page you will have to find a tool online that will let you “convert html tag”
These tools essentially convert the ascii characters:
< and >
into their html entity values:
< and >
February 25th, 2011 - 20:53
Did this, still centers the image in the page inline with where I want it, but centered. I even took out the three to see if that would let is go left. It must be something in the header or the background design of the page. Is there a css code I can over ride the layout with?
February 25th, 2011 - 22:09
@Allison
Probably however I’m not familiar with your specific theme.
February 25th, 2011 - 22:25
thanks for trying:)
I sent an email to the developer a few days ago, but no answer. Perhaps he will answer me, it seems that he has had this question before.
August 10th, 2011 - 19:46
Very Good. Thank you!