Tag cloud and alginment - css

Is their anyway using the code for wordpress tag list to show the active current tag that is selected ie if they select tag 3 should show it in an orange color the code I am using is as follows in a widget.
<?php wp_tag_cloud( 'format=list&orderby=count&order=DESC' ); ?>
But i not sure on how to do this with css.Also in my blog page the categorys below each post are sitting werid on every post how can i get it to align below Tovább olvasom for every post thanks
The url to check above is
http://kvalixhu.digitalthinkersni.co.uk/blog/

There is a way to style the current tag, but you need to add some code in your theme's functions.php take a look at this site, helped me when I needed that: http://georgebohnisch.com/extending-the-wordpress-tag-cloud/. Here is the code snipped from that site to protect against link rot:
add_filter ( 'wp_tag_cloud', 'tag_cloud_active_class' );
function tag_cloud_active_class( $taglinks ) {
if ( is_tag() ) {
$term_id = get_query_var('tag_id');
$taxonomy = 'post_tag';
$args ='include=' . $term_id;
$terms = get_terms( $taxonomy, $args );
$active_tag = $terms[0]->slug;
}
$tags = explode('', $taglinks);
$regex = "#(.*tag-link[-])(.*)(' title.*)#e";
foreach( $tags as $tag ) {
if (strpos($tag,$active_tag)) {
$tagn[] = preg_replace($regex, "('$1$2 '.'active-tag'.'$3')", $tag );
} else {
$tagn[] = preg_replace($regex, "('$1$2$3')", $tag );
}
}
$taglinks = implode('', $tagn);
return $taglinks;
}
To answer your category problem, what exactly is sitting weird?

Related

Best way to do this? Add tags as images on product pages

I am trying to be clever, but this is a bit beyond my abilities.
I have products with tags, these tags denote if something is environmentally friendly or not. Some of these tags are "biodegradable", compostable" and "recycled" for example.
If a product has these tags, I want to echo it on the front end.
I have the code to do this, and it is working as expected:
$current_tags = get_the_terms( get_the_ID(), 'product_tag' );
//only start if we have some tags
if ( $current_tags && ! is_wp_error( $current_tags ) ) {
//create a list to hold our tags
echo '<ul class="product_tags">';
//for each tag we create a list item
foreach ($current_tags as $tag) {
$tag_title = $tag->name; // tag name
echo '<li><img src="/img/tags/'.$tag_title.'.png"></li>';
}
echo '</ul>';
}
However, the only way to get this working is for me to edit content-single-product.php or single-product.php and place it in my theme in the woocommerce folder.
Is there a better way?
I'd like to control exactly where in the source order of that page it is displayed.
Figured it out. In functions.php:
/**
* Add test
*/
add_action( 'woocommerce_after_single_product_summary', 'tjobbetest', 5 );
function tjobbetest() {
$current_tags = get_the_terms( get_the_ID(), 'product_tag' );
//only start if we have some tags
if ( $current_tags && ! is_wp_error( $current_tags ) ) {
//create a list to hold our tags
echo '<ul class="product_tags">';
//for each tag we create a list item
foreach ($current_tags as $tag) {
$tag_title = $tag->name; // tag name
echo '<li><img src="/img/tags/'.$tag_title.'.png"></li>';
}
echo '</ul>';
}
}

How to add a category image menu to my shop page?

I want to add an additional menu consisting only of the product category images. I'm using woocommerce. I would like it to be centered in the middle of the page and drop down. What kind of short code does this require? I've tried using Mega Menu plugin but it only alters my primary menu.
Thanks!
I don't think there is a direct way for that, You can use this code to get an array of the categories images URLs, You can use the "woocommerce_before_shop_loop" action then, loop over the array and put the images in the HTML form you like.
add_action( 'woocommerce_before_shop_loop', function() {
$categories = get_terms( 'product_cat' );
$categories_thumbnails_urls = [];
foreach ( $categories as $category ) {
$thumbnail_id = get_woocommerce_term_meta( $category->term_id, 'thumbnail_id', true );
$thumbnail_url = wp_get_attachment_url( $thumbnail_id );
if ( empty( $thumbnail_url ) ) {
continue;
}
$categories_thumbnails_urls[] = $thumbnail_url;
}
foreach ( $categories_thumbnails_urls as $cat_thumb_url ) {
// ...
}
});

