Insert Codes to WordPress Header and Footer Through functions.php

The overall idea is to add codes and scripts between header tags and between footer tags for any WordPress website. In case you want to add Analytics code, google Adsense script directly into the theme functions, you can use this method. If you don’t want to hardcode everything, just use any Insert Header and Footer Plugin.

Added codes will show inside <head> and </head> tags in case of Header. Similarly,

Added codes will show inside <footer> and </footer> tags in case of Footer.

It is important to read the instructions below to avoid PHP conflicts. We always recommend not to add codes directly into functions.php and use the plugin Code Snippets for such activities. The plugin also gives you the benefit to disable codes instead of deleting or commenting.

Adding Codes to Header

To add codes/scripts to the header, use the below code. Replace Line 5 with your content.

/* Name The Header Code Here. Also Change Function Name Below */
add_action('wp_head', 'wpclimax_header_function_01');
function wpclimax_header_function_01(){
?>
<CONTENT/CODE/SCRIPT/LINK That goes to Header>
<?php
};

To add codes/scripts to the footer, in the below code, replace Line 5 with your script.

/* Name The Footer Code Here. Also Change Function Name Below */
add_action('wp_footer', 'wpclimax_footer_function_01');
function wpclimax_footer_function_01(){
?>
<CONTENT/CODE/SCRIPT/LINK That goes to Footer>
<?php
};

Alternative Code

You can also use this method to add codes to functions.php. This will also work fine.

/* Name The Header Code Here. Also Change Function Name Below */
add_action('wp_head', 'wpclimax_header_function2_01');
function wpclimax_header_function2_01(){
echo '<CONTENT/CODE/SCRIPT/LINK That goes to Header>';
}

/* Name The Footer Code Here. Also Change Function Name Below */
add_action('wp_footer', 'wpclimax_footer_function2_01');
function wpclimax_footer_function2_01(){
echo '<CONTENT/CODE/SCRIPT/LINK That goes to Footer>';
}

Instructions

The function names should be unique for each code you add. In above both cases, we continue changing numbers 01, 02, 03…..etc.

If the code is wrong or not within </> tags, it will show in the front end of the site (To your viewers) or can even break your site.

Some Examples

Adding Analytics Code

Google provides the content between Line 4-11. Or you can use the below code by replacing DUMMYCODE with your Analytics Tracking Code.

add_action('wp_head','wpclimax_ga_analytics', 20);
function wpclimax_ga_analytics() {
?>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DUMMYCODE"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-DUMMYCODE');
</script>
<?php
};

Browser Header Color

Below code adds Header Color for Android Chrome Browser. As of now, I didn’t find codes that go well with iOS. Let me know in the comments if you found one. Windows Phone OS is extinct now.

add_action('wp_head', 'wpclimax_header_function_header_color');
function wpclimax_header_function_header_color(){
?>
<meta name="theme-color" content="#7cfc00" />
<?php
};

Adding Favicon

Sometimes, google won’t fetch site icon from your WordPress site if any SEO plugins are not installed. You can show your Favicon to google by adding the below code to the header. If your theme has already added Favicon, just search for ‘shortcut icon’ in the source code.

add_action('wp_head', 'wpclimax_header_function_favicon');
function wpclimax_header_function_favicon(){
?>
<link rel="shortcut icon" href="/path/to/favicon.ico">
<?php
};

WordPress Conditional Tags

When you add codes to your theme’s ‘functions.php‘ file, or manually or through a Plugin, you might have observed that when you check the Source Code of the page, the code you added is applicable/ displaying everywhere on the website.

I mean, when you check the source code of any page of the site, the code is present. What if you don’t want that to happen and want to display codes on specific pages? Well, here is the answer.

This is possible through WordPress conditional tags. When using any conditional tag, the PHP looks like this. We only need to modify line 4. Replace the word CONDITION with WordPress Conditional Tags. Some examples are shown below.

