We Keep Coding

Adding Pagination to a wordpress post list

I am trying to add pagination to this post list https://cutt.ly/tjuH6lJ , the code i used was
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<!-- the shortcode to the list -->
...............................
<script>
var myList = new List('main_blog', {
valueNames: ['pis-li'],
page: 3,
pagination: true
});
</script>
I also tried the PHP pagination code and added it to my functions.php
function pagination_nav() {
global $wp_query;
if ( $wp_query->max_num_pages > 1 ) { ?>
<nav class="pagination" role="navigation">
<div class="nav-previous"><?php next_posts_link( '← Older posts' ); ?></div>
<div class="nav-next"><?php previous_posts_link( 'Newer posts →' ); ?></div>
</nav>
<?php }}
and invoke it with <?php pagination_nav(); ?>
i am using the "Extra" theme from "DIVI" and the post list was made with a plugin called "Posts in Sidebar"

You are looking for the_posts_pagination() function.
Displays a paginated navigation to next/previous set of posts, when applicable.
Source # https://developer.wordpress.org/reference/functions/the_posts_pagination/
It uses the arguments of the get_the_posts_pagination and paginate_links() functions.
See get_the_posts_pagination() for available arguments.
Source # https://developer.wordpress.org/reference/functions/get_the_posts_pagination/
Source # https://developer.wordpress.org/reference/functions/paginate_links/
Pagination & loop
<?php
if( have_posts() ):
while( have_posts() ): the_post();
echo '<article>';
if( get_the_title() !== '' ):
esc_attr( the_title( '<h1>', '</h1>' ) );
endif;
if( get_the_content() !== '' ):
esc_attr( the_content() );
endif;
echo '<article>';
endwhile;
/**
* the_posts_pagination
* Displays a paginated navigation to next/previous set of posts, when applicable.
* #link https://developer.wordpress.org/reference/functions/the_posts_pagination/
* #link https://developer.wordpress.org/reference/functions/get_the_posts_pagination/
* #link https://developer.wordpress.org/reference/functions/paginate_links/
*/
the_posts_pagination( array(
'screen_reader_text' => ' ',
'prev_text' => '←',
'next_text' => '→',
'show_all' => true,
) );
else:
echo 'No posts yet!';
endif; ?>
If I remember correctly by default, Wordpress will show 12 posts, before showing the pagination.

WooCommerce Load More Button functionality problem

