WordPress : Add header code for a specific page without plugin

There may be a requirement when you would like to place header code consisting of scripts or meta tags to appear on site header for a particular page only and not on all pages.

Two Methods will be described in this article showing how to do that without a plugin, step by step.

Method 2 is easier, but Method 1 demonstrates a beautiful WordPress concept,so I will show that first

Method 1 : Using Page Templates

Step 1

Create a new page template in your theme folder or the child theme if you are using a child theme.

Step 2

In the new page template you have created replace

get_header();

with this

get_header('my-custom-header');

Step 3

Navigate to your theme’s folder using a ftp client.Download the file header.php.

Rename this file to

header-my-custom-header.php

Everything that appears after the dash following the word header is as per the name you have set within the inverted commas ‘ ‘ in step 2.

Step 4

Now to make your desired header code appear in only specific page and not on all pages you will need to add some code to the header-my-custom-header.php file.

Open the file for editing in a text editor.

Locate the line which adds wp_head to the header.Add the following code above that line ( This code is just an example ,it adds a script to the header ,you will need to replace the script or add meta tags or any other code you desire.

<?php //jmod
			global $post;
			if($post->post_type == 'page' && $post->ID == '295'){
			   ?>
			   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
				<script>
				$(document).ready(function(){
				   
				   $('#web-content').load("https://mysite.net/web/index.html#/");

				});
				</script>
			   <?php
			}
			?>
		<?php wp_head(); ?>

Line 16 is for reference only ,don’t copy that,use the code above that line.

Now replace the post ID in line 3 with the ID of the page you are targeting.

You can find the ID of the page by going to WordPress Admin area -> Settings -> Pages -> All Pages. Then hover the mouse over the page title of your desired page and the numeric ID of the page can be found from a link that pops up on the bottom left above the task bar.

You will need to replace line 5 to 12 with the code you want to appear in the header for the specific page you are targeting.

Step 5

Save the file header-my-custom-header.php and upload it to your server by ftp to the theme folder or to the child theme folder if you are using a child theme.

Step 6

Open the page you are wanting to place the header code on, for editing. From the right margin on the editor change the page template to the name of the template you created in Step 1

Your header code will now show only on the desired page and not on all pages.

Method 2 : Adding Code to functions.php of the theme

In this method we shall hook additional code to the WordPress header.Place the code below in your theme’s or child theme’s functions.php file.

Remember to replace the page ID in line 3 with your page ID (Method to find page ID is described in Method 1- Step 4.

Also replace script code from line 5 to line 22 with your own code that you want to place in the header for that specific page.

function hook_addl_header_elements_for_my_specific_page() {
	global $post; 
	if ($post->ID == 295){
	?>
	<script type="text/javascript">

	(function () {
		var timeLeft = 5,
			cinterval;

		var timeDec = function (){
			timeLeft--;
			document.getElementById('countdown').innerHTML = timeLeft;
			if(timeLeft === 0){
				clearInterval(cinterval);
			}
		};

		cinterval = setInterval(timeDec, 1000);
	})();

	</script>
	
	<?php
	}
}
add_action('wp_head', 'hook_addl_header_elements_for_my_specific_page');

That is all.

If you liked this article please do leave a reply and share it with friends.

Thanks.