{"id":7978,"date":"2020-01-14T10:35:06","date_gmt":"2020-01-14T10:35:06","guid":{"rendered":"https:\/\/www.24x7wpsupport.com\/blog\/?p=7978"},"modified":"2021-09-23T12:47:54","modified_gmt":"2021-09-23T12:47:54","slug":"how-to-customize-headers-in-wordpress-using-plugins-and-custom-code","status":"publish","type":"post","link":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/","title":{"rendered":"How to Customize Headers in WordPress Using Plugins and Custom Code?"},"content":{"rendered":"

Last updated on September 23rd, 2021 at 12:47 pm<\/p>

[vc_row][vc_column][vc_empty_space][vc_column_text]This is a screenshot of our beloved website, WordPress. The first thing that we see on the web page as the developers want us to is the WordPress logo and the name of the site on the header of the web page. If you have not figured out yet, it is a custom header.[\/vc_column_text][vc_single_image image=”7979″ img_size=”full” alignment=”center”][vc_column_text]The very first thing that catches the viewer’s eyes is always the header of a website. Be it the header on the Facebook app with the FB logo and search box, or the header of the site that you’re currently surfing.<\/p>\n

The header, which also acts as the navigation bar of every website, plays a significant role in creating a good or bad user experience. When the stakes are this high, there has got to be some way for adding creativity to this component the website, right?<\/p>\n

Don\u2019t worry! We\u2019ve got you covered. You\u2019re going to customize headers in WordPress, left, right, and center after reading this article.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=”Types of Headers” use_theme_fonts=”yes”][vc_column_text]Before getting into the real tech of how to customize headers in WordPress, let\u2019s first understand what the different types of headers are. We are sure you’ve seen all the types on some website or the other.<\/p>\n

The first type of header is the fixed header. Using a small CSS trick, which is discussed further, you can customize headers in WordPress to fix at the top of the page. This implies that your web page header will be fixed at the top of the web page independent of the user’s scrolling activity.<\/p>\n

The second type of header is the fading header. You can customize headers in WordPress so that they fade out when the user scrolls downwards and fade in as soon as the user scrolls upwards. You’ve seen this header on Facebook<\/a>.<\/p>\n

The third type of header is the relatively fixed header. You can also customize headers in WordPress so that they stay at the top of the webpage, and the user has to scroll to the top every time to access the header. The WordPress website’s homepage deploys this header.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=”What is a custom header in WordPress?” use_theme_fonts=”yes”][vc_column_text]Customizing headers in WordPress is not a very tough task when you have the standard WordPress theme customizer service on your dashboard. The header then developed is a custom\/modified header. But all good things come with a catch. The catch to using the standard service is that you have to follow certain constraints on image sizes, formats, etc. for every theme provided.[\/vc_column_text][vc_single_image image=”7980″ img_size=”full” alignment=”center”][vc_column_text]Custom headers enable developers to add a ‘title image’ to each of their headers, and they can crop, rotate and edit any picture through a visual editor, which you can find in Appearance > Header section of the admin panel. Developers can also add strings of texts and videos to their headers. While all this sounds pretty fancy and cool, it is a tedious task to upload all high-quality rich data to the headers, while maintaining responsivity for different screen sizes and keeping a short load time.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=”What WordPress offers and what we make out of it with code?” use_theme_fonts=”yes”][vc_column_text]Before customizing your header, you\u2019ll have to set up a WordPress theme customizer in your functions.php file to load themes. To do this, copy-paste the following code. You can refer to the image below to find the file to edit[\/vc_column_text][vc_single_image image=”7981″ img_size=”full” alignment=”center”][vc_column_text]<\/p>\n

<code>
\nfunction themename_custom_header_setup() {
\n$args = array(
\n‘default-image’ => get_template_directory_uri(). ‘img\/default-image.jpg’,
\n‘default-text-color’ => ‘000’,
\n‘width’ => 1000,
\n‘height’ => 250,
\n‘flex-width’ => true,
\n‘flex-height’ => true,
\n)
\nadd_theme_support( ‘custom-header’, $args );
\n}
\nadd_action(‘ after_setup_theme ‘, ‘themename_custom_header_setup ‘ );
\n<\/code><\/p>\n

This code will result in a standard responsive header with text. The \u2018flex-width\u2019 and \u2018flex-height\u2019 attributes make the header responsive if set to \u2018true.\u2019
\nOnce this is done, you’ll have to use the after_setup_theme<\/a><\/span> hook to register the custom headers and themes.<\/p>\n