I have a load more button (using this tutorial: https://rudrastyh.com/wordpress/load-more-posts-ajax.html) that I am using on a woocommerce product page.
It all works great apart from when I click load more, it loads the products above and the button and then the user has to scroll up to see the new products.
On clicking a second time, the next lot of products load between the 1st and 2nd load. You have to go and find them.
Does anyone have any ideas what might be causing this?
I can't show you a live view due to my site not being live or on staging yet.
archive-product.php:
<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* #see https://docs.woocommerce.com/document/template-structure/
* #package WooCommerce/Templates
* #version 3.4.0
*/
defined( 'ABSPATH' ) || exit;
get_header( 'shop' );
?>
<div id="top"></div>
<?php if ( is_active_sidebar( 'store_sidebar' ) ) { ?>
<ul data-aos="fade" id="secondary" class="aside sidebar">
<?php dynamic_sidebar( 'store_sidebar' ); ?>
</ul>
<?php } ?>
<?php
/**
* Hook: woocommerce_before_main_content.
*
* #hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* #hooked woocommerce_breadcrumb - 20
* #hooked WC_Structured_Data::generate_website_data() - 30
*/
do_action( 'woocommerce_before_main_content' );
?>
<header data-aos="fade" class="woocommerce-products-header">
<h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
<?php
/**
* Hook: woocommerce_archive_description.
*
* #hooked woocommerce_taxonomy_archive_description - 10
* #hooked woocommerce_product_archive_description - 10
*/
do_action( 'woocommerce_archive_description' );
?>
</header>
<?php
if ( woocommerce_product_loop() ) {
/**
* Hook: woocommerce_before_shop_loop.
*
* #hooked woocommerce_output_all_notices - 10
* #hooked woocommerce_result_count - 20
* #hooked woocommerce_catalog_ordering - 30
*/
do_action( 'woocommerce_before_shop_loop' );
woocommerce_product_loop_start();
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();
/**
* Hook: woocommerce_shop_loop.
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
}
global $wp_query;
if ( $wp_query->max_num_pages > 1 ) {
echo '<button class="misha_loadmore">Load more</button>';
}
echo '<div class="top">';
echo '<a class="more-link" href="#top">Back to top <span class="arrow">↑</span></a>';
echo '</div>';
woocommerce_product_loop_end();
/**
* Hook: woocommerce_after_shop_loop.
*
* #hooked woocommerce_pagination - 10
*/
do_action( 'woocommerce_after_shop_loop' );
} else {
/**
* Hook: woocommerce_no_products_found.
*
* #hooked wc_no_products_found - 10
*/
do_action( 'woocommerce_no_products_found' );
}
/**
* Hook: woocommerce_after_main_content.
*
* #hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );
/**
* Hook: woocommerce_sidebar.
*
* #hooked woocommerce_get_sidebar - 10
*/
// do_action( 'woocommerce_sidebar' );
?>
<?php
get_footer( 'shop' );
js:
jQuery(function($){
$('.misha_loadmore').click(function(){
var button = $(this),
data = {
'action': 'loadmore',
'query': misha_loadmore_params.posts,
'page' : misha_loadmore_params.current_page
};
$.ajax({
url : misha_loadmore_params.ajaxurl,
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
button.text('Loading...');
},
success : function( data ){
if( data ) {
button.text( 'Load more' ).next().before(data);
misha_loadmore_params.current_page++;
if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page )
button.remove();
} else {
button.remove();
}
}
});
});
});
functions.php
// AJAX LOAD MORE - PRODUCTS PAGE
function misha_my_load_more_scripts() {
global $wp_query;
wp_enqueue_script('jquery');
wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '_static/js/main.js', array('jquery') );
wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php',
'posts' => json_encode( $wp_query->query_vars ),
'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
'max_page' => $wp_query->max_num_pages
) );
wp_enqueue_script( 'my_loadmore' );
}
add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );
// AJAX HANDLER
function misha_loadmore_ajax_handler(){
$args = json_decode( stripslashes( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1;
$args['post_status'] = 'publish';
query_posts( $args );
if( have_posts() ) :
while( have_posts() ): the_post();
wc_get_template_part( 'content', 'product' );
endwhile;
endif;
die;
}
add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler');
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler');

In the js file, find:
button.text( 'Load more' ).next().before(data);
Replace it with:
button.text( 'Load more' ).prev().after(data);

How to add/close a shortcode to functions.php in WordPress

How would I go about adding the following shortcode properly to functions.php in WordPress? When I add it works but it isn't closed properly and gives me an error.
<?php echo do_shortcode( '[brb_collection id="297"]' ); ?>
I am getting the following error:
"Your PHP code changes were rolled back due to an error on line 55 of file wp-content/themes/betheme-child/functions.php. Please fix and try saving again.
syntax error, unexpected '<', expecting end of file"
Here is my functions.php
<?php
// // Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
if ( !function_exists( 'chld_thm_cfg_locale_css' ) ):
function chld_thm_cfg_locale_css( $uri ){
if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) )
$uri = get_template_directory_uri() . '/rtl.css';
return $uri;
}
endif;
add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );
// END ENQUEUE PARENT ACTION
/* Tillad at uploade fonts */
function wp39550_disable_real_mime_check( $data, $file, $filename, $mimes ) {
$wp_filetype = wp_check_filetype( $filename, $mimes );
$ext = $wp_filetype['ext'];
$type = $wp_filetype['type'];
$proper_filename = $data['proper_filename'];
return compact( 'ext', 'type', 'proper_filename' );
}
add_filter( 'wp_check_filetype_and_ext', 'wp39550_disable_real_mime_check', 10, 4 );
/* CF7 redirects */
add_action( 'wp_footer', 'redirect_cf7' );
function redirect_cf7() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '117' == event.detail.contactFormId ) { // Sends sumissions on form 947 to the first thank you page
location = 'https://example.com/thank-you/';
} else if ( '118' == event.detail.contactFormId ) { // Sends submissions on form 1070 to the second thank you page
location = 'https://example.com/thank-you/';
} else if ( '541' == event.detail.contactFormId ) { // Sends submissions on form 1070 to the second thank you page
location = 'https://example.com/da/tak/';
} else if ( '542' == event.detail.contactFormId ) { // Sends submissions on form 1070 to the second thank you page
location = 'https://example.com/da/tak/';
}
}, false );
</script>
<?php
}
/* Google reivew widget */
<?php echo do_shortcode( '[brb_collection id="297"]' ); ?>

