I am trying to use a post image/thumbnail in one div and the content in a new div on a custom layout. Having trouble trying to get the content after the image to show.
This works in getting my post title and image into the desired layout but is not showing the image caption–
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h3 class="title no-underline">', '</h3>' ); ?>
</header><!-- .entry-header -->
<div class="news-images">
<div id="news-swiper" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-caption="">
<div class="entry-content news-item-copy">
<?php
$get_description = get_post(get_post_thumbnail_id())->post_excerpt;
the_post_thumbnail();
if(!empty($get_description)){//If description is not empty show the div
echo '<div class="image-captions">' . get_post(get_post_thumbnail_id())->post_excerpt . '</div>';
}
?>
</div>
</div>
</div>
</div>
</div>
<div class="news-sharing">
<?php wpsocialite_markup(); ?>
</div>
This is where I am trying to get the remaining post content and having issues.
<div class="news-item-copy">
<?php the_excerpt(); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'themeName' ),
'after' => '</div>',
) );
?>
</div>
</article>
I've used <?php the_excerpt(); ?> just to place the content in it's desired location but obviously because it's an excerpt it's not showing the full content. The idea was to place the featured image/thumbnail with caption on top, the social sharing in the middle and the content last.
I think you want to replace the_excerpt() with the_content()
http://codex.wordpress.org/Function_Reference/the_content
You re passing thumbnail id inside get_post,you have to pass post id not thumbnail id in that function
$get_description = get_post(get_post_thumbnail_id())->post_excerpt;
Or simply echo the_content(); it will print post content & if you want to display some limited content
then use
substr(the_content(),0,150) it will display only 150 character
Related
I have a blog running on MemberPress and I am trying to add a in the content of my blog posts to add a new paragraph.
When I add the < br / > it does not work, see the image.
My theme does not seem to be rendering the HTML in the post. I tried the visual editor and the text editor.
Do I need to add something to my PHP code to make my posts show the HTML I enter?
Here is the PHP for the blog content:
<div class="entry-content">
<div class="entry-meta ht-post-info">
<?php total_posted_on(); ?>
</div><!-- .entry-meta -->
<header class="entry-header">
<?php the_title( sprintf( '<h2 class="entry-title">', esc_url( get_permalink() ) ), '</h2>' ); ?>
</header><!-- .entry-header -->
<div class="entry-categories">
<?php echo total_entry_category(); // WPCS: XSS OK. ?>
</div>
<!-- .entry-content -->
<div class="entry-summary" style="margin-left: 13%; margin-top: 2%;">
<?php
if(has_category('premium', $wp_query->post->ID)){
echo do_shortcode("[mepr-active rule='282' ifallowed='show' unauth='message' unauth_message='This content is for authorized members only.']". esc_html(wp_trim_words( get_the_content(), 490 ))."[/mepr-active]");
}else{
echo esc_html(wp_trim_words( get_the_content(), 490 ));
}
?>
</div>
</div>
This is the post that showing 3 lines on one:
The wp_trim_words function you're using strips all HTML tags out.
https://core.trac.wordpress.org/browser/tags/4.9.8/src/wp-includes/formatting.php#L3359
$text = wp_strip_all_tags( $text );
(Even if it didn't, your use of the esc_html function after it would also break your HTML tags in the post.)
I'm trying to use CSS multicolumn to create a masonry layout for the blog index page of a WordPress website I'm building, and I'm having some issues with it. I'm using Bones as the starter theme.
I adjusted the loop in the home.php file to create the masonry effect:
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap cf">
<main id="main" class="m-all t-2of3 d-5of7 cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog">
<div class="masonry-container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="masonry-item">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
<a href="<?php the_permalink(); ?>">
<section class="entry-content cf">
<h1 class="h2 entry-title"><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail() ) : ?>
<div class="masonry-thumbnail">
<?php the_post_thumbnail('masonry-thumb'); ?>
<span class="caption"><span><?php the_title(); ?></span></span></a>
<?php endif; ?>
</div><!--.masonry-thumbnail-->
</div> <!--.masonry-item-->
<div class="masonry-post-excerpt">
<?php the_excerpt(); ?>
</div><!--.masonry-post-excerpt-->
<div class="blog-index-content"><?php the_content(); ?></div></a>
</section>
</article>
<?php endwhile; ?>
<?php bones_page_navi(); ?>
<?php else : ?>
<article id="post-not-found" class="hentry cf">
<header class="article-header">
<h1><?php _e( 'Oops, Post Not Found!', 'bonestheme' ); ?></h1>
</header>
<section class="entry-content">
<p><?php _e( 'Uh Oh. Something is missing. Try double checking things.', 'bonestheme' ); ?></p>
</section>
<footer class="article-footer">
<p><?php _e( 'This is the error message in the index.php template.', 'bonestheme' ); ?></p>
</footer>
</article>
<?php endif; ?>
</div> <!--.masonry-container-->
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
I'm trying to get the image to fill the entire .masonry-item div with the post thumbnail (featured image), and right now, the .masonry-item div is larger that the post thumbnail.
There's also an empty <a> tag that appears under the image and I can't figure out where it's coming from.
I'm also trying to get the post title to appear over the thumbnail image once it, and I haven't figured out how to get it to work.
Here's a link to my test site: http://tippingpointphoto.flywheelsites.com/blog/
Any help would be much appreciated!
Inside your .masonry-thumbnail div there is a <a> link, this is the empty tag. Give it a class name and assign it these style properties:
.link { // for example if you called it link
display:block; // this will wrap it around the image
position:relative; // to position the caption
}
Now update your .caption class and add:
position:absolute;
top:auto;
bottom:0; // to text will start from the bottom of the image
z-index:1; // to position the text above the image
And when i looked at your site the image width appeared to match the div width so I'm assuming you managed to fix that problem? If not change it's css so that width is set to 100%.
My Wordpress site displays all the posts, stacked in articles spanning the full width on the index.php using rows (Bootstrap 3).
index.php - HTML
<div>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
get_template_part( 'content' );
?>
<?php endwhile; ?>
<div class="clearfix"></div>
<div class="col-md-12">
</div>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</div>
content.php displays the post in each article (which are stacked on top of each other, full width, down the page)
<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>
<div class="row">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
I have the title and category showing up properly in each row. I would like each post's post-thumbnail (I added its use in functions.php) to be the background image of each row. Filling the whole space (background-size: cover)
Basically large, '100% width' & '300px(roughly) height' rows, each with corresponding title, category, and their post-thumbnail as a background-image.
If not done yet, enable thumbnails and define custom image sizes:
// Enable thumbnails
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size',580, 480, true);
To display the thumbnails:
First, get the featured image URL for the post:
The parameter 'my-fun-size' should be the name of the size of the image you defined in your functions.php file - it can also be 'full' or 'thumbnail'
<?php
if (has_post_thumbnail()) {
$thumbnail_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'my-fun-size' );
$thumbnail_url = $thumbnail_data[0];
}
?>
Then add the image as a background:
<article id="post-<?php the_ID(); ?>" style="background-image:url('<?php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >
<div class="row">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
And finally, apply some CSS to achieve your desired background-size:
article {
background-size: cover;
}
It sounds like you've already figured out the CSS part, so here's the PHP/HTML you're looking for:
<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>
<?php $imgurl = wp_get_attachment_src( get_post_thumbnail_id($post->ID) ); ?>
<div class="row" style="background-image: url('<?php echo $imgurl[0]; ?>');">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
References:
http://codex.wordpress.org/Function_Reference/get_post_thumbnail_id
http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src
Working on trying to get single post image and caption above post content in a custom theme.
Can I get the image caption below the image and remaining content below a new div?
Current code:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h3 class="title no-underline">', '</h3>' ); ?>
</header>
<div class="entry-content news-item-copy">
<?php
$get_description = get_post(get_post_thumbnail_id())->post_excerpt;
the_post_thumbnail();
if(!empty($get_description)){//If description is not empty show the div
echo '<div class="image-captions">' . get_post(get_post_thumbnail_id())->post_excerpt . '</div>';
}
?>
<div class="news-sharing">
<a class="socialite twitter-share" href="" target="_blank" data-via="" data-text="New Website Launch — " data-url="" data-count="horizontal">Share on Twitter</a>
<a class="facebook-like socialite" data-href="" target="_blank" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false">Like on Facebook</a>
</div>
<?php the_excerpt(); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'themeName' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
</article><!-- #post-## -->
This works in displaying the post image and excerpt but not the image with caption and not the full post text.
Replacing this:
<?php the_excerpt(); ?>
with:
<?php the_content(); ?>
returns the full post content including the image again.
Try this, there is nothing special just getting the post object and then its values. post_excerpt are also known as captions.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h3 class="title no-underline">', '</h3>' ); ?>
</header>
<div class="entry-content news-item-copy">
<?php
if(has_post_thumbnail())
{
the_post_thumbnail();
$thumbnail_id = get_post_thumbnail_id(get_the_ID());
$thumbnail_data = get_post($thumbnail_id);
$caption = $thumbnail_data->post_excerpt;
if(!empty($caption)){//If description is not empty show the div
echo '<div class="image-captions">' . $caption . '</div>';
}
}
?>
<div class="news-sharing">
<a class="socialite twitter-share" href="" target="_blank" data-via="" data-text="New Website Launch — " data-url="" data-count="horizontal">Share on Twitter</a>
<a class="facebook-like socialite" data-href="" target="_blank" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false">Like on Facebook</a>
</div>
<?php
echo the_content();
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'themeName' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
</article><!-- #post-## -->
After this you don't need to add the featured/thumbnail image to the post content and it will not appear again in content. I hope this makes sense now.
I have a wordpress website and I want to display this at the end of every blog post:
<h5 style="margin-bottom: 15px;margin-top:35px;"><em><strong>Text:</strong></em>
[shareaholic app="share_buttons" id="5374371"]
If I add this to single.php which shows the pages I want to modify, the shortcode won't work.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
/* Featured Image */
if(has_post_thumbnail()) { ?>
<p class="post-thumbnail">
<?php the_post_thumbnail('full'); ?>
</p>
<?php }
the_content();
the_tags('<p>'.__('Tags:', 'sntheme'),', ','</p>');
/* Show post page links */
wp_link_pages( array( 'before' => '<p>' . __( 'Pages:', 'sntheme' ), 'after' => '</p>' ) );
?>
<h5 style="margin-bottom: 15px;margin-top:35px;"><em><strong>Text:</strong></em>
[shareaholic app="share_buttons" id="5374371"]
</article><!-- end post -->
Is there a workaround for this?
Yes - http://wordpress.org/plugins/shareaholic/installation/
<?php echo do_shortcode ('[shareaholic app="share_buttons" id="5374371"]'); ?>