Including thumbnail captions in RSS feed - javascript

Do you know the best way to incorporate the function the_post_thumbnail_caption into a function that gets thumbnail posts for the RSS feed? I am working on a project that requires having captions of thumbnail images populating on an RSS feed and appreciate your time shared on this inquiry.
In other words, I would like to include get_the_post_thumbnail_caption function in this:
function featuredtoRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = '<div>' . get_the_post_thumbnail( $post->ID, 'medium', array( 'style' => 'margin-bottom: 15px;' ) ) . '</div>' . $content;
}
return $content;
}
Would is be best to use the && operator?

I was able to solve what I was trying to do, if anyone is trying to add captions from thumbnails to their RSS feed all you need to do is add get_the_post_thumbnail_caption like this:
function featuredtoRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = '<div>' . get_the_post_thumbnail( $post->ID, 'medium', array( 'style' => 'margin-bottom: 15px;' ) ) . '</div>' . $content;
$content = '<div>' . get_the_post_thumbnail_caption( $post->ID ) . '</div>' . $content;
}
return $content;
}
Please chime in if there is a more effective way to do this, I am always looking for better practices!

Related

Code to automatically generate meta tags in wordpress is not working properly

I need to automatically generate meta tags from content in wordpress, the problem is that the code that I found on many blogs while searching either uses $des_post = str_replace( array( "\\n", "\\r", "\\t" ), ' ', $des_post); or $des_post = str_replace( array( "\n", "\r", "\t" ), ' ', $des_post);, which offers a security flaw (XSS), not to mention that it doesn't always strip the html tags correctly, so I've modified the code as follows:
function gretathemes_meta_description() {
global $post;
if ( is_singular() ) {
$des_post = strip_tags( $post->post_content );
$des_post = strip_shortcodes( $post->post_content );
$des_post = esc_attr( $des_post );
$des_post = mb_substr( $des_post, 0, 300, 'utf8' );
print '<meta name="description" content="' . $des_post . '" />' . "\n";
}
if ( is_home() ) {
print '<meta name="description" content="' . get_bloginfo( "description" ) . '" />' . "\n";
}
if ( is_category() ) {
$des_cat = strip_tags(category_description());
print '<meta name="description" content="' . $des_cat . '" />' . "\n";
}
}
add_action( 'wp_head', 'gretathemes_meta_description');
function gretathemes_meta_tags() {
print '<meta name="meta_name" content="meta_value" />';
}
add_action('wp_head', 'gretathemes_meta_tags');
The problem is that now it doesn't remove the html tags, so I get a meta description like this while verifying with metatag checkers (seo tools):
<!-- wp:paragraph -->
<p>The description goes here.
The problem is that html code like <!-- wp:paragraph --><p> shouldn't show up.
The thing here is that the function esc_attr is getting the html code and copying, isn't there a way to get the rendered post's text instead? Or any other solution?
Use html purifier
in your theme's functions.php or plugin file:
require_once '/path/to/HTMLPurifier.auto.php';
function better_strip_tags($dirty_html){
$config = HTMLPurifier_Config::createDefault();
$purifier = new HTMLPurifier($config);
return $purifier->purify($dirty_html);
}

Display All WooCommerce Variation Information on Product Page

While this works fine as is, I need help in getting it to display all the different variation details that are available.
As of now, it displays the price. This is the full list of variables that are available:
'attributes'
'availability_html'
'backorders_allowed'
'dimensions'
'dimensions_html'
'display_price'
'display_regular_price'
'price'
'image'
'image_id'
'is_downloadable'
'is_in_stock'
'is_purchasable'
'is_sold_individually'
'is_virtual'
'max_qty'
'min_qty'
'price_html'
'sku'
'variation_description'
'variation_id'
'variation_is_active'
'variation_is_visible'
'weight'
'weight_html'
This is the code that I need help changing into displaying all of these as a table if at all possible.
add_action( 'woocommerce_after_add_to_cart_form', 'display_variation_info_in_product_summary' );
function display_variation_info_in_product_summary() {
global $product;
if ( ! $product->is_type( 'variable' ) ) return;
echo '<div class="var_info"></div>';
wc_enqueue_js( "
$(document).on('found_variation', 'form.cart', function( event, variation ) {
$('.var_info').html(variation.price_html); // need to show all options here
});
" );
}
does this work? I'm using this to display a table of the variation options, with the price. It works with multiple attributes.
add_action( 'woocommerce_before_add_to_cart_form', 'display_variation_info_in_product_summary' );
function display_variation_info_in_product_summary() {
global $product;
if ( !$product->is_type( 'variable' ) ) return;
$variations = $product->get_available_variations();
echo '<div class="variation-prices"><table>';
foreach($variations as $variation){
$attributes = wc_get_formatted_variation($variation['attributes'],true, false);
echo '<tr><td>' . $attributes . '</td><td>' . wc_price($variation['display_price']) . '</td></tr>';
}
echo '</table></div>';
}

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;
}

Display featured post of image being hovered in wp