You’re reopening php, while already in a php section
Just remove the php opening tag right before your last echo
Or close the previous php section before the comment
/* Google reivew widget */

How to add a link for a popup window when user selects a particular variation

I'm using PopupMaker plugin for wordpress to create the popup up. This works by using a click trigger on a css selector of your choosing.
With this line of code I can output the variations for the particular product when I'm on its single product page.
add_action( 'woocommerce_before_add_to_cart_quantity', 'dump_attributes' );
function dump_attributes() {
global $product;
var_dump($product->get_attribute('size'));
}
I need to output a click-able link only when the customer selects a certain variation from the drop down.
The problem I have is generating that link only when a user selects the variation 'Drum'.

I was able to give this a little more thought. First, we need to give the variation data that Woo sends via JSON a little extra value. I'm checking for a "black" color attribute:
if( 'black' === strtolower($variation->get_attribute('color')) ){
But you will want to change to suit your size attribute.
Next, I define the link as
$kia_data['custom_link'] = sprintf( '%s', __( 'Your Link', 'your-textdomain' ) );
This is just a link to google and so you'll need to change that.
Next, we add an empty <div> placeholder. And finally we load some scripts on variable products and listen for the found_variation event. When we get it, we get the variation from the JSON data and we can check for the custom_link we defined earlier and dump it into the empty holder <div>.
That's probably clear as mud, but here's the full code snippet:
/**
* Add data to json encoded variation form.
*
* #param array $data - this is the variation's json data
* #param object $product
* #param object $variation
* #return array
*/
function kia_available_variation( $data, $product, $variation ){
if( 'black' === strtolower($variation->get_attribute('color')) ){
$kia_data['custom_link'] = sprintf( '%s', __( 'Your Link', 'your-textdomain' ) );
} else {
$kia_data['custom_link'] = false;
}
return array_merge( $data, $kia_data );
}
add_filter( 'woocommerce_available_variation', 'kia_available_variation', 10, 3 );
/**
* holder for display link
*/
function kia_custom_varition_link() {
echo '<div class="woocommerce-variation-link"></div>';
}
add_action( 'woocommerce_single_variation', 'kia_custom_varition_link', 5 );
/**
* Add scripts to variable products.
*/
function kia_on_found_template_for_variable_add_to_cart() {
add_action( 'wp_print_footer_scripts', 'kia_variable_footer_scripts' );
}
add_action( 'woocommerce_variable_add_to_cart', 'kia_on_found_template_for_variable_add_to_cart', 30 );
function kia_variable_footer_scripts() {
?>
<script type="text/javascript">
jQuery( document ).ready(function($) {
$('form.cart')
.on('found_variation', function( event, variation ) {
if ( variation.custom_link ) {
$link_html = variation.custom_link;
$(this).find( '.woocommerce-variation-link' ).html( $link_html ).show();
} else {
$(this).find( '.woocommerce-variation-link' ).html('').hide();
}
}).on('reset_variation', function( event, variation ) {
$(this).find( '.woocommerce-variation-link' ).html('').hide();
});
});
</script>
<?php
}
Here is the result:

Figured out one way to solve it using jQuery and getting the ID of the selection drop down (there were two different ID's named after the attribute slug #size & #pa_size).
add_action( 'woocommerce_before_add_to_cart_quantity', 'add_link_on_selection' );
function add_link_on_selection() {
?>
<script>
jQuery(document).ready(function ($) {
$('#size, #pa_size').change(function(){
if($('#add').length) {
$('#add').remove();
return;
} else {
$selection = $(this).val().toLowerCase();
console.log($selection);
$(this).after(
'<div>' +
($selection == 'drum' ? '<div id="add">Freight Restrictions</div>' : '') +
'</div>'
);
}
})
});
</script>
<?php
}

WooCommerce custom shortcode product categories dropdown

I am trying to add a WooCommerce categories-dropdown-shortcode, but this seems to not work. I am able to see the drop down, but when i choose a category it doesn't register and nothing happens.
sc: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
Code that's placed in my functions.php file
<?php
/**
* WooCommerce Extra Feature
* --------------------------
*
* Register a shortcode that creates a product categories dropdown list
*
* Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
*
*/
add_shortcode( 'product_categories_dropdown','woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
extract(shortcode_atts(array(
'count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts));
ob_start();
$c = $count;
$h = $hierarchical;
$o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';
// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
woocommerce_product_dropdown_categories( $c, $h, 0, $o );
?>
<script type='text/javascript'>
/* <![CDATA[ */
var product_cat_dropdown = document.getElementById("dropdown_product_cat");
function onProductCatChange() {
if ( product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value !=='' ) {
location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value;
}
}
product_cat_dropdown.onchange = onProductCatChange;
/* ]]> */
</script>
<?php
return ob_get_clean();
}

Update (2019)
Here below is the working code version for this custom product category dropdown shortcode since woocommerce 3 release:
wc_product_dropdown_categories() replace woocommerce_product_dropdown_categories() which was deprecated since woocommerce 3
Modified Javascript/jQuery code.
Some other light changes.
The new working code:
add_shortcode( 'product_categories_dropdown', 'shortcode_product_categories_dropdown' );
function shortcode_product_categories_dropdown( $atts ) {
// Shortcode Attributes
$atts = shortcode_atts( array(
'show_count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts, 'product_categories_dropdown' );
ob_start();
wc_product_dropdown_categories( array(
'show_count' => $atts['show_count'],
'hierarchical' => $atts['hierarchical'],
'orderby' => ( isset($atts['orderby']) && empty($atts['orderby']) ? $atts['orderby'] : 'order' ),
) );
?>
<script type='text/javascript'>
jQuery(function($) {
$('.dropdown_product_cat').change(function(){
if( $(this).val() !=='' ) {
location.href = '<?php echo home_url(); ?>/?product_cat='+$(this).val();
}
});
});
</script>
<?php
return ob_get_clean();
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
USAGE example:
1) Inside a Page or post content text Editor (or a text widget):
[product_categories_dropdown orderby="title" count="0" hierarchical="0"]
2) On a php template or code:
echo do_shortcode("[product_categories_dropdown orderby='title' count='0' hierarchical='0']");
Original answer:
If you read the comments for the source of this code that you have picked here, they were some errors and they found some turn around recently.
So the correct updated code seems to be this one:
/**
* WooCommerce Extra Feature Shortcode
* --------------------------
*
* Register a shortcode that creates a product categories dropdown list
*
* Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
*
*/
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
extract(shortcode_atts(array(
'show_count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts));
ob_start();
$c = $count;
$h = $hierarchical;
$o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';
// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
woocommerce_product_dropdown_categories( $c, $h, 0, $o );
?>
<script type='text/javascript'>
/* <![CDATA[ */
var product_cat_dropdown = jQuery(".dropdown_product_cat");
function onProductCatChange() {
if ( product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value !=='' ) {
location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value;
}
}
product_cat_dropdown.onchange = onProductCatChange;
/* ]]> */
</script>
<?php
return ob_get_clean();
}
But it will not work, as woocommerce_product_dropdown_categories() is a buggy function that is deprecated. See this reference about.
May be you could try to use this plugin instead, for that purpose.

For anyone still stuck on this then here is the currently working solution:
/**
* WooCommerce Extra Feature Shortcode
* --------------------------
*
* Register a shortcode that creates a product categories dropdown list
*
* Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
*
*/
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
extract(shortcode_atts(array(
'show_count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts));
ob_start();
$c = $count;
$h = $hierarchical;
$o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';
// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
wc_product_dropdown_categories( $c, $h, 0, $o );
?>
<script type='text/javascript'>
/* <![CDATA[ */
var product_cat_dropdown = jQuery(".dropdown_product_cat");
product_cat_dropdown.change(function() {
if ( product_cat_dropdown.val() !=='' ) {
location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.val();
}
});
/* ]]> */
</script>
<?php
return ob_get_clean();
}