I'm using Wordpress for my blog (blog.axelboberg.se), I wish to show an icon just over each title. The icon should be based and display the posts category. I've heard that it's possible to use an if statement, but that gets tricky when using more categories/images?
How do I display an image over each title based on the category? I'm planning to use 3-4 different icons.
Thanks in advance?
In the category.php file add
<?php
$categories = get_the_category();
foreach($categories as $category)
{
if($category->cat_name == "category1")
{
echo '<img src="">';
}
else if ($category->cat_name == "category2")
{
echo '<img src="">';
}
}
?>
just above this line:
<h1 class="archive-title"><?php printf( __( 'Category Archives: %s', 'twentytwelve' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1>
The above will only print out an image if it is on a specific category
Related
I am using a custom archive-product.php file in my WooCommerce theme. I haven't changed much about the file, just added a few HTML elements for sidebars and such, but the main componants remain untouched.
In my template, I'm trying to get a list of categories with this code, in a sidebar (outside the loop):
$prodCats = get_categories(array('taxonomy'=>'product_cat','exclude'=>'26,482,474','parent'=>0));
if (!empty($prodCats)) {
//echo '<center><strong>Jump to Category</strong></center>';
echo '<ul>';
foreach ($prodCats as $cat) {
// get the thumbnail id using the queried category term_id
$thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
// get the image URL
$image = wp_get_attachment_url( $thumbnail_id );
echo '<li>';
echo '';
echo '<div class="catName">'.$cat->name.'</div>';
echo '<img src="'.$image.'"/>';
echo '</li>';
}
echo '</ul>';
}
But, this outputs only the product categories that are part of the current WooCommerce loop. It will not get all the product categories. It seems to somehow be tied to the WC loop on that page instead of operating independantly.
Is this intended behavior on a custom post type archive or specifically on WooCommerce?
If not, what might I look for to solve this?
This code, which does a similar thing on a woocommerce Product Attribute (pa_brand) is also affected. Note that I'm using new WP_Term_Query here to see if that solves it, but it still only pulls the terms that are in the current WC loop.
//Get brand list and display it
function ppp_get_brand_list() {
?>
<div id="brandList">
<center><h4>Brands</h4></center>
<?php
$brandArgs = array(
'taxonomy' => 'pa_brand',
'hide_empty' => true,
);
$brands = new WP_Term_Query( $brandArgs );
echo '<ul>';
foreach ( $brands->terms as $brand ) {
$brand_image_id = get_term_meta( $brand->term_id, 'product_search_image_id', true );
$brand_image = wp_get_attachment_url( $brand_image_id );
$brand_link = get_term_link($brand->term_id,'pa_brand');
echo '<li><img src="'.$brand_image.'" alt="" /></li>';
}
echo '</ul>';
?>
</div>
<?php
}
I added a Field Group using ACF plugin to the default WP Category Add/Edit screen so that I can add additional values to categories such as category icon/background image, checkbox to displayed on home or not and assign it as one of the popular categories.
I'm trying to list all the categories on the homepage based on popularity checkbox along with their icon and background image.
I have two image fields such as category_icon for storing category icon and category_bg_image for storing category background image.
Below is the code where I'm able to list the Categories however the custom field values of icon and background image isn't showing.
if (have_posts() ) :
while (have_posts() ) : the_post();
$args=array(
'hide_empty' => '0',
'meta_key' => 'popular_services_category'
);
$categories=get_categories($args);
foreach($categories as $category) {
echo '<li>' . $category->name . '</li>';
global $post;
$terms = get_the_terms($post->ID, 'category');
if( !empty($terms) )
{
$term = array_pop($terms);
$custom_field = get_field('category_icon', 'category_' . $term->term_id );
echo '<li>' . $custom_field['url'] . '</li>';
}
}
endwhile;
I was able to solve the issue with little modification and I am posting it here for others to be helpful.
if (have_posts() ) :
while (have_posts() ) : the_post();
$args=array(
'hide_empty' => '0',
'meta_key' => 'popular_services_category'
);
$categories=get_categories($args);
foreach($categories as $category)
{
echo '<li>' . $category->name . '</li>';
$image = get_field('category_icon', $category->taxonomy . '_' .
$category->term_id );
$image_bg = get_field('category_bg_image', $category->taxonomy . '_' . $category->term_id );
// Check if the image exists
if ( $image ) : ?>
<img src="<?php echo $image['url']; ?>" />
<img src="<?php echo $image_bg['url']; ?>" />
endif;
}
endwhile;
I am using Advanced Custom Fields to return the url location of Category images. Which would allow me to add the Category image before the title of the post. I have a function insert_image_before_title in my functions.php file which is referenced by a title filter (see below). So this seems to work well for posts on my main blog page or post’s detail page. As the correct image for the Category shows up in front of the title of the post. However, it doesn’t work so well for widgets. For instance the “The Latest Comments” or “Recent Posts” widgets would show the same Category image before the title even though the Category image may not be the correct one tied to the post (it appears it uses the first category image it comes across for a particular widget and shows the same image for the widget on the front end, if any Category image is tied to the post.
function insert_image_before_title( $title, $id = null )
{
// load all 'category' terms for the post
$terms = get_the_terms( get_the_ID(), 'category');
// we will use the first term to load ACF data from
if( !empty($terms) )
{
$term = array_pop($terms);
$category_icon_url = get_field('category_icon', $term );
// do something with $custom_field
if($category_icon_url)
{
$title = '<img src="'. $category_icon_url .'" />' . $title;
}
}
return $title;
}
add_filter( 'the_title', 'insert_image_before_title', 10, 2 );
Try this:
<?php
$args = array(
'taxonomy' => 'post_tag',
'hide_empty' => true,
);
$terms = get_terms( $args );
foreach ($terms as $term):
$thumbnail = get_field('field_name', $term->taxonomy . '_' . $term->term_id);
?>
<!--If an array is returned in ACF-->
<img src="<?php echo $thumbnail['url'];?>" alt="<?php echo $thumbnail['title'];?>">
<!--If an url is returned in ACF-->
<img src="<?php echo $thumbnail;?>" alt="#">
<?php endforeach; ?>
Have got this working on general wordpress categories using this plugin:
https://wordpress.org/plugins/categories-images/
Then adding the following to the category.php template as advised on another thread.
<?php if (function_exists('z_taxonomy_image_url')) { ?>
<img src="<?php echo z_taxonomy_image_url(); ?>" alt="<?php the_title(); ?>" />
<?php } ?>
I'd like to do exactly the same with the product categories. Actually ideally I'd like to be able to add background images to each category so that the description text can go over the top, like the way this shop works:
http://www.natures-own.co.uk/Antioxidants/
Is this possible with some minor code tweaking, or better still is there a woocommerce equivalent to the wordpress plugin I've used?
I cannot find any resources for this anywhere, everything I find on searching is referring to just thumbnail of a category list as far as I can see!
Thanks in advance
Pat
You can add the category image and description by adding the following to the archive-product.php file after <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?> that if statement:
if (is_product_category())
{
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
// get the image URL
$image = wp_get_attachment_url( $thumbnail_id );
//if you only want the image, uncomment the two lines below
//list($width, $height) = getimagesize($image);
//echo '<img src="'.$image.'" alt="" width="'.$width.'" height="'.$height.'"/>';
$cat_id=$cat->term_id;
$prod_term=get_term($cat_id,'product_cat');
$description=$prod_term->description;
echo '<div class="category-description" style="background-image:url('.$image.');">'.$description.'</div>';
}
To display Woocommerce Category image
use this code -
add_action('woocommerce_archive_description', 'woocommerce_add_category_image', 20);
function woocommerce_add_category_image()
{
global $product;
if (is_product_category())
{
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta($cat->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($thumbnail_id);
if ($image)
{
echo '<img src="' . esc_url($image) . '" alt="" />';
}
}
}
I am using the following short code to list the product categories in woocommerce Wordpress plugin
<?php echo do_shortcode('[product_categories number=""]'); ?>
The problem is the category thumbnail that I need to get rid of. I want to hide it and doing it with CSS seems to be a big hassle. Is there anyway I can list the categories without the thumbnails appearing?
You could use the following:
$args = array( 'taxonomy' => 'product_cat' );
$terms = get_terms('product_cat', $args);
if (count($terms) > 0) {
echo '<p class="my_term-archive">';
foreach ($terms as $term) {
echo '' . $term->name . '';
}
echo '</p>';
}
Heres what I used for making a list of all categories by letter excluding empty letters and with category featured images!
All you need to do is style it the way you want ;)
<?php
/* Define which category // to list child categories array('parent'=>42) 42 is category ID */
$designers = get_terms('product_cat', array('parent'=>42));
/* If categ not empty for each designer take first letter */
if ( !empty( $designers ) && !is_wp_error( $designers ) ){
$term_list = [];
foreach ( $designers as $designer ){
$letter = strtoupper($designer->name[0]);
$designer_list[$letter][] = $designer;
}
unset($designer);
foreach ( $designer_list as $key=>$value ) {
/* Wrap around each designer */
echo '<div><span>' . $key . '</span><ul>';
foreach ( $value as $designer ) {
// Set thumbnail
$thumbnail_id = get_woocommerce_term_meta( $designer->term_id, 'thumbnail_id', true );
// get the image URL
$image = wp_get_attachment_url( $thumbnail_id );
/* List designers */
echo '<li>' . $designer->name . '<img src=" ' .$image.' "" alt="" /></li>';
}
/* end Wrap around designer */
echo '</ul></div>';
}?>
}