[\/vc_column_text][vc_custom_heading text=”Adding an Image to the header” use_theme_fonts=”yes”][vc_column_text]Start by choosing any theme available on WordPress, for example, Twenty Sixteen Default WordPress theme. All themes have specific limitations to the dimensions of the image that you can use for the header. You can view these specifications under the Appearance >> Header section on your admin dashboard. After you\u2019re all caught up with what the theme will accept, follow these steps for getting an image on your header. The image below demonstrates the same.[\/vc_column_text][vc_single_image image=”7982″ img_size=”full” alignment=”center”][vc_column_text]1)\u00a0 Choose and edit an image<\/strong>
\nYour first task is to find an image that represents your brand or catches the user’s eye if you want to promote something. There are a ton of websites from where you can get a high-quality intriguing image for your header. You may use this link<\/a><\/span> which lists all such websites. You can now edit the image to give your touch to it or update its dimensions for the chosen theme. Depending on your needs, you can use basic picture editing software like paint to high order vector editing software like Adobe illustrator to do this.<\/p>\n

2) Upload the image<\/strong>
\nFor uploading an image for your header, login to your WordPress dashboard. Now follow the steps:
\nAppearance -> Header -> Header Image (on the left side) -> Add new image
\nThis will open a file upload dialogue box from where you can search and upload your custom header image. You now know how to create a custom header.<\/p>\n

3) Image for every page<\/strong>
\nIf you want, you can upload a different image for every web page of your website. To do this, install a WordPress plugin like WP Header Images. Now you can choose and select different custom photos for your WordPress custom headers. You will be able to use this service in the Settings >> WP Header Images section after installing the plugin.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=”Adding a Text area to your header” use_theme_fonts=”yes”][vc_column_text]Now that you have a custom image you can use it to add many things to your header. To add a text area, you\u2019ll have to add a small piece of code to your header-image.php file. Add the following code to get a text-area on your header.<\/p>\n

<code>
\n<div class=”custom-header”>
\n<div class=”custom-header-media”>
\n<?php the_custom_header_markup(); ?>
\n<\/div>
\n<div class=”custom_textbox”>
\n<div class=”custom_textbox_content”><p>Lorem Impsum<\/p><\/div><\/div>
\n<\/code><\/p>\n

This will result in a text-area on your header with the text \u201cLorem Impsum” in it. You can also tweak the looks of the text area using css which is discussed in the next section. A header with some text looks like:[\/vc_column_text][vc_single_image image=”7985″ img_size=”full” alignment=”center”][vc_custom_heading text=”Adding social media icons” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]To add social media icons to your header you\u2019ll have to add the following code after the wrap class in your site-branding.php file. A web-page with a header that includes social media icons looks something like this.[\/vc_column_text][vc_single_image image=”7986″ img_size=”full” alignment=”center”][vc_column_text]<code>
\n<div class=”social_links”>
\n<ul> <li><a href=” ” class=”custom_facebook_icon”>
\n<img alt=”customfacebook” src=” ” \/>
\n<\/a> <\/li>
\n<li> <a href=” ” class=”custom_twitter_icon”>
\n<img alt=”customtwitter” src=” ” \/>
\n<\/a> <\/li>
\n<li> <a href=” ” class=”custom_googleplus_icon”>
\n<img alt=”customgoogleplus” src=” ” \/>
\n<\/a> <\/li> <\/ul>
\n<\/div>
\n<\/code>[\/vc_column_text][vc_custom_heading text=”Adding widget to your header” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]To add functional widgets to your header you\u2019ll have to edit your function.php file. Just add the following code anywhere (obviously not in between functions!)<\/p>\n

<code>
\nfunction custom_widgets()
\n{
\nregister_sidebar( array(
\n‘name’ => ‘Custom Header Position’,
\n‘ id ‘ => ‘ ‘,
\n‘ description ‘ => __( ‘ Lorem Ipsum , ‘ test’ ),
\n‘ before_widget ‘ => ‘ < aside id=”CustomWidget” class=”custom_widget”>’,
\n‘ after_widget ‘ => ” <\/aside> “,
\n‘ before_title ‘ => ‘ <h3 class=”widget-title”> ‘,
\n‘ after_title ‘ => ‘ <\/h3> ‘,
\n) );}
\nadd_action( ‘ widgets_init ‘, ‘ custom_widgets ‘ );
\n<\/code><\/p>\n

Since this code runs on the back-end of the website you now have to add front-end code that displays the widget on your header. To do this put the following code on your header-image.php file.<\/p>\n