How to force Wordpress search bar to search pages not products?

First let me say I've hardly ever posted on stackoverflow so I hope I'm in the right section.
I have a Wordpress site with Woocommerce for my client. I want the search bar to NOT search for products and instead search for pages. It's important to ignore all products because we don't order products from product pages, instead I have collections of order forms on multiple pages that are titled with the product name. Can we change the search bar so it picks up on just the pages and not products?
I'm comfortable with working in the functions.php or duplicating Woocommerce files in my child theme. Any help is much appreciated!
[** EDITED/UPDATE **]
I now have this:
function filter_search($query) {
if ($query->is_search) {
$query->set('post_type', array('post', 'page'));
}
return $query;
}
add_filter('pre_get_posts', 'filter_search');
function __search_by_title_only( $search, &$wp_query ){
global $wpdb;
if ( empty( $search ) )
return $search; // skip processing - no search term in query
$q = $wp_query->query_vars;
$n = ! empty( $q['exact'] ) ? '' : '%';
$search =
$searchand = '';
foreach ( (array) $q['search_terms'] as $term ) {
$term = esc_sql( like_escape( $term ) );
$search .= "{$searchand}($wpdb->posts.post_title LIKE '{$n}{$term{{$n}')";
$searchand = ' AND ';
}
if ( ! empty( $search ) ) {
$search = " AND ({$search}) ";
if ( ! is_user_logged_in() )
$search .= " AND ($wpdb->posts.post_password = '') ";
}
$search .= " AND ($wpdb->posts.post_type = 'page') ";
return $search;
}
add_filter( 'posts_search', '__search_by_title_only', 500, 2 );
Which is working perfectly. It searches for pages not products and it searches for the search word in a title instead of the content. Now my only request and issue is I need to make it output the page LINK not the page CONTENT. (It outputs the pure content of the page, one after another)
[** EDITED/UPDATE #2 **]
I achieved the same result as above by removing all of that code and copying product-searchform.php (from woocommerce) into my child theme (in a folder called woocommerce) and changing:
<input type="hidden" name="post_type" value="product" />
to
<input type="hidden" name="post_type" value="page" />
This achieves the same affect of querying only pages and not products, as well as searching the keyword in the page titles instead of searching in the page content. Now I am still getting the same output of it displaying the page content and which I only want it to display the link to the page, and not the content. Any ideas?
[** EDITED/UPDATE 3 **]
Okay, I solved this.
Next step is to copy search.php into your child theme and add some code.
Add:
$s=get_search_query();
$args = array('s' =>$s);
// The Query
$the_query = new WP_Query( $args );
Right before
if ( have_posts() ) : ?>
Then add:
while ( $the_query->have_posts() ) {
$the_query->the_post();?>
<li>
<?php the_title(); ?>
</li><?php
}
Right before:
get_template_part( 'loop' );
And comment that get_template_part('loop'); part out.
Try to add this code in functions.php
function filter_search($query) {
if ($query->is_search) {
$query->set('post_type', array('post', 'page'));
};
return $query;
};
add_filter('pre_get_posts', 'filter_search');

Wordpress next_posts_link Linking to wrong URL

I have next_posts_link setup on the single.php, and it generates the following URL:
http://mywebsite.com/news/article1/page/2
However, this url would be redirected to
http://mywebsite.com/news/article1
Any way to get to the second page?
It seems that it's an issue with Wordpress permalinks. I currently use a custom permalink structure
/%category%/%postname%/
Setting the permalinks as default fixes this issue, but this project needs to have the custom permalinks.
You should be using next_post_link() which is meant to navigate between single posts. next_posts_link naviugate between pages
If you however need to navigate a paged post (using <--nextpage-->), then you should make use of wp_link_pages
EDIT
I have recently did the same exact thing on WPSE. As I explain in that post, the structure you need is not available for any permalink structure outside the default permalink structure.
Just a note before I paste that answer, I have done that for the /%postname%/ permalink structure. Just change all instances of /%postname%/ to the appropriate structure
POST FROM WPSE
As I said, this whole setup you are after is not possible natively with pretty permalinks. Your setup probably works with default permalink structure as both queries (the main query and your custom query) read these permalinks in the same way. When you switch to pretty permalinks, the two queries on the single page interpret the URL differently causing one or the other to fail when you try to paginate your custom query
Single pages was never meant to be paginated in this manner, specially using pretty permalinks. I have gone and played around with a couple of ideas, and the best way to accomplish this is
To write your own pagination functions that can read the page number from the URL
Write your own function that can append the page number to the URL, something like adding /2/ to the URL of single pages.
I must stress, if you are paginating single post with <!--nextpage-->, your post will also paginate together with your custom query. Also, if your permalink structure is not set to /%postname%/, the code will fail and display an error message through wp_die()
THE CODE
Here is the code that will get the next/previous page and also add the pagenumber to the URL.
function get_single_pagination_link( $pagenum = 1 ) {
global $wp_rewrite;
if( is_singular() && $wp_rewrite->permalink_structure == '/%postname%/') {
$pagenum = (int) $pagenum;
$post_id = get_queried_object_id();
$request = get_permalink( $post_id );
if ( $pagenum > 1 ) {
$request = trailingslashit( $request ) . user_trailingslashit( $pagenum );
}
return esc_url( $request );
}else{
wp_die( '<strong>The function get_single_pagination_link() requires that your permalinks are set to /%postname%/</strong>' );
}
}
You can use this function as follow to get the link for any page in the single page when paginating your custom query
get_single_pagination_link( 'pagenumber_of_previous_or_next_page' );
Again, as I said, there is no pagination function that will be able to paginate your custom query or read pagenumbers from the URL, so you have to write your own.
Here is my idea of creating links to the next and previous pages in your custom query. If you look closely, you will see how I have used the previous declared function get_single_pagination_link() to get the links to the next and previous pages
function get_next_single_page_link ( $label = null, $max_page = 0 ) {
global $wp_query;
if ( !$max_page ) {
$max_page = $wp_query->max_num_pages;
}
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
if( is_singular() ) {
$next_page = intval($paged) + 1;
if ( null === $label ) {
$label = __( 'Next Page »' );
}
if ( ( $next_page <= $max_page ) ) {
return '' . $label . '';
}
}
}
function get_previous_single_page_link( $label = null ) {
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
if( is_singular() ) {
$prev_page = intval($paged) - 1;
if ( null === $label ) {
$label = __( '« Previous Page' );
}
if ( ( $prev_page > 0 ) ) {
return '' . $label . '';
}
}
}
You can now use this two functions in your code to paginate your custom query. Both functions work exactly the same as get_next_posts_link() and get_previous_posts_link() and uses the same exact parameters, so you'll need to keep in mind that you need to pass the $max_page parameter for your custom query
Here is your custom query with these functions.
function get_related_author_posts() {
global $authordata, $post;
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
$args = array(
'posts_per_page' => 2,
'paged' => $paged
);
$authors_posts = new WP_Query( $args );
$output = '';
if( $authors_posts->have_posts() ) {
$output = '<ul>';
while( $authors_posts->have_posts() ) {
$authors_posts->the_post();
$output .= '<li>' . get_the_title() . '' . get_the_excerpt() . '</li>';
}
$output .= '</ul>';
$output .= get_previous_single_page_link();
$output .= get_next_single_page_link( null , $authors_posts->max_num_pages );
wp_reset_postdata();
}
return $output;
}
If you want your long post to be shown 2 or 3 pages . You just have to add <!--nextpage--> in your post . The content after it will be shown in the next page . Reference

Add featured image to wp_nav_menu items

This is a self Q&A.
How do you modify the text/html that appears in the output of a wp_nav_menu? For example, I wanted to add the featured image for pages and categories.
You see examples of doing this with a custom walker, but the code is very complex to do for small changes. Surely there is a way to do it with a filter?
This is the code I came up with thanks to some help from a Wordpress StackOverflow answer that I can't find anymore (please comment with a link if you find it).
First you need to add the filter to the specific menu (you could add it to all menus if you want - just use the add_filter line by itself).
// Add filter to specific menus
add_filter('wp_nav_menu_args', 'add_filter_to_menus');
function add_filter_to_menus($args) {
// You can test agasint things like $args['menu'], $args['menu_id'] or $args['theme_location']
if( $args['theme_location'] == 'header_menu') {
add_filter( 'wp_setup_nav_menu_item', 'filter_menu_items' );
}
return $args;
}
Then you need to build out the code to get the post or category ID from the $item object passed to the filter. It's not as easy as you'd expect, as $item doesn't contain the underlying post/category ID, just the menu item ID. So I use the URL's to do a reverse lookup of the IDs.
This won't work for tags used in a menu, or custom taxonomys. I only needed it for categories, so this is all I built.
// Filter menu
function filter_menu_items($item) {
if( $item->type == 'taxonomy') {
// For category menu items
$cat_base = get_option('category_base');
if( empty($cat_base) ) {
$cat_base = 'category';
}
// Get the path to the category (excluding the home and category base parts of the URL)
$cat_path = str_replace(home_url().'/'.$cat_base, '', $item->url);
// Get category and image ID
$cat = get_category_by_path($cat_path, true);
$thumb_id = get_term_meta($cat->term_id, '_term_image_id', true); // I'm using the 'Simple Term Meta' plugin to store an attachment ID as the featured image
} else {
// Get post and image ID
$post_id = url_to_postid( $item->url );
$thumb_id = get_post_thumbnail_id( $post_id );
}
if( !empty($thumb_id) ) {
// Make the title just be the featured image.
$item->title = wp_get_attachment_image( $thumb_id, 'poster');
}
return $item;
}
And then you want to remove the filter that you applied at the beginning, so that the next menu processed doesn't use the same HTML as defined above in filter_menu_items().
// Remove filters
add_filter('wp_nav_menu_items','remove_filter_from_menus', 10, 2);
function remove_filter_from_menus( $nav, $args ) {
remove_filter( 'wp_setup_nav_menu_item', 'filter_menu_items' );
return $nav;
}
Modified Drew Baker answer. It works without plugins, also if there is no category with current slug it checks for woocommerce product category ('product_cat').
functions.php
// Add filter to specific menus
add_filter('wp_nav_menu_args', 'add_filter_to_menus');
function add_filter_to_menus($args) {
// You can test agasint things like $args['menu'], $args['menu_id'] or $args['theme_location']
if( $args['theme_location'] == 'menu-header') {
add_filter( 'wp_setup_nav_menu_item', 'filter_menu_items' );
}
return $args;
}
// Filter menu
function filter_menu_items($item) {
if( $item->type == 'taxonomy') {
// Get category and image ID
$slug = pathinfo( $item->url, PATHINFO_BASENAME );
$cat = get_term_by( 'slug', $slug, 'category' );
// If there is no standard category try getting product category
if( !$cat ) {
$cat = get_term_by( 'slug', $slug, 'product_cat' );
}
$thumb_id = get_term_meta($cat->term_id, 'thumbnail_id', true);
} else {
// Get post and image ID
$post_id = url_to_postid( $item->url );
$thumb_id = get_post_thumbnail_id( $post_id );
}
if( !empty($thumb_id) ) {
// Make the title just be the featured image.
$item->title = wp_get_attachment_image( $thumb_id, 'poster');
// Display image + title example
// $item->title = wp_get_attachment_image( $thumb_id, 'poster').$item->title;
}
return $item;
}
// Remove filters
add_filter('wp_nav_menu_items','remove_filter_from_menus', 10, 2);
function remove_filter_from_menus( $nav, $args ) {
remove_filter( 'wp_setup_nav_menu_item', 'filter_menu_items' );
return $nav;
}

Resources