You really need to use AJAX for this. Wordpress has its own ajax request processing method , which you can use to do this by following the few steps described below. I will try to show some practical recommendations of WP on this issue, since it can be faster / easier / more dirty way to achieve this (maybe even through a plugin), this will help you in creating a theme for Wordpress / plugins for you. Feel free to follow the docs links to better understand how this works.
1. Creating a category menu
In your sample code, the menu is static, although it is better to use a dynamic menu. One solution might be to use get_the_category_list , but this does not allow you to fully control category links. I would suggest defining a new navigation menu like this (the following code go to your functions.php theme):
add_action('after_setup_theme', 'add_categories_menu'); function add_categories_menu() { register_nav_menu('categories_menu', __('Categories Menu', 'your-theme-slug')); }
Then in your template, replace the static menu with the following to display the new menu:
<?php wp_nav_menu(array('theme_location' => 'categories_menu')); ?>
Now, to add categories to your menu, go into your Wordpress administration, go to Appearance> Menu, create a new menu, select the category menu topic for it, and add categories to it.
The last step for this, we will add a filter to add the onclick attribute to the menu links that will send the slug category to the js function called showPostsFromCategory() , which we will define later.
This happens in your .php functions:
function add_onclick_attr_categories_menu($atts, $item, $args) { if($args->theme_location == 'categories_menu' && $item->object == 'category') { $category = get_category($item->object_id); if($category !== null) { $atts['onClick'] = 'showPostsFromCategory("' . $item->slug . '")'; } } return $atts; } add_filter('nav_menu_link_attributes', 'add_onclick_attr_categories_menu', 10, 3);
You may ask why we save the category link in the menu item? This is for SEO and accessibility purposes: for a browser without javascript (for example, for reading from a screen) or a search finder, category pages will still be available.
2. Preparing AJAX Themes
In Wordpress, all AJAX requests must be sent to wp-admin/admin-ajax.php with an action parameter that will identify the request in order to catch it in functions.php using wp_ajax_nopriv_my_action (for non-registered users) and wp_ajax_my_action (for registered users) .
So, one small step before moving on is to make this path ( wp-admin/admin-ajax.php ) available in your JavaScript. First, create the js file that we will use for the AJAX process in your theme folder, let its name be ./js/categories-ajax.js . Then add the following to your functions. Php to enqueue this new script and make the path accessible through script localization :
add_action('wp_enqueue_scripts', 'ajax_categories_enqueue_scripts'); function ajax_categories_enqueue_scripts() { wp_register_script('categories_ajax', get_stylesheet_directory_uri() . '/js/categories-ajax.js', array('jquery'), '', true); wp_localize_script('categories_ajax', 'ls', array( 'ajax_url' => admin_url('admin-ajax.php') )); wp_enqueue_script('categories_ajax'); }
With this, the admin-ajax.php path will be available in your JS using ls.ajax_url .
3. Run ajax request
It's time to create the showPostsFromCategory() function. Therefore, write in your new categories the file ajax.js. Personally, to avoid any possible conflict with jQuery in my plugins / themes, I like to always encapsulate jQuery code in JavaScript closure and make functions accessible through global vars this:
(function($){ showPostsFromCategory = function(category_slug) {
So, I assume that the function code is inside the closure.
Basically, now we need to configure the $.post admin-ajax.php request, which will send the following parameters:
action : AJAX action id to let Wordpress know which function to call later. We will call it dynamic_categories .category : the slug category that was clicked on the menu.
Thus, the function code will look like this:
showPostsFromCategory = function(category_slug) { $.post(ls.ajax_url, {action: 'dynamic_categories', category: category_slug}, function success(data) { $('#your-post-content-wrapper').html(data);
It is very simple, you may want to add some error handling and a loader later. Here we simply replace the actual records with an AJAX return, which we consider HTML. Nothing more is being done on the JS side, so let's now work on the PHP side.
4. Receive messages for the requested categories
First add the following lines to functions.php to attach the get_categories_posts () function to the wp_ajax_dynamic_categories and wp_ajax_nopriv_dynamic_categories .
add_action('wp_ajax_dynamic_categories', 'get_categories_posts'); add_action('wp_ajax_nopriv_dynamic_categories', 'get_categories_posts');
Now we need to do the following in the function:
- Check if the slug category is valid and it has messages related to the message, or showing an error message.
- Receive messages related to the category identified by the path sent by the JS script.
Scroll through the messages and show them using part of the template . To do this, create a template in the theme folder that will contain only the necessary HTML / PHP to display the one message. You can see an example of such a template in the default Wordpress theme (twentysixteen) in
template-parts/content.php . Make the same file in your theme - perhaps it already exists.
You will also need to update your archive template to use part of the template. It is very simple, remove the code used to display the column inside and replace it with:
<?php get_template_part('template-parts/content'); ?>
Thus, the entire function code will look like this:
function get_categories_posts() {
And it's all! You now have dynamic navigation for your message categories.
For reference: sanitize_text_field , get_category_by_slug , get_posts , setup_postdata and get_template_part .
Please note that this does not support pagination. If you need this, check out this answer I made on this.
Further reading