<code>
\n<?php
\nif ( is_active_sidebar( ‘ custom_header_position ‘ ) ) : ?>
\n<div id=” ” class=” ” role=” complementary “>
\n<? php dynamic_sidebar( ‘ custom_header_position ‘ ); ?>
\n<\/div>
\n<?php endif; ?>
\n<\/code><\/p>\n

Now you’re good to go! All your task to do is to choose which widget to deploy from Appearance >> Widgets section. You can add multiple widgets which result in a classic webpage like one displayed below.[\/vc_column_text][vc_single_image image=”7987″ img_size=”full” alignment=”center”][vc_custom_heading text=”Adding video to the header” use_theme_fonts=”yes”][vc_column_text]Adding a video to the header is a straightforward task. There are two ways that you can use to upload a video to your header. You can either upload your mp4 video, or you can get any video from YouTube for your header. You can upload your file by following the steps:<\/p>\n

Appearance -> Header -> Select Video<\/p>\n

This will open a file upload dialogue box from where you can search and upload the desired video for your header.<\/p>\n

To get a video from YouTube on your header, you can directly copy and paste the link of your YouTube video in the text box instead of clicking the ‘Select Video’ button in the Appearance -> Header.[\/vc_column_text][vc_single_image image=”7988″ img_size=”full” alignment=”center”][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=”The magical CSS” use_theme_fonts=”yes”][vc_column_text]A cascaded style sheet, also known as CSS, is the magic element that takes your website from boring to intriguing. CSS is majorly used on sites all over the web to improve user interface and hence improve user experience. The aspect of CSS that fascinates developers a lot is that it does all of this being ‘cascaded,’ i.e., hidden.<\/p>\n

You can create a dedicated CSS file that can be used to edit all elements of the whole website if the right division class and ids are called for editing. You can also add inline CSS, i.e., modify elements in the HTML code directly using the “style” attribute inside the HTML tags.<\/p>\n

You can attach the following code to attach the CSS stylesheet that you’ve written to the webpages’ code.<\/p>\n

<code>
\n<link rel=”stylesheet” href=”stylesheet_name.css”>
\n<\/code><\/p>\n

Inside the stylesheet, you have to first call the class that you want to edit and then edit them. For calling a particular class, use the following code.<\/p>\n

<code>
\nHTML code: <p class=”className”>This is a paragraph.<\/p>
\nCSS code: p.error {
\nfont-color: red;
\n}
\n<\/code><\/p>\n

This will result in all paragraph tags with class \u2018className\u2019 to display red text.<\/p>\n

There are numerous CSS properties that you can choose from to create magical designs. Below is a list of all the ones that are used most frequently.[\/vc_column_text][vc_raw_html]JTVCdGFibGUlMjBpZCUzRDMlMjAlMkYlNUQ=[\/vc_raw_html][vc_column_text]You can find the entire list here<\/a><\/span>. You can use these CSS properties to tweak all the elements that you added to your header.<\/p>\n

So now you know how to create custom headers in WordPress. But it’s not this tough to edit and customize headers. Though these approaches provide a tremendous amount of freedom in terms of creativity, writing code for customizing headers might be a cumbersome task for some people.<\/p>\n

However, by now, you know that the industry of plugins helping to develop and manage WordPress assets is humongous. Hence, there a ton of WordPress plugins that you can integrate to create custom headers.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=”Plugins to the blogger\u2019s rescue” use_theme_fonts=”yes”][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=”Open Source Frameworks” use_theme_fonts=”yes”][vc_column_text]There are a couple of frameworks like Materialize<\/a><\/span> by Google and Bootstrap<\/a><\/span> by Twitter that offers open-source codes for headers and other elements of a webpage. The frameworks provide elements like sliders and animations. With a little more knowledge of web-development, once can use these frameworks to develop extraordinary websites.<\/p>\n

There are two ways of integrating these frameworks. You can either link them through a CDN link, or you can upload their files on your directory and call them on your HTML code. I would suggest you do the latter as the former results in increased load time.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=”What do the best players do?” use_theme_fonts=”yes”][vc_column_text]There are practices that the best website developers have in common. Some of them are listed below:<\/p>\n

Image type: When using still images, vectors, i.e., pictures editable by Adobe Illustrator, can be a better choice than stock images. This will give you an edge as these are small in size and don’t pixelate on any scale.<\/p>\n

