{"id":2732,"date":"2021-07-06T12:52:35","date_gmt":"2021-07-06T12:52:35","guid":{"rendered":"https:\/\/tschaki.com\/?p=2732"},"modified":"2021-11-20T14:31:56","modified_gmt":"2021-11-20T14:31:56","slug":"insert-logo-via-customizer","status":"publish","type":"post","link":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/","title":{"rendered":"Insert logo via Customizer"},"content":{"rendered":"<p>In order to upload and change your own logo via WordPress customizer, two basic template changes are required. The logo functionality must be added in the theme <code>functions.php<\/code> file. Then the logo can be retrieved via WordPress&#8217; own function <code>get_custom_logo( )<\/code>.<\/p>\n\n\n\n<h2 id=\"h-enable-logo-function\">Enable Logo Function<\/h2>\n\n\n\n<p>To activate the logo function in the WordPress theme, the following code must be added to the active <code>functions.php<\/code> file:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;PHP&quot;,&quot;modeName&quot;:&quot;php&quot;}\">function themename_custom_logo_setup() {\n    $defaults = array(\n        'height'               =&gt; 100,\n        'width'                =&gt; 400,\n        'flex-height'          =&gt; true,\n        'flex-width'           =&gt; true,\n        'header-text'          =&gt; array( 'site-title', 'site-description' ),\n        'unlink-homepage-logo' =&gt; true, \n    );\n    add_theme_support( 'custom-logo', $defaults );\n}\nadd_action( 'after_setup_theme', 'themename_custom_logo_setup' );<\/pre><\/div>\n\n\n\n<p>This code tells WordPress that this theme supports the logo function. In addition to the height and width of the logo to be displayed, the title and text are also defined if no logo has been uploaded.<\/p>\n\n\n\n<p>The logo can be uploaded and selected under &#8220;Appearance&#8221; -&gt; &#8220;Header&#8221;.<\/p>\n\n\n\n<h2 id=\"h-insert-custom-logo-in-header-file\">Insert custom logo in header file<\/h2>\n\n\n\n<p>To insert the logo on the website, add the following code to the <code>header.php<\/code> file:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;PHP&quot;,&quot;modeName&quot;:&quot;php&quot;}\">if ( function_exists( 'the_custom_logo' ) ) {\n    the_custom_logo();\n}<\/pre><\/div>\n\n\n\n<p>This code checks whether the function <code>the_custom_logo<\/code> exists. If this is the case, the custom logo is insert and displayed as an HTML <code>&lt;img>-tag<\/code> via <code>the_custom_logo( )<\/code>.<\/p>\n\n\n\n<p>To gain more control over the embedded logo, for example to add own classes or ID, only the image URL can be output with the following code. The correct packaging of the URL must then be done by the user and could look like this:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;PHP&quot;,&quot;modeName&quot;:&quot;php&quot;}\">$custom_logo_id = get_theme_mod( 'custom_logo' );\n$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );\n \nif ( has_custom_logo() ) {\n    echo '&lt;img src=&quot;' . esc_url( $logo[0] ) . '&quot; alt=&quot;' . get_bloginfo( 'name' ) . '&quot;&gt;';\n} else {\n    echo '&lt;h1&gt;' . get_bloginfo('name') . '&lt;\/h1&gt;';\n}<\/pre><\/div>\n\n\n\n<p>If a custom logo has been uploaded to WordPress, the image is insert in an <code>&lt;img>-tag<\/code>. If no logo is available, the blog name is output in an <code>&lt;h1>-tag<\/code> instead.<\/p>\n\n\n\n<p>Source: <a href=\"https:\/\/developer.wordpress.org\/themes\/functionality\/custom-logo\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Codex<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>In order to upload and change your own logo via WordPress customizer, two basic template changes are required. The logo functionality must be added in the theme functions.php file. Then the logo can be retrieved via WordPress&#8217; own function get_custom_logo( ). Enable Logo Function To activate the logo function in the WordPress theme, the following [&hellip;]<\/p>","protected":false},"author":1,"featured_media":2398,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[124,125],"tags":[154,153,155,151,143,131],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v16.6 (Yoast SEO v17.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Insert custom logo in WordPress Theme &bull; tschaki<\/title>\n<meta name=\"description\" content=\"Add the custom logo function to the WordPress theme with PHP. Thus, a logo can be easily changed and uploaded via the Customizer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Insert logo via Customizer\" \/>\n<meta property=\"og:description\" content=\"Add the custom logo function to the WordPress theme with PHP. Thus, a logo can be easily changed and uploaded via the Customizer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/\" \/>\n<meta property=\"og:site_name\" content=\"tschaki\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-06T12:52:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-20T14:31:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tschaki.com\/wp-content\/uploads\/2020\/11\/WP-WooCommerce.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1580\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Trent Bojett\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/tschaki.com\/#organization\",\"name\":\"Tschaki.com\",\"url\":\"https:\/\/tschaki.com\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/tschaki.com\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/tschaki.com\/wp-content\/uploads\/2020\/12\/tschaki-logo-1.png\",\"contentUrl\":\"https:\/\/tschaki.com\/wp-content\/uploads\/2020\/12\/tschaki-logo-1.png\",\"width\":1022,\"height\":273,\"caption\":\"Tschaki.com\"},\"image\":{\"@id\":\"https:\/\/tschaki.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tschaki.com\/#website\",\"url\":\"https:\/\/tschaki.com\/\",\"name\":\"tschaki\",\"description\":\"Codesupport and alternatives\",\"publisher\":{\"@id\":\"https:\/\/tschaki.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tschaki.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/tschaki.com\/wp-content\/uploads\/2020\/11\/WP-WooCommerce.jpg\",\"contentUrl\":\"https:\/\/tschaki.com\/wp-content\/uploads\/2020\/11\/WP-WooCommerce.jpg\",\"width\":1580,\"height\":500,\"caption\":\"create wordpress plugin\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#webpage\",\"url\":\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/\",\"name\":\"Insert custom logo in WordPress Theme &bull; tschaki\",\"isPartOf\":{\"@id\":\"https:\/\/tschaki.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#primaryimage\"},\"datePublished\":\"2021-07-06T12:52:35+00:00\",\"dateModified\":\"2021-11-20T14:31:56+00:00\",\"description\":\"Add the custom logo function to the WordPress theme with PHP. Thus, a logo can be easily changed and uploaded via the Customizer.\",\"breadcrumb\":{\"@id\":\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tschaki.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Insert logo via Customizer\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#webpage\"},\"author\":{\"@id\":\"https:\/\/tschaki.com\/#\/schema\/person\/b4bf4286ba196fcd756146568acb3219\"},\"headline\":\"Insert logo via Customizer\",\"datePublished\":\"2021-07-06T12:52:35+00:00\",\"dateModified\":\"2021-11-20T14:31:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#webpage\"},\"wordCount\":232,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/tschaki.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/tschaki.com\/wp-content\/uploads\/2020\/11\/WP-WooCommerce.jpg\",\"keywords\":[\"appearance\",\"design\",\"dev\",\"logo\",\"theme\",\"wordpress\"],\"articleSection\":[\"Technology\",\"Wordpress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/tschaki.com\/#\/schema\/person\/b4bf4286ba196fcd756146568acb3219\",\"name\":\"Trent Bojett\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/tschaki.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7344f00aff4a7391a8f499ff58fc7275?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7344f00aff4a7391a8f499ff58fc7275?s=96&d=mm&r=g\",\"caption\":\"Trent Bojett\"},\"description\":\"My name is Trent Bojett, I am 28 years old and I live in Switzerland. Because of my enthusiasm for writing and the logical world (= software development) I started this blog in early 2020.\",\"sameAs\":[\"https:\/\/tschaki.com\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Insert custom logo in WordPress Theme &bull; tschaki","description":"Add the custom logo function to the WordPress theme with PHP. Thus, a logo can be easily changed and uploaded via the Customizer.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/","og_locale":"en_US","og_type":"article","og_title":"Insert logo via Customizer","og_description":"Add the custom logo function to the WordPress theme with PHP. Thus, a logo can be easily changed and uploaded via the Customizer.","og_url":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/","og_site_name":"tschaki","article_published_time":"2021-07-06T12:52:35+00:00","article_modified_time":"2021-11-20T14:31:56+00:00","og_image":[{"width":1580,"height":500,"url":"https:\/\/tschaki.com\/wp-content\/uploads\/2020\/11\/WP-WooCommerce.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Trent Bojett","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/tschaki.com\/#organization","name":"Tschaki.com","url":"https:\/\/tschaki.com\/","sameAs":[],"logo":{"@type":"ImageObject","@id":"https:\/\/tschaki.com\/#logo","inLanguage":"en-US","url":"https:\/\/tschaki.com\/wp-content\/uploads\/2020\/12\/tschaki-logo-1.png","contentUrl":"https:\/\/tschaki.com\/wp-content\/uploads\/2020\/12\/tschaki-logo-1.png","width":1022,"height":273,"caption":"Tschaki.com"},"image":{"@id":"https:\/\/tschaki.com\/#logo"}},{"@type":"WebSite","@id":"https:\/\/tschaki.com\/#website","url":"https:\/\/tschaki.com\/","name":"tschaki","description":"Codesupport and alternatives","publisher":{"@id":"https:\/\/tschaki.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tschaki.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#primaryimage","inLanguage":"en-US","url":"https:\/\/tschaki.com\/wp-content\/uploads\/2020\/11\/WP-WooCommerce.jpg","contentUrl":"https:\/\/tschaki.com\/wp-content\/uploads\/2020\/11\/WP-WooCommerce.jpg","width":1580,"height":500,"caption":"create wordpress plugin"},{"@type":"WebPage","@id":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#webpage","url":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/","name":"Insert custom logo in WordPress Theme &bull; tschaki","isPartOf":{"@id":"https:\/\/tschaki.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#primaryimage"},"datePublished":"2021-07-06T12:52:35+00:00","dateModified":"2021-11-20T14:31:56+00:00","description":"Add the custom logo function to the WordPress theme with PHP. Thus, a logo can be easily changed and uploaded via the Customizer.","breadcrumb":{"@id":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tschaki.com\/en\/"},{"@type":"ListItem","position":2,"name":"Insert logo via Customizer"}]},{"@type":"Article","@id":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#article","isPartOf":{"@id":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#webpage"},"author":{"@id":"https:\/\/tschaki.com\/#\/schema\/person\/b4bf4286ba196fcd756146568acb3219"},"headline":"Insert logo via Customizer","datePublished":"2021-07-06T12:52:35+00:00","dateModified":"2021-11-20T14:31:56+00:00","mainEntityOfPage":{"@id":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#webpage"},"wordCount":232,"commentCount":0,"publisher":{"@id":"https:\/\/tschaki.com\/#organization"},"image":{"@id":"https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#primaryimage"},"thumbnailUrl":"https:\/\/tschaki.com\/wp-content\/uploads\/2020\/11\/WP-WooCommerce.jpg","keywords":["appearance","design","dev","logo","theme","wordpress"],"articleSection":["Technology","Wordpress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/tschaki.com\/en\/insert-logo-via-customizer\/#respond"]}]},{"@type":"Person","@id":"https:\/\/tschaki.com\/#\/schema\/person\/b4bf4286ba196fcd756146568acb3219","name":"Trent Bojett","image":{"@type":"ImageObject","@id":"https:\/\/tschaki.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/7344f00aff4a7391a8f499ff58fc7275?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7344f00aff4a7391a8f499ff58fc7275?s=96&d=mm&r=g","caption":"Trent Bojett"},"description":"My name is Trent Bojett, I am 28 years old and I live in Switzerland. Because of my enthusiasm for writing and the logical world (= software development) I started this blog in early 2020.","sameAs":["https:\/\/tschaki.com"]}]}},"_links":{"self":[{"href":"https:\/\/tschaki.com\/en\/wp-json\/wp\/v2\/posts\/2732"}],"collection":[{"href":"https:\/\/tschaki.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tschaki.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tschaki.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tschaki.com\/en\/wp-json\/wp\/v2\/comments?post=2732"}],"version-history":[{"count":2,"href":"https:\/\/tschaki.com\/en\/wp-json\/wp\/v2\/posts\/2732\/revisions"}],"predecessor-version":[{"id":3042,"href":"https:\/\/tschaki.com\/en\/wp-json\/wp\/v2\/posts\/2732\/revisions\/3042"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tschaki.com\/en\/wp-json\/wp\/v2\/media\/2398"}],"wp:attachment":[{"href":"https:\/\/tschaki.com\/en\/wp-json\/wp\/v2\/media?parent=2732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tschaki.com\/en\/wp-json\/wp\/v2\/categories?post=2732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tschaki.com\/en\/wp-json\/wp\/v2\/tags?post=2732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}