27

I'm creating a child theme for the first time and I had a few questions regarding code added to header.

In a non child theme there is certain code I add to my header.php file such as google analytics, google webmaster tools, buy sell ads, Facebook open graph, etc....

How do you do this in a child theme? Do you create a header.php file in your child theme? If so how is this done? Is it the same as the @import as I used on the css?

Thanks.

Improve this question

3 Answers 3

Reset to default
33

I would hook into the wp_head action. I would place this in a plugin so as to abstract it from your presentation layer. This allows for scalability and changing of themes. This also prevents any analytics collateral damage if a step is missed in migration from one theme to the next.

add_action('wp_head', 'wpse_43672_wp_head'); function wpse_43672_wp_head(){ //Close PHP tags ?> ADD YOUR PLAIN HTML CODE HERE <?php //Open PHP tags }
Improve this answer
18
  • 1
    Thanks. I don't have any experience in making a plug in. I have about 5 pieces of code I'd like to add into the header. Would I need to make a plug in for each of them? Commented Feb 27, 2012 at 16:26
  • @RickSmith I added the plugin format to the post above Commented Feb 27, 2012 at 16:35
  • 4
    Whether using a Parent Theme, Child Theme, or any Theme whatsoever, the correct approach is to put such code in a callback, hooked into the appropriate action hook. You could put this code in the Theme's functions.php file, or, even better and as Brian has suggested, put it in a site-specific Plugin. Commented Feb 27, 2012 at 17:33
  • @BrianFegter Thanks so much. Working with Php / child themes is new to me, so I"m learning as I go. Thanks for your patience. :) In my old theme, I went into wordpress admin, than to the editor and added this to the header. <meta property="fb:page_id" content="12345678" /> Is the better way to add all of that to the plug in? Commented Feb 27, 2012 at 18:10
  • @RickSmith No problem. That's why this forum exists. :) Commented Feb 27, 2012 at 18:10
7

Adding a Code Snippet

HTML

If you want to add a code snippet e.g. a meta tag etc to the <head>, then you should use the wp_head action:

add_action( 'wp_head', 'wpse_43672_wp_head' ); function wpse_43672_wp_head() : void { ?> <meta ..... /> <?php }

There are also admin_head and wp_footer

Javascript & CSS

You could use the above code to also add Javascript, but instead custom JS should be enqueued as a JS file, or, included as inline JS via wp_add_inline_script attached to an existing enqueued JS handle.

https://developer.wordpress.org/reference/functions/wp_add_inline_script/

This is also true of CSS, which has wp_add_inline_style https://developer.wordpress.org/reference/functions/wp_add_inline_style/

Modifying the Sites Header

Note that once you do this, you will not see changes made in the parent theme when it updates for those files that you override and modify.

In A Block Theme

If your theme is a block theme then you can do this by going to the site editor and making changes in the Admin area.

In a Classic Theme

If your site is a classic PHP theme, then you can use a child theme.

To modify the header in a child theme, copy the file header.php from the parent theme into the child theme and then modify it. WordPress will see that you have a header.php in your child theme and use that instead of the parent theme header.php

Any template files you put in your child theme will take priority over the same file in the parent theme when called by WordPress.

Anything that goes in the <head> tag should be done using something such as the function in Brians answer. If it's theme specific, you can put it in a file called functions.php in your theme folder without any extra steps.

Improve this answer
5
  • Tom, thanks. So if I need to install 5 different snips of code in the header.php, could I just make one plugin and install that? Would I still need to copy the header.php file into my child theme? Commented Feb 27, 2012 at 17:58
  • 1
    Yes there is no reason to make 5 plugins Commented Feb 27, 2012 at 17:59
  • @RickSmith If you are abstracting to a plugin, there's no reason to copy over header.php. :) Commented Feb 27, 2012 at 18:16
  • 3
    The problem with this solution is that when the theme is updated, you will miss out on fixes in header.php made by the author. Commented Feb 24, 2016 at 7:32
  • does WordPress override the whole file, or is it just appending new content to the parent file? Commented May 31, 2020 at 8:44
2

Thanks to Brian Fegter. If this answer helps, please rate for Brian's answer right here above.

This is a fully functional example of how to add things to the "header" by its own plugin. In this case, I am adding the properties of Facebook Open Graph for the Share and Like buttons.

Just create a PHP file with the name specified in "Plugin Script" at the beginning of the sample code, place it in a folder with the same name without the extension, obviously, and copy this folder to the destination "/ wp-content / plugins".

Then within "Wordpress", refresh "Plugins" and you'll see your new plugin installed. Just Activate it, and your pages will begin to contain the metadata of Open Graph Facebook and Twitter.

enter image description here

VERY IMPORTANT: The PHP file must be encoded in UTF-8 without BOM, and should have absolutely no character at the end. Must ensure this.

<?php /* Plugin Name: My Facebook Open Graph Protocol Plugin Script: my-facebook-open-graph-protocol.php Plugin URI: Description: Add Facebook Open Graph Protocol to header Author: Diego Soto (Thanks to Brian Fegter) Donate Link: License: GPL Version: 0.1-alpha Author URI: https://wordpress.stackexchange.com/questions/43672/how-to-add-code-to-header-php-in-a-child-theme Text Domain: myfogp Domain Path: languages/ */ /* Copyright 2014 Diego Soto (http://disientoconusted.blogspot.com.ar/) This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA */ add_action('wp_head', 'wpse_43672_wp_head'); function wpse_43672_wp_head(){ $title = get_the_title() ." &lsaquo; ". get_bloginfo( "name", "display" ); $src = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), array( 90,55 ), false, "" ); $face_metad = get_post_meta(get_the_ID(), "metadescription", true); $twitter_metad = get_post_meta(get_the_ID(), "metadescription140", true); if (empty($twitter_metad)) $twitter_metad = $face_metad; //Close PHP tags ?> <meta property="og:title" content="<?php echo esc_attr($title); ?>" /> <meta property="og:image" content="<?php echo esc_attr($src[0]); ?>" /> <meta property="og:url" content="<?php the_permalink(); ?>" /> <meta property="og:description" content="<?php if (!empty($face_metad)) echo esc_attr($face_metad); else the_excerpt(); ?>" /> <meta name="twitter:title" content="<?php echo esc_attr($title); ?>" /> <meta name="twitter:image" content="<?php echo esc_attr($src[0]); ?>" /> <meta name="twitter:url" content="<?php the_permalink(); ?>" /> <meta name="twitter:description" content="<?php if (!empty($twitter_metad)) echo esc_attr($twitter_metad); else the_excerpt(); ?>" /> <?php //Open PHP tags } ?>

Anyone who is interested in the functionality of the plugin.

  • The title will be the concatenation of the name of the current page and the site name.

  • If a custom field called "metadescription" exists, the plugin tries to take the description from this field. Otherwise, take the description from the excerpt.

  • As the image, the plugin tries to use the thumbnail of the featured image on the page.

Improve this answer
2
  • 2
    Please use esc_attr() for the HTML attribute contents. Commented Aug 14, 2014 at 0:27
  • I modified to use esc_attr() as you told me. Thank you. Commented Aug 14, 2014 at 4:19

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.