If you have a WordPress admin page that takes too long to open due to a list of some type or any other content that takes longer to load than you’d like, this solution might be for you.
In my case, I had an admin page for a plugin I’ve been working on a lot lately that has a list of members from another webpage that takes a while to load. What I did was separated that content that fetches the list into another file and placed a link on the page that lets you load the content after the rest of the page has loaded and only if you need to because a lot of the time people aren’t going to need or even want to see that content. Other times they will want to load it and they can now and it won’t take forever to load because the rest of the page already loaded and you only have to wait for that specific content to load, thus making the site much more pleasant to work with…
In case anyone is interested that plugin is named Follow Hook, and it adds CRM features to any WordPress site and we just listed it on wordpress.org! Just search for “Follow Hook” and it will come right up.
How To Load Content On-Demand
- First, as I mentioned above, you separate the code for just the feature you want to load separately. In my case it was a list of MailChimp subscribers, but it could be any content really. In my case I named my file MC_list_members.php, but you can name yours whatever seems appropriate, just make sure you use the same name below in step 3 where you see the filename in green.
- Then you put a link on the admin page you had originally that looks like this: <p><a href=”<?php echo $puri; ?>” target=”hifrm”>View MailChimp Subscribers</a></p>
- As you see I have a variable named $puri in the code above and that is going to need to be defined somewhere above where you placed the link. It is the URL of the page that you put your separate code in for the feature you wish to load on demand. In my case I am working on a plugin named Follow Hook so I would use something like this: <?php $puri = plugins_url(‘MC_list_members.php’, __FILE__); ?>
- Then finally, you add your iFrame HTML like this: <iframe id=”hifrm” name=”hifrm” src=”” width=”100%” height=”100%”>Please view this page in a modern browser like Firefox to be able to view this content!</iframe>
Please take note of the name attribute in the iFrame tag because that is what you have to set the target attribute in your link tag too! That is what sends the file with your content in it to the iFrame element on demand and it won’t load until you click the link! Perfect!