For a wide variety of reasons, it\u2019s possible that at some point you will want or need to add code to your WordPress site\u2019s header or footer. Unfortunately, the platform doesn\u2019t provide a simple or straightforward way to do this out of the box.<\/p>\n\n\n\n
The good news is that you can easily remedy this with the help of a child theme and your functions.php <\/em>file, or a WordPress plugin. Whichever method you choose, you\u2019ll be able to easily enhance your site with custom features, user data, and performance-boosting strategies.<\/p>\n\n\n\n In this post, we’ll explain a few cases in which you might need or want to add code to your WordPress site’s header and footer. Then we’ll share step-by-step instructions for two methods that enable you to edit these elements to create a custom header or footer. Let’s get started!<\/p>\n\n\n\n\n\n The reasons you may want to edit your WordPress header or footer are many and varied. Probably the most obvious is that sometimes you want to style your site through the use of custom code, and need a way to add this code to your header and\/or footer.<\/p>\n\n\n\n However, these are also prime locations for tracking codes, such as the one used for Google Analytics. These codes can provide valuable information on user behavior to enhance your marketing and content strategies.<\/p>\n\n\n\n Additionally, WordPress does not include meta tags<\/a> by default. These are added to your site\u2019s header to help search engines crawl your pages. Though they\u2019re not as relevant now<\/a> as they used to be, there\u2019s no harm in adding them to your header \u2013 they can only help your site\u2019s visibility.<\/p>\n\n\n\n Lastly, you may be familiar with the practice of moving render-blocking JavaScript<\/a> \u2018below the fold\u2019. This typically means adding it to your WordPress footer, which will require editing its code. This technique can help improve your site\u2019s performance by decreasing loading times.<\/p>\n\n\n\n There are two primary methods for adding code to your WordPress header or footer. The first is to manually edit your site\u2019s theme, and the second is to use a plugin. Though manually editing your theme\u2019s files is more risky and difficult, for some more advanced users it\u2019s the preferred method.<\/p>\n\n\n\n Manually adding code to your WordPress header or footer involves editing some of your theme\u2019s files. When you have to do this, it\u2019s always wise to edit a child theme<\/a> instead of messing with your parent theme\u2019s files directly. This way, you can avoid losing your changes when you update your theme.<\/p>\n\n\n\n Fortunately, the process to create a child theme<\/a> manually is pretty simple, and you can access the WordPress tutorials you’ll need to customize headers. However, if you need to create a child theme in a pinch, a theme builder plugin such as Child Theme Configurator<\/a> can help.<\/p>\n\n\n\n With a theme builder plugin you can easily generate a child theme with the click of a button, although the fully manual approach could be just as quick once you have the method down.<\/p>\n\n\n\n Once your child theme is set up, you\u2019ll need to access and edit its functions.php<\/em> file. Before you start, it\u2019s always wise to back up your site, just in case you make any mistakes and want to easily restore to a previous state.<\/p>\n\n\n\n The usual way to edit your functions.php <\/em>file is via File Transfer Protocol (FTP)<\/a> and an FTP client such as FileZilla<\/a>. However, you can also edit certain files from your WordPress dashboard. To access it, navigate to Appearance > Theme Editor<\/em>.<\/p>\n\n\n\n You\u2019ll receive a warning<\/a> that you\u2019re about to edit your theme\u2019s files \u2013 click the I Understand<\/em> button to proceed. Next you\u2019ll want to make sure you have the correct file selected. In the sidebar to the right of the site editor, make sure Theme Functions (functions.php) <\/em>is selected.<\/p>\n\n\n\n Now you can add your custom code at the end of this file, and click on Update File <\/em>when you\u2019re finished.<\/p>\n\n\n\n While in some cases it may be easier to manually edit your WordPress theme\u2019s files to add code to your footer or header section, using a plugin is usually the safer route. For the purposes of this article, we\u2019ll be using one of the most popular and highly rated plugins for the task, Header, Footer and Post Injections<\/a>.<\/p>\n\n\n\n However, there are many plugins available in the WordPress Plugin Directory<\/a> and elsewhere that can help with this task. <\/p>\n\n\n\n For starters, you\u2019ll need to install and activate<\/a> the plugin you wish to use. You can do this by downloading the plugin\u2019s .zip<\/em> file from the Plugin Directory or another online marketplace and then uploading it to your site. Alternatively, navigate to Plugins > Add New<\/em> in your dashboard.<\/p>\n\n\n\n Here you can search for the footer or header plugin you wish to use. Whichever method you choose, you\u2019ll finish this step by clicking on the Install<\/em> button, then Activate<\/em> when the option is presented.<\/p>\n\n\n\n Once the plugin is installed, you should be able to navigate to Settings > Header and Footer<\/em> in your dashboard.<\/p>\n\n\n\n Here you\u2019ll find a text editor for adding code snippets \u2013 such as a Google Analytics tracking code or custom JavaScript \u2013 you wish to include in your header and\/or footer.<\/p>\n\n\n\n There\u2019s a lot you can accomplish on this page. In the first two fields you can add code to your header section. The left-hand field adds the code to every page on your site \u2013 this is useful for Google Analytics, for example. The right-hand field will add the code only to your home page.<\/p>\n\n\n\n The next fields add code to the body and footer code of your pages. The fields on the left are for desktop viewing, while the ones on the right are for mobile versions of your code. Once you\u2019re done editing, don\u2019t forget to click on the Save<\/em> button at the bottom of the screen.<\/p>\n\n\n\n There’s no doubt you want your WordPress website to provide a top notch digital experience to your users. Adding code to your WordPress footer or header is a useful tactic for customizing your site, implementing Google Analytics, or improving performance.<\/p>\n\n\n\n At WP Engine, we serve developers, from our top-notch WordPress hosting<\/a> to the wide variety of developer resources<\/a> that can help you take your WordPress website\u2019s experience to new heights. Check them out today! For a wide variety of reasons, it\u2019s possible that at some point you will want or need to add code to your WordPress site\u2019s header or footer. Unfortunately, the platform doesn\u2019t provide a simple or straightforward way to do this out of the box. The good news is that you can easily remedy this with…<\/span><\/span><\/p>\n","protected":false},"author":297,"featured_media":131704,"template":"","resource-topic":[913,904,912,910,901],"resource-role":[895,896,897],"resource-type":[916],"class_list":["post-86231","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nWhy Edit Your WordPress Header and Footer Code?<\/h2>\n\n\n\n
How to Add Code to Your WordPress Header or Footer Manually (In 2 Steps)<\/h2>\n\n\n\n
Step 1: Create a Child Theme<\/h3>\n\n\n\n
Step 2: Edit Your Child Theme\u2019s functions.php<\/em> File<\/h3>\n\n\n\n
How to Add Code to Your WordPress Header or Footer With a Plugin (In 2 Steps)<\/h2>\n\n\n\n
Step 1: Install and Activate Your Plugin of Choice<\/h3>\n\n\n\n
Step 2: Add Your Code Snippets to Header, Footer and Post Injections<\/h3>\n\n\n\n
Improve Your Site\u2019s Experience With WP Engine<\/h2>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"