I would like to have an alphabet listing the products by ABC... list
Something like
A | B | C | D .... Z
And that all link to the products-list sorted by their first letter.
I would like it placed above the list where the sorting dropdown menu is (top of the woocommerce ).
Is it possible somehow with coding, or is there some plug-in for it?
I put this at the end of orderby.php:
<div id="alphabet">
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => -1
);
$query = new WP_Query($args);
$by_letter = array();
while( $query->have_posts() ) { $query->the_post();
global $post;
$letter = substr($post->post_name, 0, 1);
if ( ! isset($by_letter[$letter]) ) $by_letter[$letter] = array();
$by_letter[$letter][] = $post;
}
wp_reset_postdata();
?>
<?php
if ( ! empty( $by_letter ) ) {
ksort($by_letter); // order the array
// fill the array with letters have no posts
$by_letter = fill_by_letter_array( $by_letter );
display_letters_anchors( array_keys( $by_letter ) );
foreach( $by_letter as $letter => $posts ) {
?>
<div id="Productlist_<?php echo strtoupper($letter); ?>" class="Productlist_<?php echo strtoupper($letter); ?>_object productlists">
<?php
if ( ! empty($posts) ) {
foreach ( $posts as $post ) {
setup_postdata($post);
// just an example of post output
echo '<p>' . get_the_title() . '</p>';
}
} else {
echo '<p>' . __('No products.') . '</p>';
}
?>
</div>
<?php
}
wp_reset_postdata();
}
?>
</div>
A bit of css, and it Works great!
Related
I know this question has been asked before. I checked through multiple answers on this site,
for example:
Wordpress loop with different bootstrap columns
https://wordpress.stackexchange.com/questions/222278/how-to-separate-posts-loop-in-to-two-columns/222281
... but I cannot work out how to integrate answers with my code (assuming that is possible).
I want to display a list of Categories and their related posts on a page.
The code I'm using works fine BUT displays the results in a single column down the page:
I want to split the display into 2 columns, like in the image below, if possible:
The code I'm using (currently placed in a new page template) is as follows:
<?php
/*
* Template Name: Alphabetical List
*/
get_header();
// Grab all the categories from the database that have posts.
$categories = get_terms( 'category', 'orderby=name&order=ASC');
// Loop through categories
foreach ( $categories as $category ) {
// Display category name
echo '<h2 class="post-title">' . $category->name . '</h2>';
echo '<div class="post-list">';
// WP_Query arguments
$args = array(
'cat' => $category->term_id,
'order' => 'ASC',
'orderby' => 'title',
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
?>
<p><?php the_title(); ?></p>
<?php
} // End while
} // End if
echo '</div>';
// Restore original Post Data
wp_reset_postdata();
} // End foreach
get_footer();
?>
Wondering if anyone can help me to get this code to display loop results in 2 columns.
Many thanks.
UPDATE TO QUESTION
Karl, thanks for your answer. Your script works, but with a small problem:
The Categories/Related Posts display in 2 columns but a 'gap/space' appears in the middle of the display of data (see image below):
I added to your code slightly so I could display a custom field I inserted into each post. I'm not sure if this has caused the problem.
Altered code (changes are immediately after $query->the_post();):
<?php
/*
* Template Name: Alphabetical List
*/
get_header();
?>
<div style="height:100px"></div>
<?php
// Grab all the categories from the database that have posts.
$categories = get_terms( 'category', 'orderby=name&order=ASC');
// Loop through categories
echo "<div class='new-column'>";
$counter = 0;
foreach ( $categories as $category ) {
if($counter % 4 == 0 && $counter !=0){
echo "<div class='new-column'>";
}
// Display category name
echo '<h2 class="post-title">' . $category->name . '</h2>';
echo '<div class="post-list">';
// WP_Query arguments
$args = array(
'cat' => $category->term_id,
'order' => 'ASC',
'orderby' => 'title',
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$customfieldvalue = get_post_meta($post->ID, "PDF", true);
?>
<p><a href="<?php echo $customfieldvalue; ?>" target="_blank"><?php
the_title(); ?></a></p>
<?php
} // End while
} // End if
echo '</div>';
// Restore original Post Data
wp_reset_postdata();
$counter++;
if($counter % 4 == 0){
echo "</div>";
}
} // End foreach
if($counter % 4 != 0){
echo "</div>";
}
get_footer();
?>
I've used bootstrap classes (row, col-6). Checked the size of categories array and used 2 variables - one as a counter and the other one to check if the column is first or second.
<?php
/*
* Template Name: Alphabetical List
*/
get_header();
// Grab all the categories from the database that have posts.
$categories = get_terms( 'category', 'orderby=name&order=ASC');
//get size of category
$catSize = sizeof($categories);
$j = 1;
$n = 1;
// Loop through categories
foreach ( $categories as $category ) {
if($n == 1){
echo '<div class="row">';
}
echo'<div class="col-6">';
// Display category name
echo '<h2 class="post-title">' . $category->name . '</h2>';
echo '<div class="post-list">';
// WP_Query arguments
$args = array(
'cat' => $category->term_id,
'order' => 'ASC',
'orderby' => 'title',
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
?>
<p><?php the_title(); ?></p>
<?php
} // End while
} // End if
echo '</div></div>';
if($n == 1){
if($j == $catSize){
echo '<div class="col-6"></div>
</div>';
}
else{
$n = 2;
}
}
else{
echo '</div>';
$n =1;
}
$j++;
}
// Restore original Post Data
wp_reset_postdata();
} // End foreach
get_footer();
?>
Try this, I used a modulos operator "%" to group loops into 4, it will create new column every 4 loops. MAKE SURE YOU ADD CSS TO class new-column to arrange it like columns.
<?php
/*
* Template Name: Alphabetical List
*/
get_header();
// Grab all the categories from the database that have posts.
$categories = get_terms( 'category', 'orderby=name&order=ASC');
// Loop through categories
echo "<div class='new-column'">;
$counter = 0;
foreach ( $categories as $category ) {
if($counter % 4 == 0 && $counter !=0){
echo "<div class='new-column'">;
}
// Display category name
echo '<h2 class="post-title">' . $category->name . '</h2>';
echo '<div class="post-list">';
// WP_Query arguments
$args = array(
'cat' => $category->term_id,
'order' => 'ASC',
'orderby' => 'title',
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
?>
<p><?php the_title(); ?></p>
<?php
} // End while
} // End if
echo '</div>';
// Restore original Post Data
wp_reset_postdata();
$counter++;
if($counter % 4 == 0){
echo "</div>";
}
} // End foreach
if($counter % 4 != 0){
echo "</div>";`enter code here`
}
get_footer();
?>
I created a custom post type "stm_media_gallery"
And three category inside this custom post type.
I want to display category name associated with each post.
<?php $gallery_query = new WP_Query( array('post_type' =>
'stm_media_gallery', 'posts_per_page' => -1) );
if( $gallery_query->have_posts() ) :
while( $gallery_query->have_posts() ) : $gallery_query->the_post(); ?>
--Display post name and its category name
<?php endif; ?>
<?php endwhile; ?>
You just need to put following code inside loop :
<div>
<?php
foreach((get_the_category()) as $category){
echo $category->name."<br>";
echo category_description($category);
}
?>
</div>
Update in existing code
<?php $gallery_query = new WP_Query(
array('post_type' => 'stm_media_gallery',
'posts_per_page' => -1) );
if( $gallery_query->have_posts() ) :
while( $gallery_query->have_posts() ) : $gallery_query->the_post();
$gallery_category = get_the_category( get_the_ID() );
the_title( '<h3>', '</h3>' );
echo "<br>";
<?php foreach ( $gallery_category as $key => $value) { echo $value->category_nicename; } ?>
<?php endif; ?>
<?php endwhile; ?>
You can use the pre-made WordPress function the_category( $separator, $parents, $post_id ) to print the post categories as links.
Further information on the WordPress Codex: Function Reference: the_category
Edit: Print only the names:
$categories = get_the_category();
if ( ! empty( $categories ) ) {
echo esc_html( $categories->name );
}
Put this inside While Loop
global $post;
$postcat = get_the_category( $post->ID );
I have a list of posts on my website, what I'm trying to do is to wrap them alphabetically from A-Z by title to get a glossary like this:
A.
Apple
B.
Banana
C.
Carotts
D.
E.
F.
G.
Grenada
and so on untill letter z.
I want the letter to be displayed even if there's no post.
and i want to wrap results inside this structure :
<div class="group_letter">
<div class="letter">A</div>
<div class="post">Apple</div>
</div>
<div class="group_letter">
<div class="letter">B</div>
<div class="post">Banana</div>
</div>
here is what I've got so far :
<?php
$letter=' ';
query_posts( array ( 'post_type' => 'auteurs', 'orderby' => 'title', 'order' => 'ASC' ) );
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$title=get_the_title();
$initial=strtoupper(substr($title,0,1));
if($initial!=$letter) {
echo "<div>$initial</div>";
$letter=$initial;
}
echo "<div class='post'>" . $title. "</div>";
?>
<?php endwhile; endif; wp_reset_query(); ?>
here is the result :
<div class='letter'>A</div>
<div class='post'>Apple</div>
<div class='letter'>B</div>
<div class='post'>Banana</div>
<div class='letter'>C</div>
<div class='post'>carotts</div>
<div class='letter'>G</div>
<div class='post'>Grenanda</div>
I have 2 problems :
Empty letters are not displayed.
I can't find a way to wrap my groups inside group_letter div.
I would solve this with a filter on WP_Query. One that detects an extra query variable.
Add this into your functions.php
add_filter( 'posts_where', 'title_filter', 10, 2 );
function title_filter( $where, &$wp_query )
{
global $wpdb;
if ( $search_term = $wp_query->get( 'search_prod_title' ) ) {
$where .= ' AND ' . $wpdb->posts . '.post_title LIKE \'%' . esc_sql( $wpdb->esc_like( $search_term ) ) . '%\'';
}
return $where;
}
Once you have filter in place you can use wp_query and array range of alphabet
foreach (range('A', 'Z') as $char) {
echo '<div class="group_letter">';
echo '<div class="letter">'.$char.'</div>';
$args = array(
'post_type' => 'auteurs',
'posts_per_page' => -1,
'search_prod_title' => $char,
'post_status' => 'publish',
'orderby' => 'title',
'order' => 'ASC'
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
$title=get_the_title();
$initial=strtoupper(substr($title,0,1));
if($initial==$char) {
echo "<div class='post'>" . $title. "</div>";
}
endwhile;
wp_reset_postdata();
endif;
echo '</div>';
}
remove_filter( 'posts_where', 'title_filter', 10, 2 );
I have not tested this code, I hope it should work.
You can get more information about Wp_query https://codex.wordpress.org/Class_Reference/WP_Query
Sorry, postin TV from phone, so may be not displaying properly
Firstly, you have to create an array of all alphabets.
$alph = array('A', 'B', 'C',.... 'Z');
<
?php
$title=get_the_title();
foreach($alph as $key) {
// add while loop here
initial=strtoupper(substr($title,0,1));
if($initial!=$key) {
echo '<div class="group_letter">';
echo "<div>$key</div>";
}else{
echo "<div class='post'>" . $title. "</div>";
}
echo "</div>";
// end while loop here
}
?>
I am trying to insert google ads between every 7th posts in my wordpress site with infinite scroll. i searched and found results but that didn't worked for me because the WordPress theme i am using is little complex. the result i found was to add this code
<?php $postnum++; if($postnum%5 == 0) { ?>
YOUR AD CODE HERE
<?php } ?>
after <?php endwhile; ?> in index.php, but in my case the loop is different from the general wordpress theme. the loop i have is like this and i want to know how can i implement the above code in my case.
loop code
static function loop( $template ) {
global $wp_query;
echo '<input type="hidden" id="query-' . $template . '" value="' . urlencode( json_encode( $wp_query -> query ) ) . '" />';
if ( count( $wp_query->posts) > 0 ) {
if( self::is_grid( $template ) ){
?>
<div class="loop-container-view grid">
<?php self::loop_switch( $template , 1 ); ?>
</div>
<?php
}else{
?>
<div class="loop-container-view list" id="contloop">
<?php self::loop_switch( $template , 0 ); ?>
</div>
<?php
}
get_template_part('pagination');
} else {
get_template_part('loop', '404');
}
}
which then call this code, i made it a little shorter
static function get( $post , $template = 'blog_page' ){
$meta = meta::get_meta( $post -> ID , 'settings' );
if( isset( $meta['safe'] ) ){
if( meta::logic( $post , 'settings' , 'safe' ) ){
$classes = ' nsfw';
}else{
$classes = ' ';
}
}else{
$classes = ' ';
}
?>
<!-- post -->
<article id="post-<?php echo $post -> ID; ?>" <?php post_class( 'post ' . $classes , $post -> ID ); ?>>
</article>
<?php
}
loop switch function
static function loop_switch( $template = '' , $grid = 1 ) {
global $wp_query;
if ( !empty( $template ) ) {
$ajax = false;
} else {
$query = array();
$template = isset( $_POST['template'] ) && strlen( $_POST['template'] ) ? $_POST['template'] : exit();
$query = isset( $_POST['query'] ) && !empty( $_POST['query'] ) ? (array)json_decode( urldecode( $_POST['query'] ) ) : exit();
$query['post_status'] = 'publish';
$wp_query = new WP_Query( $query );
$grid = isset($_POST['grid']) ? (int)$_POST['grid'] : 1;
$ajax = true;
}
$template = str_replace( array( '_hot' , '_new' , '_like' ) , '' , $template );
if( $grid == 1 ){
$k = 1;
$i = 1;
$nr = $wp_query->post_count;
if (layout::get_length(0, $template) == 940 ) {
$div = 3;
} else {
$div = 2;
}
foreach ($wp_query->posts as $post) {
$wp_query->the_post();
if ($i == 1) {
if (( $nr - $k ) < $div) {
$classes = 'class="last"';
} else {
$classes = '';
}
echo '<div ' . $classes . '>';
}
self::grid( $post, $template );
if ($i % $div == 0) {
echo '</div>';
$i = 0;
}
$i++;
$k++;
}
if ($i > 1) {
echo '</div>';
}
}else{
foreach( $wp_query->posts as $index => $post ) {
$wp_query->the_post();
if ($index > 0) {
?><!--<p class="delimiter"> </p>--><?php
}
self::get( $post, $template );
}
}
if( $ajax ){
exit();
}
}
and post is called here in front-page.php file
<?php
$wp_query = new WP_Query(array( 'page_id' => options::get_value( 'front_page' , 'page' ) ) );
if( $wp_query -> post_count > 0 ){
foreach( $wp_query -> posts as $post ){
$wp_query -> the_post();
$post_id = $post -> ID;
?>
<article id="post-<?php the_ID(); ?>" <?php post_class() ?>>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
<!-- post meta top -->
<?php
if( meta::logic( $post , 'settings' , 'meta' ) ){
get_template_part( 'post-meta-top' );
}
?>
</header>
<div class="entry-content">
<?php
/* if show featured image */
if( options::logic( 'blog_post' , 'show_featured' ) ){
if( has_post_thumbnail ( $post -> ID ) ){
$src = wp_get_attachment_image_src( get_post_thumbnail_id( $post -> ID ) , 'full' );
?>
<div class="featimg circle">
<div class="img">
<?php
ob_start();
ob_clean();
get_template_part( 'caption' );
$caption = ob_get_clean();
?>
<?php the_post_thumbnail( '600x200' ); ?>
<?php
if( strlen( trim( $caption) ) ){
?>
<p class="wp-caption-text"><?php echo $caption; ?></p>
<?php
}
?>
</div>
</div>
<?php
}
}
?>
</div>
<footer class="entry-footer">
<div class="share">
<?php get_template_part( 'social-sharing' ); ?>
</div>
<div class="excerpt">
<?php the_content(); ?>
<?php wp_link_pages(); ?>
</div>
</footer>
</article>
<?php
}
}else{
/* not found page */
get_template_part( 'loop' , '404' );
}
Try this in front-page.php. You may have to adjust it to add after correct number of posts.
if( $wp_query -> post_count > 0 ){
$postnum = 0;
foreach( $wp_query -> posts as $post ){
$postnum++;
if( $postnum%5 == 0 ) {
echo '<p> ---- insert ad here ---- </p>';
}
$wp_query -> the_post();
$post_id = $post -> ID;
?>
it should replace this bit of code
if( $wp_query -> post_count > 0 ){
foreach( $wp_query -> posts as $post ){
$wp_query -> the_post();
$post_id = $post -> ID;
?>
Is there a better way to get the category names for a custom post type in wordpress?
<?php // get the portfolio categories
$terms = get_the_terms( $post->ID, 'filters' );
if ( $terms && ! is_wp_error( $terms ) ) :
$names = array();
$slugs = array();
foreach ( $terms as $term ) {
$names[] = $term->name;
$slugs[] = $term->slug;
}
$name_list = join( " / ", $names );
$slug_list = join( " category-", $slugs );
endif;
?>
<!-- BEGIN portfolio-item-->
<li class="portfolio-item third column category-<?php echo $slug_list; ?>" data-filter="category-<?php echo $slug_list; ?>">
<?php
$taxonomy = 'filters';
$terms = get_terms($taxonomy);
if ( $terms && !is_wp_error( $terms ) ) :
?>
<ul>
<?php foreach ( $terms as $term ) { ?>
<li><?php echo $term->name; ?></li>
<?php } ?>
</ul>
<?php endif;?>
Or in fuctions.php place this:
function get_the_category_custompost( $id = false, $tcat = 'category' ) {
$categories = get_the_terms( $id, $tcat );
if ( ! $categories )
$categories = array();
$categories = array_values( $categories );
foreach ( array_keys( $categories ) as $key ) {
_make_cat_compat( $categories[$key] );
}
return apply_filters( 'get_the_categories', $categories );
}
and call the function as:
<?php $cat = get_the_category_custompost($post->ID, 'Your Custom Taxonomy'); ?>
My answer seems too simple, but I used this to list the categories from a wordpress plugin called DW Question Answer that has separate categories from the standard wp categories.
I am assuming that Design Wall used custom post types to create the q&a part and taxonomies to create the categories.
<ul>
<?php wp_list_categories('taxonomy=dwqa-question_category&hide_empty=0&orderby=id&title_li=');?>
</ul>
Assuming your custom taxonomy is recipegroups, i have implemented and tested this code in functions.php and i am sure that it will work in plugins too.
$recipeTerms = get_terms(array(
'taxonomy' => 'recipegroups',
));
foreach($recipeTerms as $recipeTerm){
if($recipeTerm->parent==0){
echo "<div class='termsBox'>"; // remove these div's to suit your needs..
$termLink =get_term_link( $recipeTerm );
echo "<a href='$termLink'><div class='termParent'>".$recipeTerm->name."</div></a> ";
$termChilds = get_term_children($recipeTerm->term_id, 'recipegroups' );
foreach($termChilds as $child){
$chTerm = get_term_by( 'id', $child, 'recipegroups');
$termLink =get_term_link( $chTerm );
echo "<a href='$termLink'><div class='top-cat-items'>".$chTerm->name."</div></a>";
}
echo "</div>"; // end of termsBox div
}
}