LiteSpeed is likely the fastest growing web server of the year for 2019. It provides a powerful caching engine with a robust WordPress plugin that can greatly speed up any WordPress site. It’s Edge Side Includes (ESI) are particularly cutting edge, allowing you to “punch holes” in a publicly-cached page, and then fill those holes with privately-cached content.
Although it is rather straightforward to turn WordPress shortcodes into ESI blocks and there is a helpful interface for turning WordPress widgets into ESI bocks, it’s not quite so easy to turn a WordPress menu into a LiteSpeed ESI block.
Thankfully, with a little help from the LiteSpeed Wiki article on Third Party Plugin Integrations and a perusal of their ESI blocks code samples, I was able to create a not-too-complicated function to fill this very need!
Let’s assume my WordPress theme is using the standard wp_nav_menu() function to insert a menu with the ID of “menu-id-to-replace” into a header template. The following code in your theme’s functions.php file would turn that menu into an ESI block, privately cached for each unique website visitor.
The basic logic goes like this: If WordPress is building a regular page (not an individual ESI block), use the wp_nav_menu() filter to override the normal output of the “menu-id-to-replace” menu and instead insert the contents of the “my_custom_menu_esi_hook” block. If WordPress is building the “my_custom_menu_esi_hook” block, we insert the code to display the wp_nav_menu “menu-id-to-replace”.
To take this a step further, I created the following WordPress plugin that will privately cache the Divi theme’s primary and secondary navigation menus as LiteSpeed ESI blocks. Check it out!
Great article! Thank you!
Could you please describe what the purpose would be to turn the WordPress Menu to LiteSpeed ESI, for us noobs? 😀
Will it improve performance? What are the benefits?
Thank you so much!
Great question, Daniel! Turning the menu into an ESI block would allow it to display differently for different users on a cached page.
For example, let’s say you wanted to use the popular “Nav Menu Roles” plugin (https://wordpress.org/plugins/nav-menu-roles/) to adjust the menu items that appear for various users based on their role. Unfortunately, once the page is cached on a site with LiteSpeed ESI enabled, the menu will appear the same for everyone even if they have different roles. However, by turning the menu into an ESI block, the page will remain cached but the menu will then be dynamically built for each user!
Hello,
I am not good at php. Can you help me on this?
I use post views counter plugin by dFactory. In amp page I am using this code: do_shortcode(‘[post-views]’);
As it is amp page, only php counter method works.
I installed litespeed cache plugin and now post views is not updating. I just want this to be non cached.
How can I do this?
Hi Robert,
Is the bloew hook working for atest wordpress plugin and Latest lite speed plugin.
add_action( ‘init’, function() {
if ( method_exists( ‘LiteSpeed_Cache_API’, ‘esi_enabled’ ) && LiteSpeed_Cache_API::esi_enabled() ) {
LiteSpeed_Cache_API::hook_tpl_not_esi( function () { …
I used it 1 of my website but it didn’t work.
Please advise
Thanks