I am using a wordpress theme for my website and I'm trying to alter the php so that the featured image is displayed within the post content instead of before or after (the top of the post or the bottom)
Here's the original code:
<?php if ( ( has_post_thumbnail( $post_id ) || '' != get_post_meta( $post_id, 'Thumbnail', true ) ) && 'on' == et_get_option( 'origin_thumbnails' ) ) { ?>
<div class="post-thumbnail">
<?php
if ( has_post_thumbnail( $post_id ) ) the_post_thumbnail( 'full' );
else printf( '<img src="%1$s" alt="%2$s" />', esc_attr( get_post_meta( $post_id, 'Thumbnail', true ) ), the_title_attribute( array( 'echo' => 0 ) ) );
?>
</div> <!-- end .post-thumbnail -->
<?php } ?>
<?php the_content(); ?>
Here's how I tweaked it in my child theme:
<?php the_content(); ?>
<?php if ( ( has_post_thumbnail( $post_id ) || '' != get_post_meta( $post_id, 'Thumbnail', true ) ) && 'on' == et_get_option( 'origin_thumbnails' ) ) { ?>
<div class="post-thumbnail">
<?php
if ( has_post_thumbnail( $post_id ) ) the_post_thumbnail( 'full' );
else printf( '<img src="%1$s" alt="%2$s" />', esc_attr( get_post_meta( $post_id, 'Thumbnail', true ) ), the_title_attribute( array( 'echo' => 0 ) ) );
?>
</div>
I'm not very fluent in php and all that accomplished was moving the featured image to the bottom of the post :-/. I posted to my theme's forum and was given the following code which didn't seem to do anything.
add_filter( 'the_content', insert_featured_image, 20 );
function insert_featured_image( $content ) {
$content = preg_replace( "/<\/p>/", "</p>" . get_the_post_thumbnail($post->ID, 'post-single'), $content, 1 );
return $content;
}
Can anyone point me in the right direction?
TIA!
What is the reasoning behind attempting to move the featured image into the content? The Wordpress codex gives the following as an example:
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
the_content();
Basically, the_post_thumbnail(); will display the image that was selected as the featured image while the_content(); is simply displaying what was inputted into the wysiwyg for that post or page.
If you're attempting to do this so that it matches a design or layout, you might want to look at applying addition markup and styles to this area. If you require text before and after the featured image you should look into custom fields.
Related
Hi :) I am working on my site with the "flexible post widget" to show the related contents or the content that I am interested in showing on the sidebar.
The widget works very well and I'm interested in continuing to use it, especially for the design and adaptability options with my site.
The problem? It does not include a function for "exclude the current post".
I was reviewing the code (I add it to this thread) and I think I could add some lines of code for this function (exclude the post I'm reading).
Unfortunately I'm new to programming and I'm lost with what and where to add it.
Could you help me?
<?php
/**
* Flexible Posts Widget: Default widget template
*
* #since 3.4.0
*
* This template was added to overcome some often-requested changes
* to the old default template (widget.php).
*/
// Block direct requests
if ( !defined('ABSPATH') )
die('-1');
echo $before_widget;
if ( ! empty( $title ) )
echo $before_title . $title . $after_title;
if ( $flexible_posts->have_posts() ):
function be_exclude_current_post( $args ) {
if( is_singular() && !isset( $args['post__in'] ) )
$args['post__not_in'] = array( get_the_ID() );
return $args;
}
add_filter( 'widget_posts_args', 'be_exclude_current_post' );
?>
<ul class="dpe-flexible-posts">
<?php while ( $flexible_posts->have_posts() ) : $flexible_posts->the_post(); global $post; ?>
<li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php echo the_permalink(); ?>">
<?php
if ( $thumbnail == true ) {
// If the post has a feature image, show it
if ( has_post_thumbnail() ) {
the_post_thumbnail( $thumbsize );
// Else if the post has a mime type that starts with "image/" then show the image directly.
} elseif ( 'image/' == substr( $post->post_mime_type, 0, 6 ) ) {
echo wp_get_attachment_image( $post->ID, $thumbsize );
}
}
?>
<div class="title"><?php the_title(); ?></div>
</a>
</li>
<hr>
<?php endwhile; ?>
</ul><!-- .dpe-flexible-posts -->
<?php
endif; // End have_posts()
echo $after_widget;
Add this to your theme's 'functions.php' and remove it from the widget template.
function be_exclude_current_post( $args ) {
if( is_singular() && !isset( $args['post__in'] ) )
$args['post__not_in'] = array( get_the_ID() );
return $args;
}
add_filter( 'dpe_fpw_args', 'be_exclude_current_post' );
I want to replace full size image with large image on woocommerce lighbox.
here is my code -
<?php
if ( has_post_thumbnail() ) {
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) );
$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" class="bigbox" />', woocommerce_placeholder_img_src() ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
I've tried to change $image_link to
$image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
with no luck.
The $image_link comes as array. to echo the image link, try,
<?php echo $image_link[0]; ?>
So your full code should be like this
WooCommerce has the filter 'woocommerce_single_product_image_html' , you don't repeat the code in your theme for this.
You would add the following in your functions.php or your functions plugin.
Note: this works in 2.6x and will not work with 2.7 since they changed the single image display a lot.
function yourprefix_woocommerce_single_product_image_html( $html, $post_id ) {
if ( ! class_exists( 'WooCommerce' ) ) return;
//bail if WooCommerce is not installed and active since we are using the WC_VERSION constant
if ( version_compare( WC_VERSION, '2.7', '<' ) ) {
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' ); //this is where and use the [0] on this variable in the sprintf
$image = get_the_post_thumbnail( $post_id, 'shop_single', array( 'title' => $image_title ) );
$html = sprintf('%s', $image_link[0], $image_title, $image );
} //end version compare still return the html so we don't get an error
return $html;
}
add_filter( 'woocommerce_single_product_image_html', 'yourprefix_woocommerce_single_product_image_html', 10, 2 );
Note: wp_get_attachment_image_src() is not what is used in the default code, it's wp_get_attachment_image_url() which gets the image uploaded, not a sized image. If you want the generated image use $variable = wp_get_attachment_image_src( ... ); and then $variable[0] for the url, $variable[1] width, $variable[2] height. There are plenty of tuts on this, so I won't repeat
So, I'm developing a site for a client where the homepage is built like a one-page scroller, but I also need the functionality of additional pages outside of the single homepage. I've built a custom post type for these sections and used this code to display them on the homepage.
<?php query_posts( array('post_type'=>'homepage', 'posts_per_page' => 1000, 'orderby' => 'menu_order', 'order' => 'ASC') ); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php
global $post;
$slug = $post->post_name;
locate_template(
array(
"template-$slug.php",
'template-main.php'
), true
);
?>
<?php endwhile; endif; ?>
So, as you can see, this is automatically pulling content and displaying it using page templates based on the post slug, however, I need to allow my client to display the content based on a page template chosen in a dropdown and I've used this code to create a dropdown UI that displays the page templates.
add_action( 'add_meta_boxes', 'add_custom_page_attributes_meta_box' );
function add_custom_page_attributes_meta_box(){
global $post;
if ( 'page' != $post->post_type && post_type_supports($post->post_type, 'page-attributes') ) {
add_meta_box( 'custompageparentdiv', __('Template'), 'custom_page_attributes_meta_box', NULL, 'side', 'core');
}
}
function custom_page_attributes_meta_box($post) {
$template = get_post_meta( $post->ID, '_wp_page_template', 1 ); ?>
<select name="page_template" id="page_template">
<?php $default_title = apply_filters( 'default_page_template_title', __( 'Default Template' ), 'meta-box' ); ?>
<option value="default"><?php echo esc_html( $default_title ); ?></option>
<?php page_template_dropdown($template); ?>
</select><?php
}
add_action( 'save_post', 'save_custom_page_attributes_meta_box' );
function save_custom_page_attributes_meta_box( $post_id ) {
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) return;
if ( ! current_user_can( 'edit_post', $post_id ) ) return;
if ( ! empty( $_POST['page_template'] ) && get_post_type( $post_id ) != 'page' ) {
update_post_meta( $post_id, '_wp_page_template', $_POST['page_template'] );
}
}
So, the problem I'm facing now is how to display all the custom posts in my main page according to the chosen page template.
Thanks so much!
J
Wordpress actually only uses _wp_page_template meta field for page type posts. If you want to change the template, you can use the filter single template. One thing I would recommend is you place good notes that you are using this in your theme/ plugin....
btw update cpt to your post-type
function load_cpt_template($single_template) {
global $post;
if ($post->post_type == 'cpt') {
$new_template = get_post_meta( $post->ID, '_wp_page_template', true );
// if a blank field or not valid do nothing, load default..
if( is_file($new_template) )
$single_template = $new_template;
}
return $single_template;
}
add_filter( 'single_template', 'load_cpt_template' );
I'm building a Woocommerce site.
In the Shop grid overview, I'm showing the Featured Image of each product (see link). This Featured image will be cropped to maintain the same image ratio in the Shop Grid.
In the Single Product page, I managed to hide the Featured Image, and make the first of the thumbnails appear in big (see link).
I did so with the following code:
<div class="images">
<?php
$imgid = $product->get_gallery_attachment_ids();
?>
<a href="<?php echo wp_get_attachment_url( $imgid[0] ); ?>"
class="woocommerce-main-image zoom first"
rel="lightbox[product-gallery]">
<img src="<?php echo wp_get_attachment_url( $imgid[0] ); ?>" alt="">
</a>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>
<script>
jQuery('.thumbnails.columns-3 a:first-child').hide()
</script>
The first part will find the first image in the gallery array and show it in big size (class woocommerce-main-image zoom first) while linking to the lightbox.
Then I call the thumbnails, and I hide the first one using jQuery to avoid a duplicate (first big size image and first thumb are the same).
The problem now is that in the Lightbox, the first image will appear duplicated, as it exists two times in the array, the first one I call in big, and the one from the thumbs array.
Any tips on how to not show the image twice in the lightbox?
Someone mentioned that I should filter the following function, but as of now I don't know how to do that.
public function get_gallery_attachment_ids() {
return apply_filters( 'woocommerce_product_gallery_attachment_ids', array_filter( (array) explode( ',', $this->product_image_gallery ) ), $this );
}
I think that using Multiple Post Thumbnails is the easiest solution. It is exactly for displaying different featured images in different locations.
Option #1: Multiple Post Thumbnails
You would install the plugin and then add the following to your theme's functions.php. It isn't 100% tested so there may be a stray typo or something. Full documentation is here.
// register the new thumbnail
function so_31835142_register_extra_thumbnail() {
if (class_exists('MultiPostThumbnails')) {
new MultiPostThumbnails(
array(
'label' => __('Product Loop Image', 'your-theme'),
'id' => 'product-loop-image',
'post_type' => 'product'
)
);
}
}
add_action( 'after_setup_theme', 'so_31835142_register_extra_thumbnail' );
// remove the existing loop thumbnail
function so_31835142_swap_loop_product_thumbnail(){
if (class_exists('MultiPostThumbnails')) {
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'so_31835142_loop_product_thumbnail', 10 );
}
}
add_action( 'woocommerce_before_shop_loop_item, 'so_31835142_swap_loop_product_thumbnail' );
// Display the Secondary Thumbnail
function so_31835142_loop_product_thumbnail(){
global $product;
$thumbnail = MultiPostThumbnails::get_post_thumbnail(
'product',
'product-loop-image',
$product->id,
'shop_catalog'
);
if ( $thumbnail ) {
return $thumbnail;
} elseif ( wc_placeholder_img_src() ) {
return wc_placeholder_img( $size );
}
}
Then to use it, you'd set "Product Loop Image" the same way you traditionally set the "featured image". And this new image would be used in the loop.
Option #2: Template Overrides
But as an alternative, if you insist, you can write a custom single-product/product-image.php template and put it in your theme's woocommerce templates folder.
In this alternative we will only show images from the image gallery on the single product page, $product->get_gallery_attachment_ids(), and we will use a basic PHP loop and counter system to display the images differently depending on where they are in the loop. IE. the first image will display as the post thumbnail used to display and the remaining items will display as thumbs.
This section I have tested, so it should (in theory) be good to go.
<?php
/**
* Single Product Image
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 2.0.14
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
global $post, $woocommerce, $product;
?>
<div class="images">
<?php
$attachment_ids = $product->get_gallery_attachment_ids();
if ( $attachment_ids ) {
$loop = 0;
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 3 );
$attachment_count = count( $attachment_ids );
foreach ( $attachment_ids as $attachment_id ) {
// here's your first image
if( $loop === 0 ){
$image_title = esc_attr( get_the_title( $attachment_id ) );
$image_caption = get_post( $attachment_id )->post_excerpt;
$image_link = wp_get_attachment_url( $attachment_id );
$image = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), null, array(
'title' => $image_title,
'alt' => $image_title
) );
if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_caption, $image ), $post->ID );
// resume the thumbnails for the rest
} else {
// open the thumbnails div
if( $loop === 1 ) { ?>
<div class="thumbnails <?php echo 'columns-' . $columns; ?>">
<?php }
$classes = array( 'zoom' );
if ( $loop == 0 || $loop % $columns == 0 )
$classes[] = 'first';
if ( ( $loop + 1 ) % $columns == 0 )
$classes[] = 'last';
$image_link = wp_get_attachment_url( $attachment_id );
if ( ! $image_link )
continue;
$image_title = esc_attr( get_the_title( $attachment_id ) );
$image_caption = esc_attr( get_post_field( 'post_excerpt', $attachment_id ) );
$image = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $attr = array(
'title' => $image_title,
'alt' => $image_title
) );
$image_class = esc_attr( implode( ' ', $classes ) );
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '%s', $image_link, $image_class, $image_caption, $image ), $attachment_id, $post->ID, $image_class );
// close the thumbnails div
if( $loop === $attachment_count ) { ?>
</div>
<?php }
}
$loop++;
}
?>
<?php
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
}
?>
</div>
I need to shorten the title in the previous and next buttons in a WP theme.
Here's the code:
<?php
/* ----------------------------------------------------------------------------------
Display navigation to next/previous pages when applicable.
---------------------------------------------------------------------------------- */
if ( ! function_exists( 'thinkup_input_nav' ) ) :
function thinkup_input_nav( $nav_id ) {
global $wp_query, $post;
// Don't print empty markup on single pages if there's nowhere to navigate.
if ( is_single() ) {
$previous = ( is_attachment() ) ? get_post( $post->post_parent ) : get_adjacent_post( false, '', true );
$next = get_adjacent_post( false, '', false );
if ( ! $next && ! $previous )
return;
}
// Don't print empty markup in archives if there's only one page.
if ( $wp_query->max_num_pages < 2 && ( is_home() || is_archive() || is_search() ) )
return;
?>
<nav role="navigation" id="<?php echo $nav_id; ?>">
<?php if ( is_single() ) : ?>
<?php previous_post_link( '<div class="nav-previous">%link</div>', '<span class="meta-icon"><i class="icon-angle-left icon-large"></i></span><span class="meta-nav">%title</span>' ); ?>
<?php next_post_link( '<div class="nav-next">%link</div>', '<span class="meta-nav">%title</span><span class="meta-icon"><i class="icon-angle-right icon-large"></i></span>' ); ?>
<?php elseif ( $wp_query->max_num_pages > 1 && ( is_home() || is_archive() || is_search() ) ) : // navigation links for home, archive, and search pages ?>
<?php if ( get_next_posts_link() ) : ?>
<div class="nav-previous"><?php next_posts_link( __( 'Older posts', 'lan-thinkupthemes') ); ?></div>
<?php endif; ?>
<?php if ( get_previous_posts_link() ) : ?>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts', 'lan-thinkupthemes') ); ?></div>
<?php endif; ?>
<?php endif; ?>
</nav><!-- #<?php echo $nav_id; ?> -->
<?php
}
endif;
/* ----------------------------------------------------------------------------------
Display navigation to next/previous image when applicable.
---------------------------------------------------------------------------------- */
if ( ! function_exists( 'thinkup_input_imagesnav' ) ) :
function thinkup_input_imagesnav() {
global $wp_query, $post;
?>
<nav role="navigation" id="nav-below">
<div class="nav-previous"><?php previous_image_link( 'false', '<div class="nav-previous"><span class="meta-icon"><i class="icon-angle-left icon-large"></i></span><span class="meta-nav">' . __( 'Previous', 'lan-thinkupthemes') . ' </span></div>' ); ?></div>
<div class="nav-next"><?php next_image_link( 'false', '<span class="meta-nav">' . __( 'Next', 'lan-thinkupthemes') . '</span><span class="meta-icon"><i class="icon-angle-right icon-large"></i></span>' ); ?></div>
</nav><!-- #image-navigation -->
<?php
}
endif;
/* Display comments at bottom of post, page and project pages. */
function thinkup_input_allowcomments() {
if ( comments_open() || '0' != get_comments_number() )
comments_template( '/comments.php', true );
}
/* ----------------------------------------------------------------------------------
Returns true if a blog has more than 1 category.
---------------------------------------------------------------------------------- */
function thinkup_input_categorizedblog() {
if ( false === ( $all_the_cool_cats = get_transient( 'all_the_cool_cats' ) ) ) {
// Create an array of all the categories that are attached to posts
$all_the_cool_cats = get_categories( array(
'hide_empty' => 1,
) );
// Count the number of categories that are attached to the posts
$all_the_cool_cats = count( $all_the_cool_cats );
set_transient( 'all_the_cool_cats', $all_the_cool_cats );
}
if ( '1' != $all_the_cool_cats ) {
return true;
} else {
return false;
}
}
/* Flush out the transients used in thinkup_input_categorizedblog. */
function thinkup_input_transient_flusher() {
delete_transient( 'all_the_cool_cats' );
}
add_action( 'edit_category', 'thinkup_input_transient_flusher' );
add_action( 'save_post', 'thinkup_input_transient_flusher' );
What I tried was to add substring to this line:
<?php previous_post_link( '<div class="nav-previous">%link</div>', '<span class="meta-icon"><i class="icon-angle-left icon-large"></i></span><span class="meta-nav">%title</span>' ); ?>
to:
<?php previous_post_link( '<div class="nav-previous">%link</div>', '<span class="meta-icon"><i class="icon-angle-left icon-large"></i></span><span class="meta-nav"><?php echo substr(%title,0,10)?></span>' ); ?>
but upon reloading the page it displayed an empty text instead.
What am I doing wrong?
You can override the previous_post_link() function in your functions.php file of your theme as like this :
function previous_post_link($format='« %link', $link='%title', $in_same_cat = false, $excluded_categories = '',$limit = -1) {
if ( is_attachment() )
$post = & get_post($GLOBALS['post']->post_parent);
else
$post = get_previous_post($in_same_cat, $excluded_categories);
if ( !$post )
return;
$title = apply_filters('the_title', $post->post_title, $post);
if ($limit>-1) {$title = substr($title,0,$limit).'…';}
$string = '<a href="'.get_permalink($post->ID).'">';
$link = str_replace('%title', $title, $link);
$link = $pre . $string . $link . '</a>';
$format = str_replace('%link', $link, $format);
echo $format;
And then you can call the function with the additional argument to define your desired trim length:
<li><?php previous_post_link('%link','« %title',FALSE,'',20); ?></li>
Hope it helps you.
Taken from https://wordpress.org/support/topic/using-substr-to-limit-characters-in-post-title