I have this question on the Wordpress stack exchange as well, but not having any luck there. So, as my solution probably involves me hard-coding php and css, It may be better to have it here.
I'm using 'Flex Slider' plugin - that works on top of 'WP rotator' plug-in on my Wordpress 3.2 website. I have it implemented fine, and beginning to look at inserting my content - but I need to add a caption to be on top of the slider. As are present on most sliders on the web, within the documentation of the non-Wordpress plugin of the tool it suggests I can do something like;
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<img src="slide2.jpg" />
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<img src="slide3.jpg" />
</li>
</ul>
</div>
</div>
Problem is; with the Wordpress plug-in version, I can't find that markup to work inside.
Here's the only non-css non-js file in the plug-ins directory, so I assume I have to work in there.
I've tried inserting the mark-up that was suggested non-Wordpress above, but not sure where to insert it as it's broke it with my attempts thus far.
<?php
/*
Plugin Name: Flex Slider for WP Rotator
Plugin URI: http://wordpress.org/extend/plugins/flex-slider-for-wp-rotator/
Description: Turns WP Rotator into FlexSlider, a fully responsive jQuery slider.
Version: 1.1
Author: Bill Erickson
Author URI: http://www.billerickson.net/blog/wordpress-guide
*/
class BE_Flex_Slider {
var $instance;
function __construct() {
$this->instance =& $this;
register_activation_hook( __FILE__, array( $this, 'activation_hook' ) );
add_action( 'plugins_loaded', array( $this, 'init' ) );
}
/**
* Activation Hook
* Confirm WP Rotator is currently active
*/
function activation_hook() {
if( !function_exists( 'wp_rotator_option' ) ) {
deactivate_plugins( plugin_basename( __FILE__ ) );
wp_die( sprintf( __( 'Sorry, you can’t activate unless you have installed WP Rotator', 'flex-slider-for-wp-rotator'), 'http://wordpress.org/extend/plugins/wp-rotator/' ) );
}
}
function init() {
// Remove original scripts and styles
remove_action('wp_head','wp_rotator_css');
remove_action('admin_head','wp_rotator_css');
remove_action('wp_head','wp_rotator_javascript');
remove_action('admin_head','wp_rotator_javascript');
remove_action('init','wp_rotator_add_jquery');
remove_action('admin_init','wp_rotator_add_jquery');
// Enqueue Scripts and Styles
add_action( 'init', array( $this, 'enqueue_scripts_and_styles' ) );
// Remove original outer markup
remove_action( 'wp_rotator', 'wp_rotator' );
// Add new markup
add_action( 'wp_rotator', array( $this, 'flex_slider' ) );
remove_shortcode( 'wp_rotator' );
add_shortcode( 'wp_rotator', array( $this, 'flex_slider_markup' ) );
}
function enqueue_scripts_and_styles() {
// Use this filter to limit where the scripts are enqueued.
$show = apply_filters( 'be_flex_slider_show_scripts', true );
if ( true === $show ) {
wp_enqueue_style( 'flex-slider', plugins_url( 'flexslider.css', __FILE__ ) );
wp_enqueue_script( 'jquery ');
wp_enqueue_script( 'flex-slider', plugins_url( 'jquery.flexslider-min.js', __FILE__ ), array( 'jquery' ) );
add_action( 'wp_head', array( $this, 'flex_slider_settings' ) );
}
}
function flex_slider_settings() {
?>
<script type="text/javascript" charset="utf-8">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
<?php
$flex_settings = array(
'animation' => '"' . wp_rotator_option( 'animate_style' ) . '"',
'slideshowSpeed' => wp_rotator_option( 'rest_ms' ),
'animationDuration' => wp_rotator_option( 'animate_ms' ),
);
$flex_slide_settings = array(
'controlsContainer' => '".flex-container"'
);
if( 'slide' == wp_rotator_option( 'animate_style' ) )
$flex_settings = array_merge( $flex_settings, $flex_slide_settings );
$flex_settings = apply_filters( 'be_flex_slider_settings', $flex_settings );
foreach ( $flex_settings as $field => $value ) {
echo $field . ': ' . $value . ', ';
}
?>
});
});
</script>
<?php
}
function flex_slider_markup() {
$output = '';
if( 'slide' == wp_rotator_option( 'animate_style' ) )
$output .= '<div class="flex-container">';
$output .= '<div class="flexslider"><ul class="slides">';
$loop = new WP_Query( esc_attr( wp_rotator_option('query_vars') ) );
while ( $loop->have_posts() ): $loop->the_post(); global $post;
$url = esc_url ( get_post_meta( $post->ID, 'wp_rotator_url', true ) );
if ( empty( $url ) ) $url = get_permalink($post->ID);
$show_info = esc_attr( get_post_meta( $post->ID, 'wp_rotator_show_info', true ) );
if ( true == $show_info ) {
$title = get_the_title();
if ( get_the_excerpt() ) $excerpt = get_the_excerpt();
else $excerpt = '';
$caption = $title . ' <span class="excerpt">' . $excerpt . '</span>';
$info = '<p class="flex-caption">' . apply_filters( 'be_flex_slider_caption', $caption, $title, $excerpt ) . '</p>';
} else {
$info = '';
}
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'wp_rotator' );
$slide = '<li><img src="' . $image[0] . '" />' . $info . '</li>';
$output .= apply_filters( 'be_flex_slider_slide', $slide );
endwhile; wp_reset_query();
$output .= '</ul></div>';
if( 'slide' == wp_rotator_option( 'animate_style' ) )
$output .= '</div>';
return $output;
}
function flex_slider() {
echo $this->flex_slider_markup();
}
}
new BE_Flex_Slider;
?>
I have contacted the plug-in developer, he's not responding so I assume hes not going to support my question - so I'm left to handcode.
http://wordpress.org/extend/plugins/wp-rotator/
http://flex.madebymufffin.com/
http://wordpress.org/extend/plugins/flex-slider-for-wp-rotator/
Thanks for any pointers!
It looks like captions are automatically added to the slider as long as you set the post to show rotator info (wp_rotator_show_info... probably on the plugin settings page or on your individual post page). The automatic caption is made up of the title of the post plus the excerpt. Here's the key part in the plugin above:
$show_info = esc_attr( get_post_meta( $post->ID, 'wp_rotator_show_info', true ) );
if ( true == $show_info ) {
$title = get_the_title();
if ( get_the_excerpt() ) $excerpt = get_the_excerpt();
else $excerpt = '';
$caption = $title . ' <span class="excerpt">' . $excerpt . '</span>';
$info = '<p class="flex-caption">' . apply_filters( 'be_flex_slider_caption', $caption, $title, $excerpt ) . '</p>';
} else {
$info = '';
}
UPDATE: If you want the caption to show no matter what, replace the above portion with this:
$title = get_the_title();
if ( get_the_excerpt() ) $excerpt = get_the_excerpt();
else $excerpt = '';
$caption = $title . ' <span class="excerpt">' . $excerpt . '</span>';
$info = '<p class="flex-caption">' . apply_filters( 'be_flex_slider_caption', $caption, $title, $excerpt ) . '</p>';
Note that I merely deleted the part that checks for wp_rotator_show_info.
Related
I am editing the latest-blog.php file for WordPress and I have two goals.
I would like the post category to be displayed and have a class of category assigned to it.
I would like to assign a class to the thumbnail, the title and the excerpt so I can style them.
The code below is where I believe the changes need to made
foreach ( $recent_posts as $post ) {
$post_id = $post['ID'];
$title = get_the_title( $post_id );
if ( ! $title ) {
$title = __( '(Untitled)' );
}
$post_url = get_permalink( $post_id );
$text = get_post( $post_id );
$text = $text->post_content;
$text = wp_trim_words( $text, 25, '... <a class="subtitle-red" style="display:block;" href="'.$post_url.'">read full article</a>' );
$excerpt = $text;
$list_items_markup .= sprintf(
'<li>
%1$s%3$s<p>%4$s</p>',
get_the_post_thumbnail( $post_id ),
esc_url( get_permalink( $post_id ) ),
esc_html( $title ),
$excerpt
);
if ( isset( $attributes['displayPostDate'] ) && $attributes['displayPostDate'] ) {
$list_items_markup .= sprintf(
'<time datetime="%1$s" class="wp-block-latest-posts__post-date">%2$s</time>',
esc_attr( get_the_date( 'c', $post_id ) ),
esc_html( get_the_date( '', $post_id ) )
);
}
$list_items_markup .= "</li>\n";
}
As this is a core WP file editing it really isn't the best idea so an extra question... could this be done via functions.php instead?
Thanks
TJ
The code below adds an image into my wordpress RSS feed. I am wanting to make it so that the image is automatically hyperlinked back to the corresponding post. The code is in my theme's functions.php
function wcs_post_thumbnails_in_feeds( $content ) {
global $post;
if( has_post_thumbnail( $post->ID ) ) {
$content = get_the_post_thumbnail( $post->ID ) . '<span class="text">' . $content . '</span>';
}
return $content;
}
add_filter( 'the_excerpt_rss', 'wcs_post_thumbnails_in_feeds' );
add_filter( 'the_content_feed', 'wcs_post_thumbnails_in_feeds' );
Can I change this so that the post_thumbnail is automatically wrapped with a link to the post?
How can I wrap the get_the_post_thumbnail( $post->ID ) part of the code with a link? Thanks
You can use the get_permalink function and pass it the post ID.
function wcs_post_thumbnails_in_feeds( $content ) {
global $post;
if( has_post_thumbnail( $post->ID ) ) {
$content = '' . get_the_post_thumbnail( $post->ID ) . '<span class="text">' . $content . '</span>';
}
return $content;
}
I was able to get the title and excerpt to display correctly, but I can't figure out which permalink call to use.
function display_excerpt_shortcode( $atts ) {
extract(shortcode_atts(array(
'excerptid' => ''
), $atts));
if ($excerptid) {
$args=array(
'p' => $excerptid,
'post_type' => 'post',
'post_status' => 'publish'
);
$my_query = new WP_Query($args);
if ($my_query) {
$title = apply_filters( 'the_title', $my_query->posts[0]->post_title );
$excerpt = apply_filters( 'the_excerpt', $my_query->posts[0]->post_excerpt );
$link = apply_filters( 'the_permalink', $my_query->posts[0]->post_permalink );
return '<h3>' . $title . '</h3> <p>' . $excerpt . '</p> <a class="button small primary" href="' . $link . '" title="' . $title . '" >Read More </a>';
}
}
return;
}
add_shortcode('display_excerpt', 'display_excerpt_shortcode');
I've tried all kinds of combinations. the_permalink, get_permalink, post_permalink... I just can't figure out if it's the wrong combination or if I'm just completely off the mark. Thanks in advance.
Have you tried:
$link = get_permalink( $my_query->posts[0]->post_ID )
I think your problem is that the query object has no 'permalink' property.
Following the guide in the codex's class reference page, you'll find the pattern of setting a new post object during each iteration of the loop with $the_query->the_post();:
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
//Now reference WP post functions:
the_title();
the_permalink();
}
}
Sorry it's a totally different design, but this has never failed me.
I have this code to retrieve the image url for the images in a gallery and it works ok but i cannot figure out how i could get the caption for each image.
I tried searching all over but i cannot seem to put all the information out there together! Any suggestions on how i could retrieve the captions?
function show_related_gallery_image_urls( $content ) {
global $post;
// Only do this on singular items
if( ! is_singular() )
return $content;
// Make sure the post has a gallery in it
if( ! has_shortcode( $post->post_content, 'gallery' ) )
return $content;
// Retrieve all galleries of this post
$galleries = get_post_galleries_images( $post );
$image_list = <<<END
<div class="side_bar">
<div class="related">
<h3>Related Images</h3>
END;
// Loop through all galleries found
foreach( $galleries as $gallery ) {
// Loop through each image in each gallery
foreach( $gallery as $image ) {
$src = $image;
$image_list .= '<a href="' . $src . '" rel="' . get_the_title() . '">'
. '<img src="' . $src .'" />'
. '</a>';
}
}
$image_list .= '</div></div>';
// Append our image list to the content of our post
$content .= $image_list;
return $content;
}
add_filter( 'the_content', 'show_related_gallery_image_urls' );
I hope i explained myself well! Thanks!
This hasn't been tested by try it, I cleaned up some of your code a bit:
1) Combined the first 2 IF statements into 1
2) Used get_post_gallery() (Codex) which returns the src and the image ID. We use the image ID to return the caption, we can also get the description and more if we needed to.
3) Removed the containing Foreach Statement since both my method only returns 1 gallery, not multiple so no need to loop through.
function show_related_gallery_image_urls( $content ) {
global $post;
// Only do this on singular items
if( ! is_singular() || !has_shortcode( $post->post_content, 'gallery' ) )
return $content;
// Retrieve all galleries of this post
$galleries = get_post_gallery( $post, false );
$image_list = <<<END
<div class="side_bar">
<div class="related">
<h3>Related Images</h3>
END;
// Loop through each image in each gallery
$i = 0; // Iterator
foreach( $gallery['src'] as $src ) {
$caption = wp_get_attachment($gallery['id'][$i])['caption'];
$image_list .= '<a href="' . $src . '" rel="' . get_the_title() . '">'
. '<img src="' . $src .'" />'
. '<div class="caption">'
. $caption
. '</div>'
. '</a>';
$i++; // Incremenet Interator
}
$image_list .= '</div></div>';
// Append our image list to the content of our post
$content .= $image_list;
return $content;
}
add_filter( 'the_content', 'show_related_gallery_image_urls' );
function wp_get_attachment( $attachment_id ) {
$attachment = get_post( $attachment_id );
return array(
'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
'caption' => $attachment->post_excerpt,
'description' => $attachment->post_content,
'href' => get_permalink( $attachment->ID ),
'src' => $attachment->guid,
'title' => $attachment->post_title
);
}
On a sidenote, there is a gallery filter function where you can change how the gallery is displayed post_gallery Filter, here's a question that kind of shows how to edit it. There's also a great WordPress Stack Exchange where that may be helpful in the future!
I am having a little trouble editing a Woocommerce template with hooks. Essentially I would just like to change the product-image template so instead of linking to the uploaded product image, it links to the product post.
The current product-image.php woocommerce template has
global $post, $woocommerce, $product;
?>
<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
'title' => $image_title
) );
$attachment_count = count( $product->get_gallery_attachment_ids() );
if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', woocommerce_placeholder_img_src() ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>
I am unsure of how to adapt the echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID ); to change the %s to a link to the post.
The hook I am using is:
add_action('woocommerce_product_thumbnails', 'custom_links');
function custom_links() {
//code
}
Could someone help me gain some direction with this?
You are calling action not filter. Also you are calling the wrong one.
Change this:
add_action('woocommerce_product_thumbnails', 'custom_links');
to this:
add_filter('woocommerce_single_product_image_html', 'custom_links', 10, 2);
The 2 represents the argument count for the function and your custom_links() should be something like:
function custom_links($link, $post_id) {
$pattern = '/(?<=href=")([^"]*)/';
$replacement = get_permalink($post->ID);
return preg_replace($pattern, $replacement, $link);
}
Process the $link variable as needed and then return it.