Category Images displayed in a dynamic grid WordPress
- SOLVED
I need a page template that dynamically displays a grid of parent category thumbnail images linking to a grid of child category thumbnail images. I would like to be able to use custom post types as well. The plugin Category Images II can be used to upload images into the category.
A previous question was left unanswered. See link below.
http://wpquestions.com/question/show/id/2251
Thanks
Answers (3)
Manoj Raj answers:
1) Install and Activate "Category Images II" plugin from the following url
http://wordpress.org/extend/plugins/category-images-ii/
2) Find "term-images.php" located in <em>category-images-ii -> view -> category-image"s-ii</em>
Replace the file with the one attached with this answer.
I have used the Twenty Eleven theme for testing purposes... You should modify the styles and html to fit your needs...
3) Create a new page template to display only the main categories (Top level categories)
<?php
/**
* Template Name: Main Categories Listing
* Description: A Page Template that Lists all the main categories
*/
get_header(); ?>
<div id="primary">
<div id="content" role="main">
<?php
$main_categories= get_terms('category', 'parent=0&hide_empty=0');
echo '<ul class="list-models">';
foreach($main_categories as $categorymain) {
echo '<li><a href="'.get_term_link($categorymain).'">';
ciii_term_images('category','term_ids='. $categorymain->term_id. '');
echo '<span>'.$categorymain->name.'</span></a></li>';
}
echo '</ul>';
?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
If it is a custom taxonomy, create a new page template and then in
<em>get_terms</em> -> you can change the <strong>'category'</strong> parameter to the custom taxonomy you need to have.
In the same way, <em><em>ciii_term_images</em></em> -> you can change the 'category' to the custom taxonomy you need to have.
3) You need to modify the category page template(category.php in my case) to display the sub-categories (if it is a parent) and posts(if it has no child category)
<?php
/**
* The template for displaying Category Archive pages.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
global $wpdb, $wp_query;
$models = $wp_query->get_queried_object();
$models_children_check = $wpdb->get_results(" SELECT * FROM wp_term_taxonomy WHERE parent = $models->term_id ");
get_header(); ?>
<section id="primary">
<div id="content" role="main">
<?php
if($models_children_check) {
$sub_categories = get_terms($models->taxonomy, 'parent='. $models->term_id .'&hide_empty=0');
echo '<ul class="list-models">';
foreach ( $sub_categories as $sublist ) {
echo '<li><a href="'.get_term_link($sublist).'">';
ciii_term_images('category', 'term_ids='. $sublist->term_id. '');
echo '</a></li>';
}
echo '</ul>';
}
else {
$args = array(
'post_type' => 'post',
'tax_query' => array(
array(
'taxonomy' => $models->taxonomy,
'field' => 'id',
'terms' => $models->term_id
)
),
'orderby' => 'post_date'
);
$posts = new WP_Query($args);
if($posts->have_posts()) :
while($posts->have_posts()) : $posts->the_post();
echo '<div>';
the_content();
echo '</div>';
endwhile;
wp_reset_postdata();
else :
echo "No Posts Found";
endif;
}
?>
</div><!-- #content -->
</section><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
If it is a custom taxonomy and custom post type, create a php file 'taxonomy-taxonomyname.php' and paste the above code and do the following modifications
in <em>ciii_term_images</em> -> change <strong>'category'</strong> to the custom taxonomy you need to have.
in posts <em>args</em> -> change <strong>'post_type'</strong> to the custom post type you need to have.
</em>
Manoj Raj comments:
The php file has not been attached.. .So replace the existing content in term-images.php with the following code
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?>
<?php foreach( $terms AS & $term ) { ?>
<img src="<?php echo $term[ 'image' ]; ?>" alt="<?php echo $term[ 'name' ]; ?>" />
<?php } ?>
If you have any doubts, do let me know...
tonepro1 comments:
My theme doesnt have a category.php file. Would it be the archive.php that I need to change? Or should I create a category.php file?
Manoj Raj comments:
Create a category.php file if your theme doesn't have one...
Arnav Joy answers:
so there are more then one image to each category or subcategory?
tonepro1 comments:
No. There is only one image to a category/subcategory. Multiple images would be visible if there were multiple subcategories.
Example
Top level category = Cars- 1 image
Sub category of cars = Audi + Volkswagen = 2 images
Subcategory of Audi= A4 + A5 + A3 = 3 images
Arnav Joy comments:
can you show me a actual sketch how these will be organize in this page
http://www.1hourwebsitepros.com/darkkastle/part-category/all-parts/
tonepro1 comments:
The link I provided is an example of how the category pages should function. The page is merely a table with a grid of images linking to another page. I'm sure you can see how time consuming this would be to manage
tonepro1 comments:
I did include a sketch. See the attachment.
Martin Pham answers:
you can use custom term meta to insert image link each category.
And select parent category when you post page (template category grid).
i can make it for you, it simple !!
tonepro1 comments:
Sounds like what Im looking for.
Martin Pham comments:
please try
This is for make custom category term meta and in-page custom field. Insert this into functions.php
function _get_custom_field( $field ) {
global $id, $post;
if ( null === $id && null === $post )
return false;
$post_id = null === $id ? $post->ID : $id;
$custom_field = get_post_meta( $post_id, $field, true );
if ( $custom_field )
return stripslashes( wp_kses_decode_entities( $custom_field ) );
return false;
}
add_action( 'admin_menu', '_add_inpage_category_box' );
function _add_inpage_category_box() {
foreach ( (array) get_post_types( array( 'public' => true ) ) as $type ) {
if($type == 'page')
add_meta_box( '_inpage_category_box', __( 'Select Category', 'marx' ), '_inpage_category_box', $type, 'normal', 'high' );
}
}
function _inpage_category_box() {
$categories = get_categories();
$current = _get_custom_field('_category_parent');
?>
<input type="hidden" name="_inpage_category_box_nonce" value="<?php echo wp_create_nonce( plugin_basename( __FILE__ ) ); ?>" />
<p><label for="mx_category_parent"><?php _e( 'Select parent category', 'marx' ); ?></label></p>
<select name="marx[_category_parent]" id="mx_category_parent">
<option value="default" <?php selected( $current, 'default' ); ?> >Default</option>
<?php
foreach ($categories as $cat) {
echo '<option '. selected( $current, $cat->cat_ID ) .' value="'.$cat->cat_ID.'">'.$cat->cat_name.'</option>';
}
echo '</select>';
}
add_action( 'save_post', '_inpage_category_save', 1, 2 );
function _inpage_category_save($post_id, $post) {
if ( ! isset( $_POST['_inpage_category_box_nonce'] ) || ! wp_verify_nonce( $_POST['_inpage_category_box_nonce'], plugin_basename( __FILE__ ) ) )
return $post->ID;
/** Don't try to save the data under autosave, ajax, or future post */
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( defined( 'DOING_AJAX' ) && DOING_AJAX )
return;
if ( defined( 'DOING_CRON' ) && DOING_CRON )
return;
/** Don't try to store data during revision save */
if ( 'revision' == $post->post_type )
return;
$mx_category_parent = $_POST['marx'];
foreach ( (array) $mx_category_parent as $key => $value ) {
/** Save, or delete if the value is empty */
if ( $value != 'default')
update_post_meta( $post->ID, $key, $value );
else
delete_post_meta( $post->ID, $key );
}
}
/**
* Category term meta
*/
add_action( 'admin_init', '_add_taxonomy_image_options' );
function _add_taxonomy_image_options() {
foreach ( get_taxonomies( array( 'show_ui' => true ) ) as $tax_name ) {
if($tax_name == 'category') {
add_action( $tax_name . '_edit_form', '_category_image_option', 10, 2 );
}
}
}
function _category_image_option( $tag, $taxonomy ) {
$tax = get_taxonomy( $taxonomy );
?>
<h3><?php _e( 'Custom image for Category', 'marx' ); ?></h3>
<table class="form-table">
<tbody>
<tr class="form-field">
<th scope="row" valign="top"><label for="meta[doctitle]"><?php _e( 'Image link', 'marx' ); ?></label></th>
<td>
<input name="meta[doctitle]" id="meta[doctitle]" type="text" value="<?php echo esc_attr( $tag->meta['doctitle'] ); ?>" size="40" />
</td>
</tr>
</tbody>
</table>
<?php
}
add_action( 'edit_term', '_term_meta_save', 10, 2 );
function _term_meta_save( $term_id, $tt_id ) {
if ( defined( 'DOING_AJAX' ) && DOING_AJAX )
return;
$term_meta = (array) get_option( 'mx-category-meta' );
$term_meta[$term_id] = isset( $_POST['meta'] ) ? (array) $_POST['meta'] : array();
update_option( 'mx-category-meta', $term_meta );
}
add_action( 'delete_term', '_term_meta_delete', 10, 2 );
function _term_meta_delete( $term_id, $tt_id ) {
$term_meta = (array) get_option( 'mx-category-meta' );
unset( $term_meta[$term_id] );
update_option( 'mx-category-meta', (array) $term_meta );
}
Please wait me make page template (Category Images Grid) for you !
Martin Pham comments:
sory, im post wrong code. Correct here
<?php
function _get_custom_field( $field ) {
global $id, $post;
if ( null === $id && null === $post )
return false;
$post_id = null === $id ? $post->ID : $id;
$custom_field = get_post_meta( $post_id, $field, true );
if ( $custom_field )
return stripslashes( wp_kses_decode_entities( $custom_field ) );
return false;
}
add_action( 'admin_menu', '_add_inpage_category_box' );
function _add_inpage_category_box() {
foreach ( (array) get_post_types( array( 'public' => true ) ) as $type ) {
if($type == 'page')
add_meta_box( '_inpage_category_box', __( 'Select Category', 'marx' ), '_inpage_category_box', $type, 'normal', 'high' );
}
}
function _inpage_category_box() {
$categories = get_categories();
$current = _get_custom_field('_category_parent');
?>
<input type="hidden" name="_inpage_category_box_nonce" value="<?php echo wp_create_nonce( plugin_basename( __FILE__ ) ); ?>" />
<p><label for="mx_category_parent"><?php _e( 'Select parent category', 'marx' ); ?></label></p>
<select name="marx[_category_parent]" id="mx_category_parent">
<option value="default" <?php selected( $current, 'default' ); ?> >Default</option>
<?php
foreach ($categories as $cat) {
echo '<option '. selected( $current, $cat->cat_ID ) .' value="'.$cat->cat_ID.'">'.$cat->cat_name.'</option>';
}
echo '</select>';
}
add_action( 'save_post', '_inpage_category_save', 1, 2 );
function _inpage_category_save($post_id, $post) {
if ( ! isset( $_POST['_inpage_category_box_nonce'] ) || ! wp_verify_nonce( $_POST['_inpage_category_box_nonce'], plugin_basename( __FILE__ ) ) )
return $post->ID;
/** Don't try to save the data under autosave, ajax, or future post */
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( defined( 'DOING_AJAX' ) && DOING_AJAX )
return;
if ( defined( 'DOING_CRON' ) && DOING_CRON )
return;
/** Don't try to store data during revision save */
if ( 'revision' == $post->post_type )
return;
$mx_category_parent = $_POST['marx'];
foreach ( (array) $mx_category_parent as $key => $value ) {
/** Save, or delete if the value is empty */
if ( $value != 'default')
update_post_meta( $post->ID, $key, $value );
else
delete_post_meta( $post->ID, $key );
}
}
/**
* Category term meta
*/
add_action( 'admin_init', '_add_taxonomy_image_options' );
function _add_taxonomy_image_options() {
foreach ( get_taxonomies( array( 'show_ui' => true ) ) as $tax_name ) {
if($tax_name == 'category') {
add_action( $tax_name . '_edit_form', '_category_image_option', 10, 2 );
}
}
}
function _category_image_option( $tag, $taxonomy ) {
$tax = get_taxonomy( $taxonomy );
?>
<h3><?php _e( 'Custom image for Category', 'marx' ); ?></h3>
<table class="form-table">
<tbody>
<tr class="form-field">
<th scope="row" valign="top"><label for="meta[cat_image_link]"><?php _e( 'Image link', 'marx' ); ?></label></th>
<td>
<input name="meta[cat_image_link]" id="meta[cat_image_link]" type="text" value="<?php echo esc_attr( $tag->meta['cat_image_link'] ); ?>" size="40" />
</td>
</tr>
</tbody>
</table>
<?php
}
add_action( 'edit_term', '_term_meta_save', 10, 2 );
function _term_meta_save( $term_id, $tt_id ) {
if ( defined( 'DOING_AJAX' ) && DOING_AJAX )
return;
$term_meta = (array) get_option( 'mx-category-meta' );
$term_meta[$term_id] = isset( $_POST['meta'] ) ? (array) $_POST['meta'] : array();
update_option( 'mx-category-meta', $term_meta );
}
add_action( 'delete_term', '_term_meta_delete', 10, 2 );
function _term_meta_delete( $term_id, $tt_id ) {
$term_meta = (array) get_option( 'mx-category-meta' );
unset( $term_meta[$term_id] );
update_option( 'mx-category-meta', (array) $term_meta );
}
tonepro1 comments:
Your code broke the site. Dreamweaver said there was a code syntax error.
Martin Pham comments:
no problem, it work fine.
please wait me to build template
Martin Pham comments:
Hello there,
I apologize for the delay, i have completed the requirements of the question. It works very well for me, you can see attached file.
insert this into functions.php . Please edit <strong>defaults image link</strong> for category in function <strong>_get_category_meta</strong>
<?php
function _get_category_meta($catid='') {
$term_meta = (array) get_option( 'mx-category-meta' );
if (array_key_exists($catid, $term_meta) && isset($term_meta[$catid]['cat_image_link'])) {
return esc_url($term_meta[$catid]['cat_image_link']);
}
else {
// insert default image link here
return 'http://domain.com/default_image.jpg';
}
}
function _get_custom_field( $field ) {
global $id, $post;
if ( null === $id && null === $post )
return false;
$post_id = null === $id ? $post->ID : $id;
$custom_field = get_post_meta( $post_id, $field, true );
if ( $custom_field )
return stripslashes( wp_kses_decode_entities( $custom_field ) );
return false;
}
add_action( 'admin_menu', '_add_inpage_category_box' );
function _add_inpage_category_box() {
foreach ( (array) get_post_types( array( 'public' => true ) ) as $type ) {
if($type == 'page')
add_meta_box( '_inpage_category_box', __( 'Grid Categories', 'marx' ), '_inpage_category_box', $type, 'normal', 'high' );
}
}
function _inpage_category_box() {
$categories = get_categories();
$current = _get_custom_field('_category_parent');
?>
<input type="hidden" name="_inpage_category_box_nonce" value="<?php echo wp_create_nonce( plugin_basename( __FILE__ ) ); ?>" />
<p><label for="mx_category_parent"><?php _e( 'Select parent category', 'marx' ); ?></label></p>
<select name="marx[_category_parent]" id="mx_category_parent">
<option value="default" <?php selected( $current, 'default' ); ?> >Default</option>
<?php
foreach ($categories as $cat) {
echo '<option '. selected( $current, $cat->cat_ID ) .' value="'.$cat->cat_ID.'">'.$cat->cat_name.'</option>';
}
echo '</select>';
}
add_action( 'save_post', '_inpage_category_save', 1, 2 );
function _inpage_category_save($post_id, $post) {
if ( ! isset( $_POST['_inpage_category_box_nonce'] ) || ! wp_verify_nonce( $_POST['_inpage_category_box_nonce'], plugin_basename( __FILE__ ) ) )
return $post->ID;
/** Don't try to save the data under autosave, ajax, or future post */
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( defined( 'DOING_AJAX' ) && DOING_AJAX )
return;
if ( defined( 'DOING_CRON' ) && DOING_CRON )
return;
/** Don't try to store data during revision save */
if ( 'revision' == $post->post_type )
return;
$mx_category_parent = $_POST['marx'];
foreach ( (array) $mx_category_parent as $key => $value ) {
/** Save, or delete if the value is empty */
if ( $value != 'default')
update_post_meta( $post->ID, $key, $value );
else
delete_post_meta( $post->ID, $key );
}
}
/**
* Category term meta
*/
add_action( 'admin_init', '_add_taxonomy_image_options' );
function _add_taxonomy_image_options() {
foreach ( get_taxonomies( array( 'show_ui' => true ) ) as $tax_name ) {
if($tax_name == 'category') {
add_action( $tax_name . '_edit_form', '_category_image_option', 10, 2 );
}
}
}
function _category_image_option( $tag, $taxonomy ) {
$tax = get_taxonomy( $taxonomy );
?>
<h3><?php _e( 'Custom image for Category', 'marx' ); ?></h3>
<table class="form-table">
<tbody>
<tr class="form-field">
<th scope="row" valign="top"><label for="meta[cat_image_link]"><?php _e( 'Image link', 'marx' ); ?></label></th>
<td>
<input name="meta[cat_image_link]" id="meta[cat_image_link]" type="text" value="<?php echo esc_attr( $tag->meta['cat_image_link'] ); ?>" size="40" />
</td>
</tr>
</tbody>
</table>
<?php
}
add_action( 'edit_term', '_term_meta_save', 10, 2 );
function _term_meta_save( $term_id, $tt_id ) {
if ( defined( 'DOING_AJAX' ) && DOING_AJAX )
return;
$term_meta = (array) get_option( 'mx-category-meta' );
$term_meta[$term_id] = isset( $_POST['meta'] ) ? (array) $_POST['meta'] : array();
update_option( 'mx-category-meta', $term_meta );
}
add_action( 'delete_term', '_term_meta_delete', 10, 2 );
function _term_meta_delete( $term_id, $tt_id ) {
$term_meta = (array) get_option( 'mx-category-meta' );
unset( $term_meta[$term_id] );
update_option( 'mx-category-meta', (array) $term_meta );
}
MAKE template file in theme folder (example: page-template-category-grid.php) then paste code bellow and edit your page style.
<?php
/**
* Template Name: Category Images Grid
*/
$parent_category = _get_custom_field('_category_parent');
$args = array(
'child_of' => ($parent_category) ? $parent_category : 0,
'orderby' => 'name',
'order' => 'ASC',
'hide_empty' => 0,
'hierarchical' => 1,
'taxonomy' => 'category',
'pad_counts' => false );
$categories = get_categories( $args );
get_header();
# Display category
if($categories) {
// Display parent category name
$catname = get_cat_name($parent_category);
if($catname) {
echo '<h2 class="grid-cat-pr"><a href="'.get_category_link($parent_category).'" title="'.$catname.'">'.$catname.'</a></h2>';
}
// Display grid categories
$i = 0;
$each_row = 4;
echo '<ul class="cat-grid">';
foreach($categories as $category) {
$i++;
echo '<li '.(($i%$each_row == 0 && $i != 0) ? 'class="last"': '').'>
<a href="' . get_category_link( $category->term_id ) . '" title="' . $category->name . '" ' . '>
<img src="'. _get_category_meta($category->term_id) .'" width="150" height="150" />
<p class="cat-label">'.$category->name.'</p>
</a>
</li>';
}
echo '</ul>';
}
get_footer();
In-Demo Css
.cat-grid a, .grid-cat-pr a {
color: #fff;
}
.grid-cat-pr {
margin-bottom: 20px;
font-size: 20px;
}
.cat-grid li {
float: left;
border: 1px solid #CDCDCD;
padding: 4px;
background-color:#000;
margin-right: 15px;
margin-bottom: 20px;
}
.cat-grid .cat-label {
padding: 3px 0;
text-align: center;
}
.cat-grid .last {
margin-right: 0;
clear:both;
}