Develop Reference

Adding a different prefix to two separate product categories

I am giving web design a go for the first time really as I am building a website for my Telephone Service and Signage Design company. I am using wordpress to build my website, my shop is a woocommerce shop and I am trying to add two different suffixes to the prices based on the category they are in. One suffix is per month and the other one is per hour. I am trying to do this using the code below in my child theme functions.php but I believe I have gone wrong with my code. Could you please help me to get the code correct?
add_filter( 'woocommerce_get_price_html', 'conditional_price_suffix', 20, 2 );
function conditional_price_suffix( $price, $product ) {
$product_categories = array('telephone','signage');
if( has_term( $product_categories, 'telephone', $product->get_id() ) )
$price .= ' ' . __('per month');
if( has_term( $product_categories, 'signage', $product->get_id() ) )
$price .= ' ' . __('per hour');
return $price;
}
after giving in and looking on here, I also found this code although it looks like it should work it does not work with my woocommerce.
function conditional_price_suffix( $price, $product ) {
$product_id = $product->is_type('variation') ? $product->get_parent_id()
: $product->get_id();
$product_categories = array('telephone');
$product_categories2 = array('signage');
if( has_product_categories( $product_categories, $product_id ) ) {
$price .= ' ' . __('per month');
} elseif( has_product_categories( $product_categories2, $product_id ) )
{
$price .= ' ' . __('per hour');
}
return $price;
}

It will work with very small changes on has_term() like this:
add_filter( 'woocommerce_get_price_html', 'conditional_price_suffix', 20, 2 );
function conditional_price_suffix( $price, $product ) {
$product_id = $product->get_id();
if( has_term('telephone','product_cat', $product_id ) )
$price .= ' ' . __('per month');
if( has_term('signage','product_cat', $product_id ) )
$price .= ' ' . __('per hour');
return $price;
}

WooCommerce external product to new tab

I would like to have WooCommerce external/affiliate products open in a new tab. This would go for all aspects of a product: image, title, buy now button and archive pages(product category/tags). All I have been able to find is a way to change the "Buy Now" button but no other solutions to the other areas previously mentioned. Other solutions offer a the external link in all the right places(product image, title, buy now button, archive pages), but it can't open in a new tab.
I've tried a bunch of different codes, as mentioned above, all lead to partial solutions. I believe if these can be combined, it may work. But I haven't been successful.
add_action( 'template_redirect', 'redirect_external_products' );
function redirect_external_products() {
global $post;
if ( is_singular( 'product' ) && ! empty( $post ) && ( $product = wc_get_product( $post ) ) && $product->is_type( 'external' ) ) {
wp_redirect( $product->get_product_url() );
exit;
}
}
function custom_redirect() {
global $post;
if( is_single() ){
$external_link = get_post_meta( $post->ID, 'external_link', true );
if($external_link) {
echo "<script> window.open(".$external_link.", '_blank') </script>";
exit;
}
}
}
I would like all affiliate/external links to open in a new tab. This would include: product image, product title, buy now button, archive page listings(product category/tags).
All previous attempts will only open the Buy Now links in a new tab - but the image and title still direct to the single product page. The first code above from does the trick, but won't open in a new tab. My research tells me that when using the template_redirect function, link targeting is not possible.

remove the previous code and let's add this code in the theme's functions.php file.
add_filter( 'woocommerce_loop_product_link', 'filter_external_product_permalink', 10, 2 );
if ( ! function_exists( 'filter_external_product_permalink' ) ) {
/**
* Insert the external url for products in the loop.
*/
function filter_external_product_permalink( $the_permalink, $product ){
global $product;
if( $product->is_type( 'external' ) ) {
$external_link = $product->get_product_url();
return $external_link;
}
return $the_permalink;
}
}
if ( ! function_exists( 'woocommerce_template_loop_product_link_open' ) ) {
/**
* Insert the opening anchor tag for products in the loop.
*/
function woocommerce_template_loop_product_link_open() {
global $product;
$link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
$link_target = $product->is_type( 'external' ) ? '_blank' : '_self';
echo '<a target="' . esc_attr( $link_target ).'" href="' . esc_url( $link ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">';
}
}
add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_external_add_product_link' , 10, 2 );
if ( ! function_exists( 'custom_external_add_product_link' ) ) {
function custom_external_add_product_link( $permalink ) {
global $product;
if ( $product->is_type( 'external' ) ) {
$permalink = sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s" target="_blank">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button product_type_external add_to_cart_button' ),
esc_html( $product->add_to_cart_text() )
);
}
return $permalink;
}
}

AJAX Interfering with if statement in while loop?

I am trying to load my sidebars in my while loop by using if statements that call them after a certain number of posts. It's important to note that I am using AJAX code (provided below) to load in posts on scroll and I believe it may be causing the issue.
Though they are sidebars, they are not physically a sidebar but rather content loaded between posts.
I've tried for a week to locate the problem but I cannot seem to get the sidebars to load with AJAX as a if statement in the while loop.
Important to note: The sidebar will load after the number of posts if it's not loaded through AJAX. So if it's in the initial load, the sidebars load. But when you continue to scroll to say the third or fourth bar it will not load and the AJAX will only load the (parts/content).
I need to either be able to resolve the if statement so it works within the while loop that loads through AJAX or I'm open to an alternate solution as long as it doesn't remove the AJAX.
A lot of work has been put into making this loop work and help is greatly appreciated!
front-page.php
<?php
$current_page = max( 1, get_query_var( 'paged' ) );
$the_query = new WP_Query( array(
'cat' => '-21',
'post_type' => 'post',
'posts_per_page' => 5,
'paged' => $current_page,
'tax_query' => array(
array(
'taxonomy' => 'topics',
'operator' => 'NOT EXISTS',
'field' => 'term_id',
'terms' => $term_id
)
)
) );
wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
'ajaxurl' => admin_url( 'admin-ajax.php', 'relative' ),
'posts' => json_encode( $the_query->query_vars ),
'current_page' => $current_page,
'max_page' => $the_query->max_num_pages
) );
?>
<div id="main" class="container-fluid">
<?php if ($the_query->have_posts()) : ?>
<?php $count = 0; ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); get_template_part( 'parts/content', get_post_format() ); ?> <!-- This parts/content loads -->
<?php $count++; ?>
<!-- the dynamic_sidebar does not load -->
<?php if ($count == 2 && is_active_sidebar('sidebar1') ) : ?>
<div class="side-container first-side">
<?php dynamic_sidebar('sidebar1'); ?>
</div>
<?php endif; ?>
<?php if ($count == 10 && is_active_sidebar('sidebar2') ) : ?>
<div class="side-container first-side">
<?php dynamic_sidebar('sidebar2'); ?>
</div>
<?php endif; ?>
<?php if ($count == 20 && is_active_sidebar('sidebar3') ) : ?>
<div class="side-container third-side">
<?php dynamic_sidebar('sidebar3'); ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php get_footer(); ?>
</div><!-- END CONTAINER -->
parts/content -- this loads as expected including code if it's helpful
<div class="row post"> <!-- Post is mentioned in the below JS to load -->
<div class="col-sm-5">
<h2>Text</h2>
</div>
<div class="col-sm-7">
<h3>text</h3>
</div>
</div><!-- END ROW-->
sidebar code - works when initially loaded but doesn't when AJAX calls on this code such as the last two sidebars in front-page.php
<?php
$term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ); ?>
<?php while( $flexible_posts->have_posts() ) : $flexible_posts->the_post(); global $post; ?>
<div class="sidebar-area">
//sidebar code here
}
endwhile;
?>
myloadmore.js - AJAX Call
jQuery(function($){
var canBeLoaded = true,
bottomOffset = 2000;
$(window).scroll(function(){
if ( misha_loadmore_params.current_page >= misha_loadmore_params.max_page ) {
return;
}
var data = {
'action': 'loadmore',
'query': misha_loadmore_params.posts,
'page' : misha_loadmore_params.current_page
};
if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) && canBeLoaded == true ){
$.ajax({
url : misha_loadmore_params.ajaxurl,
data: data,
type: 'POST',
beforeSend: function( xhr ){
// AJAX call is in process, we shouldn't run it again until complete
canBeLoaded = false;
},
success:function(data){
if( data ) {
$('#main').find('div.post:last-of-type').after( data ); // where to insert posts
canBeLoaded = true; // the ajax is completed, now we can run it again
misha_loadmore_params.current_page++;
bottomOffset = ( $( '#main > div.post:last' ).offset() || {} ).top
}
}
});
}
});
});
functions.php - Added for further context
function misha_my_load_more_scripts() {
wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/js/myloadmore.js',
array( 'jquery' ), '', true );
wp_enqueue_script( 'my_loadmore' );
}
add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );
function misha_loadmore_ajax_handler() {
$args = json_decode( wp_unslash( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1; // load the next page
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
get_template_part( 'parts/content', get_post_format() );
endwhile;
endif;
wp_die();
}
add_action( 'wp_ajax_loadmore', 'misha_loadmore_ajax_handler' ); // Authenticated users
add_action( 'wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler' ); // Non-authenticated users

The trick here was to add the if statements inside of the AJAX handlers as well. Perhaps someone with AJAX experience can add to this one day to explain why it works, but all I know is that it does. All the code from my question is the same below is the difference from the functions.php ajax handler function.
function misha_loadmore_ajax_handler() {
$args = json_decode( wp_unslash( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1; // load the next page
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
get_template_part( 'parts/content', get_post_format() );
<?php if ($count == 2 && is_active_sidebar('sidebar1') ) : ?>
<div class="side-container first-side">
<?php dynamic_sidebar('sidebar1'); ?>
</div>
<?php endif; ?>
<?php if ($count == 10 && is_active_sidebar('sidebar2') ) : ?>
<div class="side-container first-side">
<?php dynamic_sidebar('sidebar2'); ?>
</div>
<?php endif; ?>
<?php if ($count == 20 && is_active_sidebar('sidebar3') ) : ?>
<div class="side-container third-side">
<?php dynamic_sidebar('sidebar3'); ?>
</div>
<?php endif;
endwhile;
endif;
wp_die();
}

Building a plugin into a theme

Firstly, I know this is 'bad' practice for several different reasons, but for reasons that I won't waste your time with it's something I need to do.
Using a fairly simple plugin and I've tried copying it into functions.php and updating the file paths and dependences, but I'm having some trouble.
Plugin.php file looks like this:-
$plugin_headers = get_file_data( __FILE__, array( 'Version' => 'Version', 'Name' => 'Plugin Name' ) );
/**
* We store our plugin data in the following global array.
* $my_unique_name with your unique name
*/
global $my_unique_name;
$my_unique_name = array();
$my_unique_name['version_key'] = strtolower( str_replace( ' ', '_', $plugin_headers['Name'] ) ) . '_version';
$my_unique_name['version_value'] = $plugin_headers['Version'];
/**
* When the user activates the plugin we add the version number to the
* options table as "my_plugin_name_version" only if this is a newer version.
*/
function inline_comments_acitvation(){
global $my_unique_name;
if ( get_option( $my_unique_name['version_key'] ) && get_option( $my_unique_name['version_key'] ) > $my_unique_name['version_value'] )
return;
update_option( $my_unique_name['version_key'], $my_unique_name['version_value'] );
}
register_activation_hook( __FILE__, 'inline_comments_acitvation' );
/**
* Delete our version number from the database when the plugin is activated.
*/
function inline_comments_deactivate(){
global $my_unique_name;
delete_option( $my_unique_name['version_key'] );
}
register_deactivation_hook( __FILE__, 'inline_comments_deactivate' );
if ( is_admin() )
require_once plugin_dir_path( __FILE__ ) . 'admin/admin-tags.php';
/**
* Theme only functions
*/
require_once plugin_dir_path( __FILE__ ) . 'inc/template-tags.php';
function inline_comments_enqueue_scripts(){
$plugin_headers = get_file_data( __FILE__, array( 'Version' => 'Version', 'Name' => 'Original Plugin Name' ) );
$clean_name = strtolower( str_replace( ' ', '-', $plugin_headers['Name'] ) );
wp_register_style( $clean_name . '-style', plugin_dir_url( __FILE__ ) . 'inc/css/style.css' );
wp_register_script( 'textarea_auto_expand-script', plugin_dir_url( __FILE__ ) . 'vendor/textarea-auto-expand/jquery.textarea_auto_expand.js' );
wp_register_script( $clean_name . '-script', plugin_dir_url( __FILE__ ) . 'inc/js/script.js', array('jquery', 'textarea_auto_expand-script') );
}
add_action('wp_enqueue_scripts', 'inline_comments_enqueue_scripts', 2);
After moving the plugin to the theme folder I've done the following: I've removed the pointless parts and in my functions.php I'm loading the main script.js (it loads) and the css, like so(ie. changed the structure and moved the scripts into relevant folders).
function inline_comments_enqueue_scripts(){
if ( is_singular() || is_page() ) {
wp_enqueue_style( 'inline-style', get_template_directory_uri() . '/css/inline-style.css', '10000', 'all' );
wp_enqueue_script( 'inline-script', get_template_directory_uri() . '/js/inline-script.js', array( 'jquery' ), MEDIUM_VERSION);
}
}
add_action('wp_enqueue_scripts', 'inline_comments_enqueue_scripts', 2);
Ok so this loads the scripts just fine.
The plugin's main template file with the functions and ajax calls is in template-tags.php, but I can't figure out how to get this to load up correctly.
require_once plugin_dir_path( __FILE__ ) . 'inc/template-tags.php';
I've tried copy/pasting this into functions.php and it doesn't seem to work either.
The template-tags.php:
<?php
/**
* #todo Ajax crawling support -- https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
* #todo https://developers.google.com/webmasters/ajax-crawling/
*/
/**
* Perform the following actions/filters when plugins are loaded
*
* #since 0.1-alpha
*/
function inline_comments_loaded(){
add_action( 'wp_ajax_inline_comments_add_comment', 'inline_comments_add_comment' );
add_action( 'wp_ajax_nopriv_inline_comments_add_comment', 'inline_comments_add_comment' );
add_action( 'wp_ajax_nopriv_inline_comments_load_template', 'inline_comments_load_template' );
add_action( 'wp_ajax_inline_comments_load_template', 'inline_comments_load_template' );
add_filter( 'template_redirect', 'inline_comments_template_redirect' );
}
add_action('plugins_loaded', 'inline_comments_loaded');
/**
* Load our JavaScript and Stylesheet on single page only
*
* #since 0.1-alpha
*/
function inline_comments_template_redirect() {
if ( is_singular() || is_page() ) {
add_action( 'wp_enqueue_scripts', 'inline_comments_scripts');
add_action( 'wp_head', 'inline_comments_head');
}
}
/**
* Load our JavaScript and Stylesheet, we include the login-register script only if it is installed.
*
* #uses wp_enqueue_script()
* #uses wp_enqueue_style()
*
* #since 0.1-alpha
*/
function inline_comments_scripts(){
wp_enqueue_script( 'inline-ajax-comments-script' );
wp_enqueue_style( 'inline-ajax-comments-style' );
}
/**
* Print our AJAX URL
*
* #since 0.1-alpha
*/
function inline_comments_head(){
print '<script type="text/javascript"> var ajaxurl = "'. admin_url("admin-ajax.php") .'";</script>';
print '<style type="text/css">'.get_option('additional_styling').'</style>';
}
/**
* Inserts a comment for the current post if the user is logged in.
*
* #since 0.1-alpha
* #uses check_ajax_referer()
* #uses is_user_logged_in()
* #uses wp_insert_comment()
* #uses wp_get_current_user()
* #uses current_time()
* #uses wp_kses()
* #uses get_option()
*/
function inline_comments_add_comment(){
check_ajax_referer('inline_comments_nonce', 'security');
$comment = trim(
wp_kses( $_POST['comment'],
array(
'a' => array(
'href' => array(),
'title' => array()
),
'br' => array(),
'em' => array(),
'strong' => array(),
'blockquote' => array(),
'code' => array()
)
)
);
if ( empty( $comment ) ) die();
if ( get_option('comment_registration') == 1 && ! is_user_logged_in() ) die();
$data = array(
'comment_post_ID' => (int)$_POST['post_id'],
'comment_content' => $comment,
'comment_type' => '',
'comment_parent' => 0,
'comment_author_IP' => $_SERVER['REMOTE_ADDR'],
'comment_agent' => $_SERVER['HTTP_USER_AGENT'],
'comment_date' => current_time('mysql'),
'comment_approved' => 1
);
if ( is_user_logged_in() ){
$current_user = wp_get_current_user();
$author_email = $current_user->user_email;
$author_url = $current_user->user_url;
$author_name = $current_user->user_nicename;
$data['user_id'] = $current_user->ID;
} else {
$author_email = empty( $_POST['user_email'] ) ? null : esc_attr( $_POST['user_email'] );
$author_url = empty( $_POST['user_url'] ) ? null : esc_url( $_POST['user_url'], array('http','https') );
$author_name = empty( $_POST['user_name'] ) ? null : esc_attr( $_POST['user_name'] );
}
$data['comment_author'] = $author_name;
$data['comment_author_email'] = $author_email;
$data['comment_author_url'] = $author_url;
// ck - catch the new comment id for updating comment meta
$comment_id = wp_insert_comment( $data );
// ck - now add the para-id to the comment meta
add_comment_meta( $comment_id, 'para_id' , $_POST['para_id'] );
die();
}
/**
* Load comments and comment form
*
* #since 0.1-alpha
*/
function inline_comments_load_template(){
check_ajax_referer('inline_comments_nonce', 'security');
$comments = get_comments( array(
'post_id' => (int)$_POST['post_id'],
'number' => 100,
'status' => 'approve',
'order' => 'ASC'
) );
?>
<div class="inline-comments-container" id="comments_target">
<?php if ( $comments ) : foreach( $comments as $comment) : ?>
<?php
// ck get the paragraph id from the comment meta
$para_id = get_comment_meta( $comment->comment_ID, 'para_id', true );
$user = new WP_User( $comment->user_id );
$class = null;
if ( ! empty( $user->roles ) && is_array( $user->roles ) ) {
foreach ( $user->roles as $role ){
$class = $role;
}
} else {
$class = 'annon';
}
// ck -added data-comment-para-id to div
?>
<div class="orphan-comment comment-para-id-<?php echo $para_id ?> inline-comments-content inline-comments-<?php echo $class; ?>" id="comment-<?php echo $comment->comment_ID; ?>">
<div class="inline-comments-p">
<?php inline_comments_profile_pic( $comment->comment_author_email ); ?>
<?php print $comment->comment_content; ?><br />
<time class="meta">
<strong><?php $user = get_user_by('login', $comment->comment_author ); if ( ! empty( $user->user_url ) ) : ?><?php print $comment->comment_author; ?><?php else : ?><?php print $comment->comment_author; ?><?php endif; ?></strong>
<?php print human_time_diff( strtotime( $comment->comment_date ), current_time('timestamp') ); ?> ago.
</time>
</div>
</div>
<?php endforeach; endif; ?>
</div>
<?php die();
}
/**
* Determine the profile pic for a user, either the FB pic or
* the gravatar pic. If no ID is passed uses the current logged
* in user.
*
* #uses get_user_meta()
* #uses get_avatar();
*/
function inline_comments_profile_pic( $id_or_email=null, $email=null ){
if ( is_null( $id_or_email ) ) {
global $current_user;
get_currentuserinfo();
$id_or_email = $current_user->ID;
}
$html = get_avatar( $id_or_email, 32 );
print '<span class="inline-comments-profile-pic-container">' . $html . '</span>';
}
function inline_comments_tempalte( $file ){
return plugin_dir_path( dirname( __FILE__ ) ) . 'templates/comments.php';
}
add_filter('comments_template', 'inline_comments_tempalte');

I notice that you've moved the /css and /js directories out of /inc where they seem to have been originally.
So try:
require_once plugin_dir_path( __FILE__ ) . 'template-tags.php';

WP get_post_thumbnail with Backstretch JS

I am using a javascript that's called 'Backstretch' to display an image on the back of my website that resizes when the viewport is getting bigger or smaller. Now I would like to combine it with the get_post_thumbnail function from WordPress so I can set a background image as featured image.
I tried the standard WP function but that doesn't work because it adds tags:
$.backstretch("<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>");
So I need to strip off those tags.. I'm getting close because i'm now getting an url (and image) but it's always the same one even though I set a different featured image on every page
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post_id, $size, $attr ) ); ?>
<script>$.backstretch("<?php echo $url; ?>");</script>

You get the answer to your question in this tutorial: http://sridharkatakam.com/set-featured-image-full-sized-background-posts-pages-wordpress/
Create a backstretch-set.js-file and include
jQuery(document).ready(function($) {
$("body").backstretch([BackStretchImg.src],{duration:3000,fade:750});
});
and then enqueue both js-files (backstretch.js and your backstretch-set.js) in your functions.php
//* Enqueue Backstretch script
add_action( 'wp_enqueue_scripts', 'enqueue_backstretch' );
function enqueue_backstretch() {
//* Load scripts only on single Posts, static Pages and other single pages and only if featured image is present
if ( is_singular() && has_post_thumbnail() )
wp_enqueue_script( 'backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.backstretch.min.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'backstretch' ), '1.0.0' );
wp_localize_script( 'backstretch-set', 'BackStretchImg', array( 'src' => wp_get_attachment_url( get_post_thumbnail_id() ) ) );

Try using the global $post object like so:
<?php global $post; $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'full' ) ); ?>
<script>$.backstretch("<?php echo $url; ?>");</script>