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;
Related
Figured this would be pretty easy but I am running into an issue.
The website I am building, the client has a list of taxonomies that have an ACF Image Field and ACF Description field.
What they want to do is have a block where they can select certain ingredients from the Taxonomy Block, then have it render out formatted (on a page)(At this time it doesnt need to link to the actual category) but they want to do it this way so they dont need to update page by page when an ingredient changes description or image they can just change it in the taxonomy list.
Below is the code i am using to try and get it going from the docs, it wont render the name or original description it will render the slug but skips over the name but the slug is correct
I've been trying this with no luck, it just returns 3 li's which is correct but i can get a name or custom field to come through.
If i just the the_field('ingredients_selector'); I get the ID's just fine But for the life of me i can not get a term name or the ACF field attached to it/
$terms = get_field('ingredients_selector');
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
echo '<ul class="ingredients-list">';
foreach ( $terms as $term ) {
echo '<li class="ingredients-list__item">' . $term->name . '</li>'; ?>
<p>Description: <?php the_field('description', $term); ?></p>
<p>Image: <?php the_field('image', $term); ?></p>
<?php }
echo '</ul>';
}
?>
I've also tried this way, this gives me same reuslt but the slug with work, it will skip term name again but "view all" will link at least
<?php
$terms = get_field('ingredients_selector');
if( $terms ): ?>
<ul>
<?php foreach( $terms as $term ): ?>
<li>
<h2><?php echo esc_html( $term->name ); ?></h2>
<p>Term description: <?php the_field('description', $term); ?></p>
<p>Term Image: <?php the_field('image', $term); ?></p>
<p><?php echo esc_html( $term->description ); ?></p>
View all '<?php echo esc_html( $term->name ); ?>' posts
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
Attached is my set up of the ACF fields
EDIT****
This was my solution
<?php
$tax = 'ingredients';
$terms = get_terms( $tax, $args = array(
'hide_empty' => false, // do not hide empty terms
));
foreach( $terms as $term ) {
$term_link = get_term_link( $term );
$image = get_field('image', 'ingredients_' . $term->term_id );
$description = get_field('description', 'ingredients_' . $term->term_id );
if( $term->count > 0 ) {
echo '<a href="' . esc_url( $term_link ) . '">';
echo '<img src="' . $image['url'] . '" alt="' . $image['alt'] .'">';
echo $term->name .'</a>';
echo $description;
} elseif( $term->count !== 0 ) {
echo '' . $term->name .'';
}
}
?>
Try this and replace term_name_ with your actual term slug:
<?php
$terms = get_field('ingredients_selector');
if( $terms ): ?>
<ul>
<?php foreach( $terms as $term ): ?>
<li>
<h2><?php echo esc_html( $term->name ); ?></h2>
<p>Term description: <?php the_field('description', 'term_name_'.$term->term_id); ?></p>
<p>Term Image: <?php the_field('image', 'term_name_'.$term->term_id); ?></p>
<p><?php echo esc_html( $term->description ); ?></p>
View all '<?php echo esc_html( $term->name ); ?>' posts
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
You can find more about this here.
I am curretly trying to create a shortcode that shows 3 products and the snippet looks like this:
function show_recent_products(){
$args = array('posts_per_page' => 3, 'post_type' => 'product');
$custom_query = new WP_Query( $args );
if ( $custom_query->have_posts() ) {
echo '<div id="recent-posts" class="flex space-between">';
while ( $custom_query->have_posts() ) {
$custom_query->the_post();
echo '<div class="woocommerce_recent_products" style="background: url('.get_the_post_thumbnail_url().')">';
echo '<p>';
//echo get_regular_price();
echo'</p>';
echo '</div>';
}
echo '</div>';
}
wp_reset_postdata();
}
How can I get hold of the product price?
Reason why I am not using the default recent products shortcode it because the layout looks completely different and I would not know how to change the default code.
You can fetch product detail from ID. Use wc_get_product(). This will return Product Object.
$current_product = wc_get_product( get_the_ID() );
After that you can use this object $current_product and fetch relevant product information using its methods like get_price(). Example.
echo $current_product->get_price();
I used the global product inside the while loop and with I managed to get hold of all the product information.
function show_recent_products(){
global $post;
$args = array('posts_per_page' => 3, 'post_type' => 'product');
$post_id = $post->ID;
$product = wc_get_product( $post_id );
$custom_query = new WP_Query( $args );
if ( $custom_query->have_posts() ) {
echo '<div id="recent-posts" class="flex space-between">';
while ( $custom_query->have_posts() ) {
$custom_query->the_post();
global $product;
echo '<a href="'. get_the_permalink() .'" class="woocommerce_recent_products flex align-center" style="background: url('.get_the_post_thumbnail_url().')">';
echo '<div class="recent-content-inner">';
echo '<div>';
echo '<p class="recent-add-title">';
echo get_the_title();
echo'</p>';
echo '<p class="recent-add-price">';
echo "R". $product->price;
echo'</p>';
echo '<p class="recent-add-cart">';
echo "ADD CART";
echo'</p>';
echo'</div>';
echo'</div>';
echo "</a>";
}
echo '</div>';
}
wp_reset_postdata();
}
I currently have a function pulled from WPBeginner which allows me to create a shortcode which pulls the stickied posts on the site wherever I want.
I am in need of this to also show the featured image but not sure how to get this to work currently. The current shortcode is below:
function wpb_latest_sticky() {
/* Get all sticky posts */
$sticky = get_option( 'sticky_posts' );
/* Sort the stickies with the newest ones at the top */
rsort( $sticky );
/* Get the 5 newest stickies (change 5 for a different number) */
$sticky = array_slice( $sticky, 0, 1 );
/* Query sticky posts */
$the_query = new WP_Query( array( 'post__in' => $sticky, 'ignore_sticky_posts' => 1 ) );
// The Loop
if ( $the_query->have_posts() ) {
$return .= '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
$return .= '<li>' . get_the_title() . '<br />' . get_the_excerpt(). '</li>';
}
$return .= '</ul>';
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
return $return;
}
add_shortcode('latest_stickies', 'wpb_latest_sticky');
This is how I pull it on post pages:
<?php if ( has_post_thumbnail() && !is_search() ) { ?>
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( esc_html__( 'Permalink to ', 'quark' ) . '%s', the_title_attribute( 'echo=0' ) ) ); ?>">
<?php the_post_thumbnail( 'post_feature_full_width' ); ?>
</a>
Any help would be greatly appreciated!
while ( $the_query->have_posts() ) {
$the_query->the_post();
$return .= '<li>' . get_the_title() . '<br />' . get_the_excerpt() . '<br/>' . get_the_post_thumbnail() . '</li>';
}
I have created a custom post type named as Products and a custom taxonomy as Product Categories. I have listed a number of product category names with their images in the taxonomy Product Categories. I wanted to display all product category names with their respective images uploaded(uploaded using category image plugin). Images should be uploaded into an <a> tag. I don't know how to display the category names and their images.Ihave used the types plugin to create custom post type and taxonomy and category image plugin to load the category image. I wanted to display the group of category names and their image in the below code :
<div class="col-md-4 col-sm-4 col-xs-12">
<a href="pvc_hose.html">
<div class="service wow slideInLeft">
<div class="icon"><img src="<?php bloginfo('template_url'); ?>/images/buiding/icon18.png"></div>
<h4>PVC hose</h4>
</div>
</a>
</div>
Can anyone help me on this ?
I have attached the screenshot of the product categories.
If I understand properly this is correct way,
First you need to create menu in word press admin menu blank menu. Now go to function.php file (theme file) add following code in it.
You can get products cateogorty list from this function,
function get_product_terms( $term_id ) {
$html = '';
$args = array( 'hide_empty' => 0, 'parent' => $term_id );
$terms = get_terms('product_cat', $args);
foreach ($terms as $term) {
$html .= '<li';
if( $term_id == 0 ) {
$html .= ' class="top_li"';
}
$html .= '>' . $term->name . '';
if( $list = get_product_terms( $term->term_id )) {
$html .= '<ul class="second_level">'.$list.'</ul>';
}
$html .= '</li>';
}
return $html;
}
You can add products category to menu using this function,
// Filter wp_nav_menu() to add additional links and other output
function new_nav_menu_items($items) {
// Woo function
/*//product_cat
$terms = get_terms( 'product_cat', $args );
print_r($terms);*/
if( $list = get_product_terms( 0 )) {
$menu1link = '<li class="home">' . __($list) . '</li>';
$homelink = '<li class="home">' . __('Home') . '</li>';
// add the home link to the end of the menu
$items = $items . $homelink;
$items = $items .$menu1link;
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'new_nav_menu_items' );
Display category image on single product page
$terms = get_the_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ){
$category_name = $term->name;
$category_thumbnail = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($category_thumbnail);
echo '<img class="absolute category-image" src="'.$image.'">';
}
<?php
$terms = get_the_terms( $post->ID, 'product-category' );
foreach ( $terms as $term ){
$category_name = $term->name;
$category_thumbnail = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($category_thumbnail);
?>
<div class="col-md-4 col-sm-4 col-xs-12">
<a href="">
<div class="service wow slideInLeft">
<div class="icon"><img src="<?php bloginfo('template_url'); ?>/images/buiding/icon18.png"></div>
<h4><?php echo $category_name; ?></h4>
</div>
</a>
</div>
<?php } ?>
I have added this code.but not working.Its showing an error like this "Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\Working-files\rajab\wp-content\themes\rajab\page-templates\building.php"
very old post, but if someone stills looking for an answer on that, I have done it this way:
<?php
$orderby = 'name';
$order = 'asc';
$hide_empty = false;
$cat_args = array(
'orderby' => $orderby,
'order' => $order,
'hide_empty' => $hide_empty,
);
$product_categories = get_terms('projects-category', $cat_args); //your custom category taxonomy
//var_dump($product_categories); //do var_dump in order to get the '_category_options', that I have
if (!empty($product_categories)) {
foreach ($product_categories as $key => $category) {
$term_image = get_term_meta($category->term_id, '_category_options', true);
$url = wp_get_attachment_image_src($term_image['category_image'], array(678, 420) ); //custom display image dimensions, according to your needs
?>
<img src="<?php echo $url[0]; ?> width="<?php echo $url[1]; ?>" height="<?php echo $url[2]; ?>" />
<?php
} //end foreach loop
} //end if
?>
So I have a snippet of code that grabs the categories and their coinciding posts and lists them outside of the loop (Below). I've been trying to get the post to link to #post-[ID] instead of the permalink - but I keep failing. Can anyone help?
<ul id="sidebar">
<?php
foreach( get_categories('orderby=ID&order=desc') as $cat ) :
if( !$cat->parent ) {
echo '<li class="title"><h2>' . $cat->name . '</h2>';
echo '<ul>';
process_cat_tree( $cat->term_id );
}
endforeach;
wp_reset_query(); //to reset all trouble done to the original query
//
function process_cat_tree( $cat) {
$args = array('category__in' => array( $cat ), 'numberposts' => -1);
$cat_posts = get_posts( $args );
$id = $post->ID;
global $post;
if( $cat_posts ) :
foreach( $cat_posts as $menuPost ) :
echo '<li';
if ( $menuPost->ID == $post->ID ) { echo ' class="active"'; }
echo '>';
echo '' . $menuPost->post_title . '';
echo '</li>';
endforeach;
endif;
echo '</ul></li>';
}
?>
The above code is outputting UL/LI tags like this:
CATEGORY
Post
Post
Post
CATEGORY
Post
Post
Post
CATEGORY
Post
Post
Post
Admittedly, I don't exactly understand what you mean by "linking to #post-[ID]", but going with the question title:
If you use get_permalink() when echoing the link, you will get the permalink - that's just what that function does.
Use get_the_ID() instead, if you want the post-ID returned, or the_ID() if you want it displayed (the_ID() is the same as echo get_the_ID()).
Edited from here:
If you're otherwise happy with the above code, changing
echo '' . $menuPost->post_title . '';
to
echo '' . $menuPost->post_title . '';
ought to do it.
However, I'd go about it like so:
echo '<ul>';
$cat_args = array(
'orderby' => 'name',
'order' => 'ASC'
);
$categories = get_categories($cat_args);
foreach($categories as $category) {
echo '<li class="title"><h2>' . $category->name . '</h2><ul>';
// query posts of that category:
$query_args = array(
'cat' => $category->cat_ID,
'posts_per_page' => -1
);
$your_query = new WP_Query( $query_args );
// loop through them:
while ( $your_query->have_posts() ) : $your_query->the_post();
echo '<li><a href="#post-';
the_ID();
echo '">';
the_title();
echo '</a></li>';
endwhile;
echo '</ul></li>';
// Reset Post Data
wp_reset_postdata();
}
echo '</ul>';