How to call the WordPress header outside the loop (embed plugins & shortcodes)

Sitebee

Freelance Technical SEO
Staff member
Easy to follow guide (allow a few hours for first instance) to use WordPress PHP shortcodes outside of the WordPress loop environment. This will allow you to modify a static web page (or sidewide) to call in dynamic functionality provided by popular WordPress plugins.

This guide assumes that you have Wordpress installed within a sub-folder within the site and that you have already identified what custom functionality (plugin) you require. Additional usages are given at the end of the guide.

node-wp.PNG


Initialize the WordPress environment
To start, we need to call the wp-blog-header.php, This is required to initilise the basic core WordPress environment, it is what allows to add custom functionailty anywhere within the page (header, sidebars, content section & the footer). Add the following snippet before the opening HTML on php web pages: (update the location to match the WordPress installation)

Code:
<?php
// exclude wordpress theme //
define( 'WP_USE_THEMES', false );
// call the wordpress header //
require($_SERVER['DOCUMENT_ROOT'] .'/wordpress/wp-blog-header.php');
?>

Add the shortcode snippet to the section of the webpage that you intend to add functionality. Here is the Wordpress php shortcode snippet:

Code:
<?php echo do_shortcode("[shortcode-goes-here]"); ?>

Save the php file, view the page in your web browser. Can you see embedded script/plugin in it's intended position on the page? That's a great start. Now comes the awkward, but totally doable part. Styling the damn thing.


Identify which asset files you may require
If the shortcode has functionality, such as forms, booking scripts, media galleries, etc. They will require styling. You can get the asset styling files by simply creating a Wordpress page or post, embed the standard shortcode in the page/post.

Save it and view look at the source view of that page. Identify which asset files and in-line CSS the plugin has added. You will require those styling assets. Tip* temporarily disable any speed asset bundling scripts for faster identification. Paste the asset files and in-line CSS in to the php file.

Save and view the page in your web browser. Are you seeing the correct style visualisations? Does the functionality work as intended? Great stuff, you've successfully added additionality functionality the website.

If the styling and fuctionality are still incomplete, double check the asset files and in-line CSS are being called correctly. It might not work on the first instance, it just takes a little tweaking to get it right.

Calling in the Wordpress head & theme assets
If you do require the Wordpress theme DOM head asset files, use this instead. Do be careful if you do, it could inject unwanted meta tags and override your existing canonical tag (mess with your SEO). Stick to the above method to play it safe. Proceed with caution if you do choose to call the Wordpress head assets.

Code:
<?php
// include wordpress theme //
define( 'WP_USE_THEMES', true );
// call the wordpress header //
require($_SERVER['DOCUMENT_ROOT'] .'/wordpress/wp-blog-header.php');
?>

If you require the JavaScript files located in the footer. Simply call in WordPress footer.

Code:
<?php get_footer(); ?>

Here is the Wordpress header, if you require it. (do not confuse with wp-blog-header.php, they are different)

Code:
<?php get_header(); ?>

Just be mindful that calling in the header and footer files will impact on your external page styling. You can quite easily get around it by incorporating the WordPress header and footer files as part of the page styling (that's if they match).

Usage for using Wordpress Shortcodes
I could give you dozens of reasons why, saving time and money are the obvious choices. For example your website is built around static PHP template files or the CMS that you are using does not have the extendable functionality that you require to deliver on the project.
  • Embed a booking or time-slot appointment script within a PHP page template - (very popular at the moment due to Covid-19)
  • Build a email subscription list by embedding the sign-up in to a page using a shortcode
  • You're a web developer and you client needs additional functionality on their website but doesn't have the budget for it (this takes a couple to a few hours)
  • Embed a gallery or a video script
  • Embed virtually any WordPress front-facing plugin in to a static PHP page
  • Speed up highest value web pages (Build super fast pages without WordPress bloat, call in barebones functionalty)
  • Call in the WordPress Loop to build content snippets
Those are some examples on why you would choose to embed WordPress plugin's functionality in to an almost static environment. It's not just static PHP template files that you could incorporate this method. You should in theory be able to get it to work with other PHP driven CMSes and Forum Scripts. I've been chipping away at getting WordPress and Xenforo to talk to each other to allow for Xenforo comments on a WordPress post.

Feel free to comment below. If you require a hack like this mentioned in this post, get it touch.
 
Last edited: