{"id":1441,"date":"2017-03-13T02:40:53","date_gmt":"2017-03-13T02:40:53","guid":{"rendered":"http:\/\/websterart.com\/wordpress\/?p=1441"},"modified":"2017-03-13T06:34:00","modified_gmt":"2017-03-13T06:34:00","slug":"adding-logo-wordpress-custom-theme","status":"publish","type":"post","link":"https:\/\/websterart.com\/wordpress\/2017\/03\/adding-logo-wordpress-custom-theme\/","title":{"rendered":"Adding a logo in a WordPress custom theme"},"content":{"rendered":"

Add a logo image function to your custom theme<\/span><\/h2>\n

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. <\/p>\n

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

Lesson 4, Final<\/span><\/h2>\n

We stopped here last week on our custom theme. We\u2019ve got a right hand sidebar, but no images in header:<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
\u00a0<\/strong><\/div>\n
Getting the logo to appear in top left corner of <header>:<\/strong><\/div>\n
<\/div>\n
(1.)<\/b><\/span> To get the logo to appear, first add an images<\/strong> 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 \u201cadd media\u201d command.<\/div>\n
\"\"<\/a><\/div>\n

 <\/p>\n

******** <\/span><\/span><\/p>\n

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

Here is the code:<\/p>\n

$args = array(\r\n     'width'         => 231,\r\n     'height'        => 231,\r\n     'default-image' => get_template_directory_uri() . '\/images\/lightbulb.png',\r\n     'uploads'       => true,\r\n);\r\nadd_theme_support( 'custom-header', $args );\r\n\r\n<\/pre>\n
Here is the new code in context:<\/p>\n
\"\"<\/a><\/p>\n
<\/div>\n
\u00a0********<\/span><\/span><\/div>\n
<\/div>\n
(3.)\u00a0<\/span><\/strong>Go to header.php<\/strong> and modify the starting <header> tag by adding this inline style sheet rule as shown below.<\/div>\n
Note that our style.css<\/strong> 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.<\/div>\n
\n
<body id=\"home\">\r\n<div id=\"wrapper\">\r\n     <header class=\"masthead\" style=\"background: url(<?php header_image(); ?>) top left no-repeat;\">\r\n          <h1><?php bloginfo('name'); ?><\/h1>\r\n     <\/header>\r\n\r\n<\/pre>\n
You should see the image appear as shown below.<\/p>\n
\"\"<\/a><\/p>\n<\/div>\n
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.<\/p>\n
If it doesn’t work…<\/strong><\/p>\n
********<\/p>\n
(3-a.)\u00a0<\/span><\/strong>View the source code of the webpage. Scroll down to the <header><\/span> tag and examine the style=”background: url();”<\/span> property. Note how it is no longer a <?php \u00a0 \u00a0?><\/span> value. Now the url() declaration is \u00a0an absolute address that leads from the root of the website down to the lightbulb.png \u00a0So, 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.<\/p>\n
<body id=\"home\">\r\n<div id=\"wrapper\">\r\n\t<header class=\"masthead\" style=\"background: url(http:\/\/localhost\/wordpress-delete\/wp-content\/themes\/deletemark\/images\/lightbulb.png) top left no-repeat;\">\r\n\t\t<h1>Mary Jones<\/h1>\r\n\t<\/header>\r\n\t<nav class=\"main-menu\"><\/pre>\n
 <\/p>\n
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<\/strong> that tells headerPinstripe.png<\/strong> to appear from the images folder.<\/p>\n
#wrapper {\r\n\tmargin-right: auto;\r\n\tmargin-left: auto;\r\n\tpadding: 0;\r\n\twidth: 80%;\r\n    background: #fff url(images\/headerPinstripe.png) top left repeat-x;\r\n\tmax-width: 1400px;\r\n\tbackground-color: #fff;\r\n\t\r\n\tborder-bottom-right-radius: 18px;\r\n\tborder-bottom-left-radius: 17px;\r\n\t-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);\r\n\t-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);\r\n\tbox-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);\r\n}\r\n\r\n<\/pre>\n
Even though we are developing this at http:\/\/localhost\/customtheme, we don’t have to go through the entire\u00a0 Duplicator zipping, upload and install process to get these changes online into your live WordPress installation.<\/p>\n
********<\/span><\/span><\/div>\n
(4.) <\/span><\/strong>Go online and log in to cpanel. Double click your way down through these folders: public_html > final > wp-content > themes > yourtheme<\/span>.<\/div>\n
<\/div>\n
\n
********<\/span><\/span><\/div>\n
(5.) <\/span><\/strong>Use the cpanel button for create new folder<\/strong> and name it images<\/strong>. Double click inside the images folder and click the cpanel upload<\/strong> 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.<\/div>\n<\/div>\n
\n
<\/div>\n
********<\/span><\/span><\/div>\n
(6.) <\/span><\/strong>Navigate back to the themes > yourtheme<\/span> folder. Upload: functions.php, header.php<\/strong> and any other files you might have changed in this go round.<\/div>\n<\/div>\n
\u00a0This 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.<\/div>\n
<\/div>\n
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\u00a0for 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.\u00a0Wordpress’s goal \u00a0is to make creating web content as easy as editing a Word Document.<\/div>\n
********<\/span><\/span><\/div>\n
(7.) <\/span><\/strong>To change out the logo image, log into the dashboard on the \u00a0remote site (\/wp-admin) and go to the \u00a0appearance > customize > Header Image<\/span>. Note: that new button for Header Image<\/strong> is there because of the PHP we just edited. It wasn’t there before.<\/div>\n
\"\"<\/a><\/div>\n
\u00a0.<\/div>\n
<\/div>\n
And here you have nice little buttons for swapping in a new logo (header) image:\"\"<\/a><\/div>\n
<\/div>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,130,131],"tags":[134,133,132],"class_list":["post-1441","post","type-post","status-publish","format-standard","hentry","category-blog","category-teaching","category-wordpress","tag-add-custom-theme-logo-image","tag-add-theme-logo","tag-wordpress-tutorial"],"_links":{"self":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1441"}],"version-history":[{"count":20,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1441\/revisions"}],"predecessor-version":[{"id":1467,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1441\/revisions\/1467"}],"wp:attachment":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}