GIFs over Video: If a video that you\u2019re uploading or linking can be replaced by a gif developed with a set of pictures, it is always preferred to use gifs. This is results in less space consumption and reduced load time.<\/p>\n

Context-based media: Yes, I’m sure that the stars and moons are lovely. But does it make sense to have their pictures on your website if you’re not selling land in space?<\/p>\n

Summary<\/strong>
\nA header is one of the essential elements of your webpage. Hence, if you host a website on WordPress, you should know how to customize headers in WordPress.<\/p>\n

There are numerous ways to do this, as you read. Most people who don’t understand code use premium plugins. But we would encourage people with a little understanding of code to try and understand frameworks offered by Google and Twitter.<\/p>\n

Always remember that your header should always be sophisticated and be able to serve some purpose and not just be present there for the sake of displaying pictures and pop-ups[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Last updated on September 23rd, 2021 at 12:47 pm[vc_row][vc_column][vc_empty_space][vc_column_text]This is a screenshot of our beloved website, WordPress. The first thing …<\/p>\n","protected":false},"author":2,"featured_media":7993,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[350,1096],"tags":[1155,1154,1157,1156],"class_list":["post-7978","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to-wordpress","category-wordpress","tag-customize-headers","tag-customize-headers-in-wordpress","tag-customizing-headers-in-wordpress","tag-types-of-headers"],"yoast_head":"\nHow to Customize Headers in WordPress | 24x7 WP Support<\/title>\n<meta name=\"description\" content=\"Learn how to customize headers in WordPress.Follow our guide and see how to add & Edit image, video, widget or social icons using plugins & custom code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Customize Headers in WordPress | 24x7 WP Support\" \/>\n<meta property=\"og:description\" content=\"Learn how to customize headers in WordPress.Follow our guide and see how to add & Edit image, video, widget or social icons using plugins & custom code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/\" \/>\n<meta property=\"og:site_name\" content=\"24x7WPSupport Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/24x7wpsupport\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-14T10:35:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-23T12:47:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Headers-in-WordPress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Dev\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpsupport24x7\" \/>\n<meta name=\"twitter:site\" content=\"@wpsupport24x7\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dev\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/\"},\"author\":{\"name\":\"Dev\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#\\\/schema\\\/person\\\/e6415d472a2e6bbe2a01279a0224f4d4\"},\"headline\":\"How to Customize Headers in WordPress Using Plugins and Custom Code?\",\"datePublished\":\"2020-01-14T10:35:06+00:00\",\"dateModified\":\"2021-09-23T12:47:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/\"},\"wordCount\":2670,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/Customize-Headers-in-WordPress.jpg\",\"keywords\":[\"Customize Headers\",\"Customize Headers in WordPress\",\"Customizing headers in WordPress\",\"Types of Headers\"],\"articleSection\":[\"How To Wordpress\",\"WordPress\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/\",\"url\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/\",\"name\":\"How to Customize Headers in WordPress | 24x7 WP Support\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/Customize-Headers-in-WordPress.jpg\",\"datePublished\":\"2020-01-14T10:35:06+00:00\",\"dateModified\":\"2021-09-23T12:47:54+00:00\",\"description\":\"Learn how to customize headers in WordPress.Follow our guide and see how to add & Edit image, video, widget or social icons using plugins & custom code.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/Customize-Headers-in-WordPress.jpg\",\"contentUrl\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/Customize-Headers-in-WordPress.jpg\",\"width\":1200,\"height\":600,\"caption\":\"Customize Headers in WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Customize Headers in WordPress Using Plugins and Custom Code?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/\",\"name\":\"24x7WPSupport Blog\",\"description\":\"WordPress Theme Update | WordPress Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#organization\",\"name\":\"24x7 WP Support\",\"url\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/wpsupportlatestlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/wpsupportlatestlogo.png\",\"width\":269,\"height\":64,\"caption\":\"24x7 WP Support\"},\"image\":{\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/24x7wpsupport\",\"https:\\\/\\\/x.com\\\/wpsupport24x7\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.24x7wpsupport.com\\\/blog\\\/#\\\/schema\\\/person\\\/e6415d472a2e6bbe2a01279a0224f4d4\",\"name\":\"Dev\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2279ad7c06143ec3d9993f3a47410189667d39a1d3d3ba17932e370f594894df?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2279ad7c06143ec3d9993f3a47410189667d39a1d3d3ba17932e370f594894df?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2279ad7c06143ec3d9993f3a47410189667d39a1d3d3ba17932e370f594894df?s=96&d=mm&r=g\",\"caption\":\"Dev\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Customize Headers in WordPress | 24x7 WP Support","description":"Learn how to customize headers in WordPress.Follow our guide and see how to add & Edit image, video, widget or social icons using plugins & custom code.","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:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/","og_locale":"en_GB","og_type":"article","og_title":"How to Customize Headers in WordPress | 24x7 WP Support","og_description":"Learn how to customize headers in WordPress.Follow our guide and see how to add & Edit image, video, widget or social icons using plugins & custom code.","og_url":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/","og_site_name":"24x7WPSupport Blog","article_publisher":"https:\/\/www.facebook.com\/24x7wpsupport","article_published_time":"2020-01-14T10:35:06+00:00","article_modified_time":"2021-09-23T12:47:54+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Headers-in-WordPress.jpg","type":"image\/jpeg"}],"author":"Dev","twitter_card":"summary_large_image","twitter_creator":"@wpsupport24x7","twitter_site":"@wpsupport24x7","twitter_misc":{"Written by":"Dev","Estimated reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/#article","isPartOf":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/"},"author":{"name":"Dev","@id":"https:\/\/www.24x7wpsupport.com\/blog\/#\/schema\/person\/e6415d472a2e6bbe2a01279a0224f4d4"},"headline":"How to Customize Headers in WordPress Using Plugins and Custom Code?","datePublished":"2020-01-14T10:35:06+00:00","dateModified":"2021-09-23T12:47:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/"},"wordCount":2670,"commentCount":0,"publisher":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/#primaryimage"},"thumbnailUrl":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Headers-in-WordPress.jpg","keywords":["Customize Headers","Customize Headers in WordPress","Customizing headers in WordPress","Types of Headers"],"articleSection":["How To Wordpress","WordPress"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/","url":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/","name":"How to Customize Headers in WordPress | 24x7 WP Support","isPartOf":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/#primaryimage"},"image":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/#primaryimage"},"thumbnailUrl":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Headers-in-WordPress.jpg","datePublished":"2020-01-14T10:35:06+00:00","dateModified":"2021-09-23T12:47:54+00:00","description":"Learn how to customize headers in WordPress.Follow our guide and see how to add & Edit image, video, widget or social icons using plugins & custom code.","breadcrumb":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/#primaryimage","url":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Headers-in-WordPress.jpg","contentUrl":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Headers-in-WordPress.jpg","width":1200,"height":600,"caption":"Customize Headers in WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/www.24x7wpsupport.com\/blog\/how-to-customize-headers-in-wordpress-using-plugins-and-custom-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.24x7wpsupport.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Customize Headers in WordPress Using Plugins and Custom Code?"}]},{"@type":"WebSite","@id":"https:\/\/www.24x7wpsupport.com\/blog\/#website","url":"https:\/\/www.24x7wpsupport.com\/blog\/","name":"24x7WPSupport Blog","description":"WordPress Theme Update | WordPress Blog","publisher":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.24x7wpsupport.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/www.24x7wpsupport.com\/blog\/#organization","name":"24x7 WP Support","url":"https:\/\/www.24x7wpsupport.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.24x7wpsupport.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2018\/11\/wpsupportlatestlogo.png","contentUrl":"https:\/\/www.24x7wpsupport.com\/blog\/wp-content\/uploads\/2018\/11\/wpsupportlatestlogo.png","width":269,"height":64,"caption":"24x7 WP Support"},"image":{"@id":"https:\/\/www.24x7wpsupport.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/24x7wpsupport","https:\/\/x.com\/wpsupport24x7"]},{"@type":"Person","@id":"https:\/\/www.24x7wpsupport.com\/blog\/#\/schema\/person\/e6415d472a2e6bbe2a01279a0224f4d4","name":"Dev","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/2279ad7c06143ec3d9993f3a47410189667d39a1d3d3ba17932e370f594894df?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2279ad7c06143ec3d9993f3a47410189667d39a1d3d3ba17932e370f594894df?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2279ad7c06143ec3d9993f3a47410189667d39a1d3d3ba17932e370f594894df?s=96&d=mm&r=g","caption":"Dev"}}]}},"_links":{"self":[{"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/posts\/7978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/comments?post=7978"}],"version-history":[{"count":8,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/posts\/7978\/revisions"}],"predecessor-version":[{"id":11022,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/posts\/7978\/revisions\/11022"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/media\/7993"}],"wp:attachment":[{"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/media?parent=7978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/categories?post=7978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.24x7wpsupport.com\/blog\/wp-json\/wp\/v2\/tags?post=7978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}