I'm trying to make a simplistic website that only shows the post image after you hover on a title. The problem is I can't get my JS to work.
With some previous tips I got here on how to go about doing this I first list all the post images with their URL as an ID (makes it easier to compare) in a PHP shortcode snippet:
// The Query
$the_query = new WP_Query( array( 'post_type' => 'post','posts_per_page' => -1 ) );
// The Loop
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
//Useless
// echo '<li>' . get_the_title() . '</li>';
// echo '<li>' . get_permalink() . '</li>';
echo '<li>';
echo '<a href="' . get_permalink() . '">';
echo '<figure class="popUp" id="' . get_permalink() . '">';
the_post_thumbnail();
echo '</figure>';
echo '</a>';
echo '</li>';
}
echo '</ul>';
/* Restore original Post Data */
wp_reset_postdata();
} else {
// no posts found
}
In CSS I set the display properties of PopUp to none.
Up to this point everything is as expected. But now the JS comes in. I want to get the URL of a hovered post and if it is the same as the URL(in CSS the ID) of the post I want it to display. When hovering stops I also want the image to disapear.
document.getElementById("carousel").addEventListener('mouseover', function(event) {
var hoveredEl = event.target; // The actual element which was hovered.
if (hoveredEl.tagName !== 'A') { return; } // Ignore non links
const addCSS = s =>(d=>{d.head.appendChild(d.createElement("style")).innerHTML=s})(document);
// Usage:
addCSS("#" + hoveredEl + " { display: inline-block; }";)
});
document.getElementById("carousel").addEventListener('mouseout', function(event) {
var hoveredEl = event.target; // The actual element which was hovered.
if (hoveredEl.tagName !== 'A') { return; } // Ignore non links
const addCSS = s =>(d=>{d.head.appendChild(d.createElement("style")).innerHTML=s})(document);
// Usage:
addCSS("#" + hoveredEl + " { display: none; }";)
});
I put it on the page as a shortcode JS snippet in the same DIV as the PHP code but in a different to the links being hovered (could that be the iss). Is there any obvious red flags in the JS code?
Edit: Closed figure tag and used the event listener on a specific DIV. Still no luck...
Try something like this (note the new hover-target class):
// The Query
$the_query = new WP_Query( array( 'post_type' => 'post','posts_per_page' => -1 ) );
// The Loop
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<li>';
echo '<a class='hover-target' href="' . get_permalink() . '">';
echo '<figure class="popUp" id="' . get_permalink() . '">';
the_post_thumbnail();
echo '</figure>';
echo '</a>';
echo '</li>';
}
echo '</ul>';
/* Restore original Post Data */
wp_reset_postdata();
} else {
// no posts found
}
jQuery('.hover-target').hover(function(e) {
$(this).siblings('figure').show()
}, function(e){
$(this).siblings('figure').hide()
})
This assumes the thumbnails are hidden by default, with a rule such as this:
.popUp {
display: none;
}
This works because you are using jQuery's hover() to pass two separate functions, one for mouseenter and one for mouseleave. On mouseenter, display the image. On mouseleave, hide the image.

Populating second dropdown list depending on first one in a Wordpress page

Hello and have a nice day everyone.
I, being not an actual coder, managed to overcome dropdown list issue in basic html, then in php using javascript in Dreamweaver. I even made it using Ajax without reloading the page. Thanks to those people who created it in plus2net. Here is the link i benefited from. http://www.plus2net.com/php_tutorial/php_drop_down_list.php
My problem is with a Wordpress page. Wordpress has a buit-in function for generating dropdown lists for pages, posts etc. I used wp_dropdown_pages function, whose reference can be found here: http://codex.wordpress.org/Function_Reference/wp_dropdown_pages
and in post-template.php file function is like this:
function wp_dropdown_pages( $args = '' ) {
$defaults = array(
'depth' => 0, 'child_of' => 0,
'selected' => 0, 'echo' => 1,
'name' => 'page_id', 'id' => '',
'show_option_none' => '', 'show_option_no_change' => '',
'option_none_value' => ''
);
$r = wp_parse_args( $args, $defaults );
$pages = get_pages( $r );
$output = '';
// Back-compat with old system where both id and name were based on $name argument
if ( empty( $r['id'] ) ) {
$r['id'] = $r['name'];
}
if ( ! empty( $pages ) ) {
$output = "<select name='" . esc_attr( $r['name'] ) . "' id='" . esc_attr( $r['id'] ) . "'>\n";
if ( $r['show_option_no_change'] ) {
$output .= "\t<option value=\"-1\">" . $r['show_option_no_change'] . "</option>\n";
}
if ( $r['show_option_none'] ) {
$output .= "\t<option value=\"" . esc_attr( $r['option_none_value'] ) . '">' . $r['show_option_none'] . "</option>\n";
}
$output .= walk_page_dropdown_tree( $pages, $r['depth'], $r );
$output .= "</select>\n";
}
/**
* Filter the HTML output of a list of pages as a drop down.
*
* #since 2.1.0
*
* #param string $output HTML output for drop down list of pages.
*/
$html = apply_filters( 'wp_dropdown_pages', $output );
if ( $r['echo'] ) {
echo $html;
}
return $html;
}
With this function and its arguments, it is very easy to populate a dropdown list, and get what you want. However my goal is to generate a second drop down with the selected value of the first one. Like the first one is car brands, and the second one is models.
To do this how can i use wp_dropdown_pages() function? If I must, how can i do this using AJax or just Javascript?
Thank you all in advance.
You can't use PHP once the page is on screen, without reloading or AJAX.
You could create the second dropdown menu(s) right away and hide them at first. Then make the correct one visible when the first dropdown menu is clicked/changed using jQuery.
Or use an AJAX call to a function that will return the correct dropdown menu HTML.
In more detail:
look into how you can grab the information of a changed
dropdown menu (an option is selected) using jQuery.
look into how to use AJAX in WordPress environment. Create the jQuery to call
the PHP function that will return your HTML.
In your AJAX call send along the grabbed information of the dropdown menu.
On successful AJAX function you need to tell jQuery to echo the output.

Categories

Resources