Close

grid layout

jQuery Tutorial: AJAX Load Content With No Page Refresh

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');

// Stop normal link behavior
return false;
});
});
</script>
</head>
<body>
<nav id="nav">
<ul>
<li><a href="#" data-target="home">Home</a></li>
<li><a href="#" data-target="about">About</a></li>
</ul>
</nav>
<div id="content">
<?php include('home.php'); ?>
</div>
</body>
</html>

If you enjoyed this tutorial and want to keep learning, check out my free tutorial site here: https://johnsfreetuts.com

July 23, 2015

Build a Grid Layout For WordPress Using WP_Query

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: https://johnmorrisonline.com/
Description: Demo plugin that displays posts in a grid format via shortcode
Version: 1.0.1
Author: John Morris
Author URI: https://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__) );
}

/**
* Shortcode Handler
*
* Handles shortcode processing
*/
public function shortcode_handler($atts) {
$atts = shortcode_atts(
array(
'posts_per_page' => 100
), $atts, 'jmogrid'
);

return $this->grid($atts);
}

/**
* Grid Builder
*
* Builds the grid
*
* @param array $args Query argumenst passed to WP_Query
*
* @return string $html The HTML output
*/
public function grid($args) {
$grid = new WP_Query($args);

ob_start(); ?>

<div id="jmogrid">

<?php $count = 1; if ( $grid->have_posts() ) : while( $grid->have_posts() ) : $grid->the_post(); ?>
<?php
$modulus = $count % 5;

if ( $modulus == 1 ) {
$class = 'first';
} elseif ( $modulus == 0 ) {
$class = 'last';
}
?>
<div class="jmogrid-item <?php echo $class; ?>">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('jmogrid'); ?>
</a>
<?php endif; ?>
<h4>
<a href="<?php the_permalink(); ?>"><?php echo wp_trim_words(get_the_title(), 6); ?></a>
</h4>
<p class="jmogrid-meta">
<?php _e( 'Written by', 'johnmorris-grid' ); ?> <?php the_author(); ?><br />
<?php echo get_the_date( get_option( 'date_format' ) ); ?>
</p>
<p><?php echo wp_trim_words( get_the_content(), 10); ?></p>
</div>

<?php unset($class); $count++; endwhile; wp_reset_postdata(); endif; ?>

</div>

<?php return ob_get_clean();
}
}

// Instantiate Class
$JohnMorrisGrid = new John_Morris_Grid;

// Hook in
add_action( 'init', array( $JohnMorrisGrid, 'init' ) );
}

/* John Morris Grid CSS */

#jmogrid {
overflow: hidden;
clear: both;
}

.jmogrid-item {
overflow: hidden;
box-sizing: border-box;
width: 18%;
float: left;
margin: 20px 1%;
border: 1px solid #e4e4e4;
border-radius: 3px;
}

.jmogrid-item.first {
width: 19%;
margin-left: 0;
}

.jmogrid-item.last {
width: 19%;
margin-right: 0;
}

.jmogrid-item h4,
.jmogrid-item p {
margin: 0;
padding: 20px;
}

.jmogrid-item h4 {
padding-bottom: 0;
}

.jmogrid-item p {
font-size: 1.5rem;
}

p.jmogrid-meta {
font-size: 1.2rem;
color: #777;
padding-bottom:0;
padding-top: 5px;
}

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

July 16, 2015