Adding a logo in a WordPress custom theme

Posted by on March 13th, 2017  •  0 Comments

Add a logo image function to your custom theme

Geek alert! This post is for the students in my WordPress class. There is nothing here worth reading if you are looking for stories about climbing or painting.

I needed to create one more lesson to finish out the quarter. My choices for creating the content of the lesson  were: inDesign, Canvas, HTML, Word or a youtube video via Camtashia. I settled on WordPress because it seemed the easiest and most durable  platform. Plus I’ve learned a lot online from other authors, and this is a way for me to give back.

Lesson 4, Final

We stopped here last week on our custom theme. We’ve got a right hand sidebar, but no images in header:

 

 
Getting the logo to appear in top left corner of <header>:
(1.) To get the logo to appear, first add an images folder into your custom theme folder, and copy across any images you would like to have in your theme. Note, these are images that will be pre-installed into the theme, rather than images that get uploaded to WordPress via the “add media” command.

 

********

(2.) Add this code into your functions.php file. Place it after the last function which was: register_sidebar(array(…)) but before the closing ?>  php tag. Note, you can read much more about this custom-header function here: https://codex.wordpress.org/Custom_Headers

Here is the code:

$args = array(
     'width'         => 231,
     'height'        => 231,
     'default-image' => get_template_directory_uri() . '/images/lightbulb.png',
     'uploads'       => true,
);
add_theme_support( 'custom-header', $args );

Here is the new code in context:

 ********
(3.) Go to header.php and modify the starting <header> tag by adding this inline style sheet rule as shown below.
Note that our style.css file already has a rule telling an image to appear in the background of the <header>. We can ignore that because this new inline rule will override that one in the external style sheet.
<body id="home">
<div id="wrapper">
     <header class="masthead" style="background: url(<?php header_image(); ?>) top left no-repeat;">
          <h1><?php bloginfo('name'); ?></h1>
     </header>

You should see the image appear as shown below.

NOTE: Behind the scenes, WordPress creates an association between custom-header, and header_image(). I have no idea how or where that happens, but you could google it for an answer.

If it doesn’t work…

********

(3-a.) View the source code of the webpage. Scroll down to the <header> tag and examine the style=”background: url();” property. Note how it is no longer a <?php    ?> value. Now the url() declaration is  an absolute address that leads from the root of the website down to the lightbulb.png  So, if your logo image isn’t showing up, examine the images folder. Is it in there? Does it have a different name? If the site has crashed, or the url(); doesn’t look like the code below, try to find some logic in the error messages. PHP usually gives file names and code line numbers when it crashes. Examine those and compare your code to my code here, or in the finished theme I gave you in the resources folder.

<body id="home">
<div id="wrapper">
	<header class="masthead" style="background: url(http://localhost/wordpress-delete/wp-content/themes/deletemark/images/lightbulb.png) top left no-repeat;">
		<h1>Mary Jones</h1>
	</header>
	<nav class="main-menu">

 

You may notice that the tiling background image has also suddenly appeared. That is because we have an existing style sheet rule in our style.css that tells headerPinstripe.png to appear from the images folder.

#wrapper {
	margin-right: auto;
	margin-left: auto;
	padding: 0;
	width: 80%;
    background: #fff url(images/headerPinstripe.png) top left repeat-x;
	max-width: 1400px;
	background-color: #fff;
	
	border-bottom-right-radius: 18px;
	border-bottom-left-radius: 17px;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}

Even though we are developing this at http://localhost/customtheme, we don’t have to go through the entire  Duplicator zipping, upload and install process to get these changes online into your live WordPress installation.

********
(4.) Go online and log in to cpanel. Double click your way down through these folders: public_html > final > wp-content > themes > yourtheme.
********
(5.) Use the cpanel button for create new folder and name it images. Double click inside the images folder and click the cpanel upload button. Drag in any images you want to be in the theme. Examples would be lightbulb.png, headerPinstripe.png, left-tile.jpg, right-tile.jpg. Other images, such as photos are better uploaded from the dashboard via the upload media button.
********
(6.) Navigate back to the themes > yourtheme folder. Upload: functions.php, header.php and any other files you might have changed in this go round.
 This is one of the benefits of developing a custom theme. We develop locally in xampp where no one can see us make mistakes, then we just send up the changed files.
Once you’ve got it uploaded to the remote server and working, you may want to change out the image. At this point, it is best to do it through the dashboard. We set it up as part of the theme so that users of the theme could easily change our default for their own image. We could obviously change the image using the PHP shown above. But the whole point of setting this up as a header image function was that so users of our theme could change the logo image easily by just pressing WordPress buttons in the dashboard. Wordpress’s goal  is to make creating web content as easy as editing a Word Document.
********
(7.) To change out the logo image, log into the dashboard on the  remote site (/wp-admin) and go to the  appearance > customize > Header Image. Note: that new button for Header Image is there because of the PHP we just edited. It wasn’t there before.
 .
And here you have nice little buttons for swapping in a new logo (header) image:

Leave a Reply

Your email address will not be published. Required fields are marked *