• Home
  • Fetch the WordPress header outside the loop (embed plugins & shortcodes)

    Easy to follow guide (allow a few hours for the first instance) to use WordPress PHP shortcodes outside of the WordPress loop environment. This will allow you to modify a static web page (or sitewide) 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 initialize the basic core WordPress environment, it is what allows to add custom functionality 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 the embedded script/plugin in its 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 the 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 into the PHP file.

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

    If the styling and functionality are still incomplete, double-check the asset files and in-line CSS are being called correctly. It might not work in 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 the 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 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 an email subscription list by embedding the sign-up into a page using a shortcode
    • You're a web developer and your 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 into a static PHP page
    • Speed up highest value web pages (Build super-fast pages without WordPress bloat, call in barebones functionality)
    • Call in the WordPress Loop to build content snippets
    Those are some examples of why you would choose to embed the WordPress plugin's functionality into 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 in touch.
     

    New Posts