/* Name The Header/Footer Code Here. Replace the correct conditional tag */
add_action('wp_head', 'wpclimax_header_function_condition_01');
function wpclimax_header_function_condition_01(){
if(CONDITION) { ?>
<CONTENT/CODE/SCRIPT/LINK That goes to Header/Footer>
<?php }
};

Generally Used WordPress Conditional Tags

is_home()Not Front-Page. Applies to All Post Archive Page (All Categories Included)
is_front_page()Applies to Front-Page. It can be Custom Page or Post Archive Page
is_singular()Applies to Single Page, Single Post and Single Attachment
is_single()Applies to Single Posts. (Not Pages)
is_single( ’13’ )Applies to One Single Post with Page ID 13
is_page()Applies to Single Pages. (Not Posts)
is_page( ’21’ )Applies to One Single Page with Page ID 21
is_archive()All Archive Pages: Category, Tags, Author, Date etc.
is_category()Only Applies to Category Archives
is_category( ‘7’ ) Applies to Archive Page of Category with ID 9
is_tag() Only Applies to Category Archives
is_tag( ’10’ ) Applies to Archive Page of Tag with ID 10
is_search()Applies to Search Page
is_404()Applies to 404 Page
is_user_logged_in()Applies the Code if Someone is Logged In
is_paged()Applies to Paginated Pages. Ex:’/page/2/’

Google looks for and updates your favicon whenever it crawls your home page. Technically, it is enough if you add the favicon link only to the home page. Below is the code Google asks you to have in the header of your home page.

<link rel="shortcut icon" href="/path/to/favicon.ico">

You can use the below code to update your WordPress site’s Favicon. Remember to change the path. Google says that the path can be relative (as in the below code) or absolute (full URL). For me, the relative path didn’t work. Hence I used the absolute URL. Once done, check the source code of the home page. The <link> must reflect.

/* Adding Favicon Link only to the Home Page- wpclimax.com */
add_action('wp_head', 'wpclimax_header_function_condition_favicon');
function wpclimax_header_function_condition_favicon(){
if(is_front_page()) { ?>
<link rel="shortcut icon" href="http://wpclimax.com/favicon.png">
<?php }
};

No Index/ No Follow Test Page (If any)

This is important when you have some pages on your site which you don’t want to be indexed. If you are using any SEO plugin, you can do that. If you are like us, where we don’t use any SEO Plugins, here is the method we follow.

We have two pages on our site, Test Page and Test Post which we use for testing purposes ONLY. Hence we have disabled them from indexing on Search Results.

/* No Index, No Follow Our Test Page- wpclimax.com/test-page/ */
add_action('wp_head', 'wpclimax_header_function_condition_noindex');
function wpclimax_header_function_condition_noindex(){
if ( is_single( '1889' ) || is_page( '1887' ) ) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php }
};
/* You cannot use is_singular( 'id' ), as shortcut for both.  */
/* It needs Else condition (As per my research goes)*/
/* Blank is_singular() works without else condition */

Also, you can add a custom Meta Description for your Home Page. This works if you are not using any SEO Plugins. Because SEO Plugins will do that for you.

I have opengraph plugin installed. Even though it generates its own description, (also, when there is no excerpt) it doesn’t conflict with the custom description that I add. I have the very same code running on this site. Instead, of creating one more function for that, I added it to the same one where I have added the favicon link with another line (shown below) added.

<meta name="description" content="The Simplest Guide to WordPress & WooCommerce for Beginners. All about Improving Website Performance, Security and SEO, Without Plugins"/>

You can check my site:wpclimax.com. You will see this meta description I added above. ( If it isn’t showing, please let me know in the comments)

Please note that our product recommendations are unbiased and targetted to be user-friendly. If you have any recommendations which isn't listed on our site, please feel free to contact us. We would be happy to review it.

Hey Don't Worry! The Email entered will NOT be used for sending NewsLetters. We respect your Privacy 🙂

guest
0 Comments
Inline Feedbacks
View all comments