The way a WordPress website functions is just as important as how it looks, providing easy access to viewing more content in a seamless way can help improve the overall user experience. Loading more posts via jQuery helps provide a smooth transition and gives easy access to more content that will help the end user quickly find an article of interest. In this tutorial we will teach you how to easily load more posts on your WordPress website or blog utilizing the built in more post linking navigation and jQuery.
Step 1: Setting up the WordPress Post Loop Structure
In the first step we will need to set up the basic WordPress post loop and html structure.
PHP
Items to Note:
- This is just an example on how to set up the structure, you may need to modify and adapt this structure to fit your needs.
- Since this is just a basic example on how to set up the structure, we are not providing any CSS; you will need to style this according to your needs.
- The ID of the post container (#posts) and the CLASS of the posts (.post) are important to note during Step 3 when referencing them with jQuery.
Hello, We have a server in China, and all of resource from Google are blocked by Chinese government firewall. But, the Jquery and Fonts resources are loaded from Google on WordPress by default now, and the site is caused seriously delay.
Step 2: Creating the WordPress More Posts Navigation
These days, WordPress automatically loads jQuery for you, whenever some other script requires it. The smart loading requires that you specify jquery as the $deps parameter when enqueuing your other JavaScript files, for example. WordPress comes with a whole bunch of default scripts out-of-the-box that you can take advantage of to power your themes and plugins. JQuery is one commonly used script, as is TinyMCE. But what if you want to replace a built-in script with your own? We recently looked at how to add jQuery scripts properly to your install. WordPress uses the same mechanism internally and in plugins, which means.
Cisco jabber download for mac. In Step 2 we are going to take our newly created WordPress loop structure and add in our navigation to view more posts. We are going to set this up so that it will only show if the number of pages exceeds 1.
PHP
CSS
Items to Note:
- You should be able to click on the ‘Load More’ button and view the next page with more posts, we will fix this to load posts on the current page in the 3rd step by utilizing jQuery.
- We are only using the next posts link because we are only going to be loading and adding more posts.
- If you are not seeing a ‘Load More’ button make sure that you have enough posts to make extra pages and/or check the backend and adjust the amount of posts to show.
- You can change the text of the button by changing the text ‘Load More’; just make sure it stays inside quotes.
- We are only providing a basic styled ‘Load More’ button; you can modify and adapt the CSS to fit your needs.
Step 3: Loading More WordPress Posts with jQuery
Wordpress Jquery Plugin
In the third and final step we are going to utilize jQuery to get the next posts and load them underneath the bottom of our current posts so that they load on the same page.
PHP & jQuery
Items to Note:
- This part of the tutorial relies on the jQuery JavaScript library in order to function; you must either link directly to jQuery or download the latest version and upload it to your server. You can download the latest version of jQuery HERE.
- As we mentioned in the Step 1 notes make sure that you are referencing the correct post ID and CLASS.
- You can change the text when the posts are loading where the loader is created and it says ‘Loading More Posts…’
- If you are comfortable with CSS you can add a preloader or you can even incorporate the one from our tutorial ‘Part 1: How to Code a Pure CSS3 Preloader with Animations’
Wordpress Jquery
Full Code
PHP & jQuery
CSS
Troubleshooting
If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. How can i clean my mobile ram. Please do not email us with problems regarding this tutorial, only comments will be responded to.
Sometimes, the power of jQuery and JavaScript goes underutilized. Simply, inserting the WordPress JavaScript or jQuery into the header or footer is not enough !! It is equally important to know that how to properly add these scripts using wp_enqueue_script function.
WordPress is a great Content Management System that separates design from the content. It gives you lots of privileges to alter the look and style of your website. But sometimes, you feel restricted to modify the design due to the preset styling options at the theme level. Here, you add JavaScript and jQuery to WordPress step in. This aid you to work out of the page or post boundaries, you are authoring. You can add different styling, layout or content changes to your site with the use of Javascript or jQuery in WordPress. Even, you can embed audio/video players, interactive pages or subscription forms by using these scripts and libraries. But I think most of the users know where to use WordPress Javascript or jQuery. What they really need to be more concerned about is – how to add jQuery and JavaScript in WordPress.
Many of our readers have queries about this. As sometimes, users got conflicts due to improperly managed scripts, using swapped versions of jQuery or changing the order of script (jQuery) loading etc. So to avoid all these kind of problems here at TemplateToaster WordPress theme builder, learn the correct way to add JavaScript and jQuery to WordPress.
How to Add JavaScript/jQuery to WordPress Pages or Posts?
Basically, jQuery is the JavaScript library and no other language. So, both will be loaded the same way. There are three methods to add jQuery or JavaScript to WordPress as follows
- Disable WordPress filtering of script tags.
- Enqueuing the scripts in WordPress.
- Using Plugins.
Let’s check out in detail
1. Add JavaScript and jQuery to WordPress by Disable WordPress Filtering of Script Tags
The first method is to disable the filtering of script tags. For this, you need to enable custom tags from wp-config.php within your root web directory.
Then, you will update functions.php page by adding following code
It is functionality-wise fine and easier to implement. But, it is an improper way that leads to more conflicts in future. As multiple plugins may use jQuery and other scripts so WordPress jQuery/scripts will get loaded again and again. It will have a negative effect on your WordPress speed and performance. Similarly, two different of jQuery versions can result in chaos and no results at all.
2. Add JavaScript and jQuery by Enqueuing the Scripts in WordPress
Enqueueing is the most convenient and CMS-friendly way to add scripts/jQuery to WordPress. It is a systematic method to load WordPress jQuery/Javascript by knowing their dependencies. WordPress provides an enqueue script function to ensure that everything works properly. The wp_enqueue_script function tells the WordPress when to load a file, where to load it, and what are its dependencies. It facilitates you to utilize the inbuilt jQuery library that comes with WordPress. It performs well without reducing the speed of your website. You can load your WordPress jQuery/JavaScript using following code
First, you register your script through the wp_register_script() function. It takes 5 parameters
- $handle – The first parameter that is a unique name of your script. The function is using a handle name as “customscripts”. It is a required field and should be in all lowercase.
- $src – It is the location of your script. If you are loading it locally, better to use content_url, bloginfo(“template_url”), or get_template_directory_uri(). It is optional.
- $deps – Specifies an array of dependencies. It will load the jQuery if it is not being loaded already. This is also an optional field.
- $ver – This is the version of your script. This parameter is not mandatory.
- $in_footer – If you want to place your script in the footer, you will set it to true. If in the header, then you would make it false.
Registration will make WordPress know your assets. After that, you can call the script in wp_enqueue_script() to actually add these assets to the page. Lastly, you will use wp_enqueue_scripts action hook to load the script.
This method will avoid the conflicts that arise with multiple occurrences of the scripts. Because it is a two-step method that first registers and then enqueues the script. The registering is a crucial step as it signals the other WordPress sites opened in the same browser to deregister the preloaded jQuery files. Once the other sites cleared the cache by deregistering pre-existing files, no conflicts will be there. Then, you can safely add the JavaScript/jQuery to WordPress. So, enqueuing using wp_enqueue_script() is the most secure way to enhance the functionality of your site by adding WordPress jQuery or JavaScript.
3. Add JavaScript and jQuery to WordPress using Plugins
The third method is the obvious one – through plugins. WordPress repository has a plethora of plugins. You will definitely get something out of it to serve your purpose. It provides you many plugins to insert jQuery or JavaScript to WordPress posts, pages or sitewide (themes, plugins etc).
One of the majorly installed, well-developed, and result-driven plugin to add jQuery to WordPress is – Advanced Custom Fields. It has more than One Million active installs and a 5-star rating. Let’s see how to include jQuery in WordPress using the plugin
1. Install and activate this plugin. After activating, you can find the Custom Fields option under Settings in the Left pane of the WordPress Dashboard.
2. When you click the Custom Fields option, you will see a screen as shown below
Click Add New and It will open a new screen to Add New Field Group. So, name your field group. For example, here the name of field group is jQuery Settings.
Custom Fields → Add New → Add New Field Group
3. Now, click Add Field Button. It will open the new Field particulars option as shown below
You will specify the Field Name, Field Label, Field Type, Placeholder Text, Rules etc. While defining rules, you can select a post, page or other elements where you want to add script. You can add multiple pages/posts by using and button.
4. Just Publish the changes by clicking Update button from the top-right area of the screen.
5. Navigate to Appearance → Editor → Theme Files. If you want to add your script before page loads then put the field into header.php. In case, you want your script after the page loads include it in footer.php. Here, it is being included in header.php.
Select the header.php file by scrolling the theme files from the right side of the screen. Add the code just above the head closing to add the field as shown below. And, Update it.
6. Navigate to the Post where you want to reflect the changes from the left pane of the Dashboard. Here, Hello World is the post and an alert is added to the jQuery script as shown. Then, Update the post.
7. Now, when you see the preview of this post, you can see an alert message.
In the same way, you can add scripts to different pages, posts of your site. So, ACF is a simple plugin to perform powerful functions. That’s why it is adopted by millions of users.
Simple Custom CSS and JS is another top plugin to add scripts to WordPress. There is no need to change your theme files. It will retain the changes you made even if you switch the theme. You can insert the scripts into the frontend or to the admin side. You can include inline or an external script. It gives you more flexibility.
You can add any custom code CSS, JS or HTML. Simply, click the code you want to add and specify the linking type(Internal/External), location to add etc. as shown
- Active Installs: 100,000+
- Rating: 4.7
Similarly, you can use Scripts n Styles plugin. This plugin allows you to add JavaScript/jQuery to WordPress page, post or sitewide. You can add both an external script source or to copy-paste your own JavaScript/jQuery within the <head> tags or above the </body> tag.
- Active Installs: 20,000+
- Rating: 4.4
Which method you use to Add JavaScript/jQuery to WordPress Pages or Posts?
Hopefully, you get a good exposure to all the different methods to add jQuery or JavaScript to WordPress. You can opt the enqueuing method or go with the plugins. Both are equally good. But if you choose plugins, you have a clear advantage to define your own rules. You can limit the access to adding scripts to the specific pages, posts, and users. If you are customizing your website design, you can use our website builder. It offers you the option to add Custom CSS, JavaScript/jQuery to your website theme. Undoubtedly, adding the jQuery/JavaScript will extend the capability of your site.
Related reading: WordPress 101 tutorial
If you have any queries, you can share in the comment section below.