Here’s how to load content into a div on click using the AJAX load method:
Here’s the code I used in the video:
<h1>About</h1> <p>This is the about page</p>
<h1>Home</h1> <p>This is the home page</p>
<DOCTYPE html> <html> <head> <title>Load a Page With AJAX and No Refresh</title> <style> #nav ul { overflow: hidden; margin: 0; padding: 0; list-style-type: none; } #nav ul li { float: left; } #nav ul li a { display: inline-block; padding: 10px 15px; } #content { padding: 15px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(document).ready(function(){ // Set trigger and container variables var trigger = $('#nav ul li a'), container = $('#content');
// Fire on click trigger.on('click', function(){ // Set $this for re-use. Set target from data attribute var $this = $(this), target = $this.data('target');
// Load target page into container container.load(target + '.php');
Here’s how to build a grid layout for WordPress via shortcodes and WP_Query:
A lot of WordPress developers immediately rush to query_posts in order to create custom loops.
But, query_posts is meant for altering the main loop of a WordPress page/post (actually, it’s not even recommended for that anymore).
Using get_posts() is okay… but, if you want that real WordPress flavor using WP_Query is the way to go.
In the video above, I show you how to use WP_Query to create a custom loop inside WordPress in order to build a Pinterest-style grid layout.
Here’s the code I used in the video:
<?php /* Plugin Name: John Morris Grid Plugin URI: http://johnmorrisonline.com/ Description: Demo plugin that displays posts in a grid format via shortcode Version: 1.0.1 Author: John Morris Author URI: http://johnmorrisonline.com Text Domain: johnmorris-grid License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Domain Path: /lang */
if ( ! class_exists( 'John_Morris_Grid' ) ) { class John_Morris_Grid { /** * Init * * Initializes the plugin */ public function init() { add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) ); add_image_size( 'jmogrid', 220, 220, true ); add_shortcode( 'jmogrid', array( $this, 'shortcode_handler' ) ); }
/** * Enqueue Scripts and Styles * * Enqueues styles and scripts used throughout the plugin */ public function enqueue() { wp_enqueue_style('jmogrid', plugins_url( '/css/style.css', __FILE__) ); }