Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active August 29, 2015 14:07
Show Gist options
  • Save srikat/c6a50da438c733850b62 to your computer and use it in GitHub Desktop.
Save srikat/c6a50da438c733850b62 to your computer and use it in GitHub Desktop.
How to display Posts organized by category as Data Tables in Genesis. http://sridharkatakam.com/display-posts-organized-category-data-tables-genesis/
jQuery(function( $ ){
$('.category-table').DataTable({
// Reference: http://www.datatables.net/reference/option/
// paging: false, // disable table pagination.
pageLength: 25, // initial page length (number of rows per page).
lengthChange: false, // remove the option for end user to change number of records to be shown per page.
// pagingType: 'simple', // http://datatables.net/reference/option/pagingType.
order: [[2, 'desc']], // define which column(s) the order is performed upon, and the ordering direction.http://datatables.net/reference/option/order
// language: {
// "sProcessing": "Procesando...",
// "sLengthMenu": "Mostrar _MENU_ registros",
// "sZeroRecords": "No se encontraron resultados",
// "sEmptyTable": "Ningún dato disponible en esta tabla",
// "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
// "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
// "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
// "sInfoPostFix": "",
// "sSearch": "Buscar:",
// "sUrl": "",
// "sInfoThousands": ",",
// "sLoadingRecords": "Cargando...",
// "oPaginate": {
// "sFirst": "Primero",
// "sLast": "Último",
// "sNext": "Siguiente",
// "sPrevious": "Anterior"
// },
// "oAria": {
// "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
// "sSortDescending": ": Activar para ordenar la columna de manera descendente"
// }
// },
});
});
<?php
/*
Template Name: Category Tables
*/
//* Enqueue DataTables
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {
wp_enqueue_style( 'datatables-jqueryui-stylesheet', get_stylesheet_directory_uri() . '/css/jquery.dataTables.min.css', array(), CHILD_THEME_VERSION );
wp_enqueue_style( 'datatables-responsive-stylesheet', get_stylesheet_directory_uri() . '/css/dataTables.responsive.css', array(), CHILD_THEME_VERSION );
wp_enqueue_script( 'datatables', get_stylesheet_directory_uri() . '/js/jquery.dataTables.min.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'datatables-responsive', get_stylesheet_directory_uri() . '/js/dataTables.responsive.min.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'datatables-init', get_stylesheet_directory_uri() . '/js/datatables-init.js', array( 'datatables' ), '1.0.0', true );
}
add_filter( 'body_class', 'custom_body_class' );
/**
* Adds a css class to the body element
*
* @param array $classes the current body classes
* @return array $classes modified classes
*/
function custom_body_class( $classes ) {
$classes[] = 'category-tables';
return $classes;
}
# Force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
# Remove the post content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
# Add custom post content
add_action( 'genesis_entry_content', 'sk_do_post_content' );
/**
* Outputs custom post content
*
* @return void
*/
function sk_do_post_content() {
$cat_args = wp_parse_args(
genesis_get_custom_field( 'cat_args' ),
array(
'orderby' => 'name',
)
);
// array of category objects matching the query parameters.
$categories = get_categories( $cat_args );
foreach ( $categories as $category ) {
echo '<div class="category-item">';
// Linked Category title
echo '<h2 class="category-title"><a href="' . get_category_link( $category->term_id ) . '">' . $category->name . '</a></h2>'; ?>
<!-- http://www.datatables.net/manual/styling/classes -->
<!-- display = stripe, hover, row-border and order-column -->
<table class="category-table display responsive">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date</th>
<th>Tags</th>
<th>Views</th>
</tr>
</thead>
<tbody>
<?php
$args = array(
// 'orderby' => 'title',
// 'order' => 'ASC',
'cat' => $category->term_id,
'posts_per_page' => -1
);
// The Query
$the_query = new WP_Query( $args );
while ( $the_query->have_posts() ) {
$the_query->the_post();
?>
<tr>
<td><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td>
<td><?php the_author_posts_link(); ?></td>
<td><?php echo get_the_date(); ?></td>
<td><?php the_tags('','<br />',''); ?></td>
<td><?php if(function_exists('get_post_views')) { echo get_post_today_views(); } ?></td>
</tr>
<?php }
/* Restore original Post Data */
wp_reset_postdata(); ?>
</tbody>
</table>
<?php
echo '</div><!-- .category-item -->';
}
}
genesis();
/* Category Tables
--------------------------------------------- */
.category-tables .entry-header {
margin-bottom: 60px;
}
.category-item {
margin-bottom: 60px;
}
.dataTables_wrapper .dataTables_filter input {
padding: 5px;
}
.category-tables h2 {
margin-bottom: 0;
}
.category-tables .dataTables_wrapper .dataTables_paginate .paginate_button {
padding: 0em 0.5em;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
font-size: 15px;
}
.category-tables .dataTables_wrapper .dataTables_paginate {
padding-top: 0.755em;
}
@media only screen and (max-width: 320px) {
.category-table {
width: auto !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment