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.
Related
Hi guys i am new to WP development, this is my client site : bit.do/dFQtv i need to add hr line under each blog excerpt below read more section , how to do it, if i insert the line below read more button that shows in the single blog post page also
this is coding: (template-parts/content.php)
<?php
/**
* Template part for displaying posts
*
* #link https://codex.wordpress.org/Template_Hierarchy
*
*
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php
if ( is_single() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark" >', '</a></h2>' );
endif;
if ( 'post' === get_post_type() ) : ?>
<h4 class="meta text-muted">
<?php blog_posted_on(); ?>
</h4><!-- .entry-meta -->
<?php
endif; ?>
<!-- AddThis Button BEGIN -->
<div class="addthis_inline_share_toolbox_mzc3" style="margin-bottom:20px;" data-title="<?php the_title() ?>" data-url="<?php the_permalink(); ?>" </div>
<!-- AddThis Button END -->
</header><!-- .entry-header -->
<div class="entry-content">
<?php
the_content( sprintf (
/* translators: %s: Name of current post. */
wp_kses(__( 'Read more', 'blog' ), array( 'span' => array( 'class' =>
array() ) ) ),
the_title( '<span class="screen-reader-text">"', '"</span>', false )
) );
wp_link_pages( array(
'before' => '<div class= "page-links">'. esc_html__('Pages:', 'blog'
),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php blog_entry_footer(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
(template-parts/content-page.php)
<?php
/**
* Template part for displaying page content in page.php
*
* #link https://codex.wordpress.org/Template_Hierarchy
*
*
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<div class="entry-content"><hr>
<?php
the_content();
wp_link_pages(array(
'before' => '<div class="page-links">' . esc_html__('Pages:','blog'),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
<?php if ( get_edit_post_link() ) : ?>
<footer class="entry-footer">
<?php
edit_post_link(
sprintf(
/* translators: %s: Name of current post */
esc_html__( 'Edit %s', 'blog' ),
the_title( '<span class="screen-reader-text">"', '"</span>', false )
),
'<span class="edit-link">',
'</span>'
);
?>
<hr>
</footer><!-- .entry-footer -->
<?php endif; ?>
</article><!-- #post-## -->
As per saw your theme you add your <hr> tag last line into your content.php inside the template-partsfolder.
like this:
<footer class="entry-footer">
<?php bfablog_entry_footer(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> --><hr>
Double check you edit the correct file...I tried and it's working
Just add hr tag after closing the article tag and also you can write CSS for it to change width and color of it.
<?php
/**
* Template part for displaying page content in page.php
*
* #link https://codex.wordpress.org/Template_Hierarchy
*
*
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<div class="entry-content"><hr>
<?php
the_content();
wp_link_pages(array(
'before' => '<div class="page-links">' . esc_html__('Pages:','bfablog'),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
<?php if ( get_edit_post_link() ) : ?>
<footer class="entry-footer">
<?php
edit_post_link(
sprintf(
/* translators: %s: Name of current post */
esc_html__( 'Edit %s', 'bfablog' ),
the_title( '<span class="screen-reader-text">"', '"</span>', false )
),
'<span class="edit-link">',
'</span>'
);
?>
<hr>
</footer><!-- .entry-footer -->
<?php endif; ?>
</article><!-- #post-## -->
<hr class="abc" />
I try to add some javascript code after the content and before the related news links but my javascript code shown after the related news.
I try to this with add my code here :
themes\themes_name\content_single.php :
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
<div class="entry-meta">
<?php accesspress_basic_posted_on(); ?>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'accesspress-basic' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
<div class="ads-baroot ads-desc">
**my Codes here...**
</div>
The Related news is probably parsed in <?php the_content(); ?>, your javascript-code is below that. Therefore the javascript result is displayed below the related posts.
Create your script file and add in theme default js folder and call in your theme function.php
function custom_scripts() {
wp_enqueue_script( 'customjquery', get_template_directory_uri() . '/js/customjquery.js', array(), '0001', true );
}
add_action( 'wp_head', 'custom_scripts' );
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
I am pretty new in WordPress theme development and I have the following problem.
I have this static page: http://lnx.asper-eritrea.com/lassociazione/
This is the code of my page.php file that render the previous static page:
<?php
/**
* The Template for displaying a single page
*/
get_header();
?>
<!-- Contenuti (griglia) -->
<div class="container">
<!-- Lead presentazione -->
<section id="presentazione">
<div class="row">
<div class="col-sm-12">
<!--<h1 class="text-center"><small>Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</small></h1>-->
<h1 class="text-center title">Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</h1>
<p class="lead text-center">
Association in Defense of the Human Rights of the Eritrean People
</p>
</div><!-- /.col-sm-12 -->
</div><!-- /.row -->
</section><!-- /section presentazione -->
<div id="main-content" class="main-content">
<!--
<?php
if (is_front_page() && twentyfourteen_has_featured_posts()) {
// Include the featured content template.
get_template_part('featured-content');
}
?>
-->
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php
// Start the Loop.
while (have_posts()) : the_post();
// Include the page content template.
get_template_part('content', 'page');
// If comments are open or we have at least one comment, load up the comment template.
if (comments_open() || get_comments_number()) {
comments_template();
}
endwhile;
?>
-->
</div><!-- #content -->
</div><!-- #primary -->
<!--<?php get_sidebar('content'); ?>-->
</div><!-- #main-content -->
<?php get_footer(); ?>
As you can see opening the previous link in the browser under the page title are shown also the author and the date.
What can I do to don't show these informations? Can I do it from the WordPress administration panel (I can't find it) or have I to do it by code into my page.php file?
EDIT 1: This is the code of my content.php file inside my theme:
<?php
/**
* The default template for displaying content
*
* Used for both single and index/archive/search.
*
* #package WordPress
* #subpackage AsperTheme
* #since AsperTheme 1.0
*/
?>
<!-- Create a div with a unique ID thanks to the_ID() and semantic classes with post_class()
the_ID(): Print the numeric ID of the current post
post_class(): Print out and add various post-related classes to the div tag
-->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header>
<h3 class="entry-title">
<a href="<?php the_permalink(); ?>"
title="<?php printf(__('Permalink to %s', 'your-theme'), the_title_attribute('echo=0')); ?>"
rel="bookmark"><?php the_title(); ?>
</a>
</h3>
<div class="entry-meta">
<span class="meta-prep meta-prep-author"><?php _e('By ', 'your-theme'); ?></span>
<span class="author vcard">
<a class="url fn n" href="<?php echo get_author_link(false, $authordata -> ID, $authordata -> user_nicename); ?>"
title="<?php printf(__('View all posts by %s', 'your-theme'), $authordata -> display_name); ?>"><?php the_author(); ?>
</a>
</span>
<span class="meta-sep"> | </span>
<span class="meta-prep meta-prep-entry-date"><?php _e('Published ', 'your-theme'); ?></span>
<span class="entry-date">
<abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time(get_option('date_format')); ?></abbr>
</span>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
</div> <!-- .entry-meta -->
</header>
<div class="entry-content">
<?php the_content(__('Continue reading <span class="meta-nav">»</span>', 'your-theme')); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>
</div> <!-- .entry-content -->
<div class="entry-utility">
<span class="cat-links">
<span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e('Posted in ', 'your-theme'); ?></span>
<?php echo get_the_category_list(', '); ?>
</span>
<span class="meta-sep"> | </span>
<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>
</div> <!-- #entry-utility -->
</article> <!-- #post-<?php the_ID(); ?> -->
Tnx
Andrea
Is there any content-page.php in your theme directory? Reply me
Add your project in Netbeans and open the mypage.php right click near the below code
get_template_part('content', 'page');
find the function from where post content loads
Either modify the content.php or using http request uri and custom post_types , wp-query and the_content , the_title modify your template.
use if condition to check page or post like below for tag.
if(!is_page( 16 )){
?><header>
//
</header><?php
}
Go to stili-custom.css file located in wp-content/themes/AsperTheme/assets/css/ and change this
.entry-meta {
font-size: 15px;
}
to this
.entry-meta {
display: none;
}
Andrea,
The following code should do the work. the get_template_part is where it does the trick. Or you can edit the function from the wp code, but wouldn't advice on that.
<?php if ( have_posts() ) : ?>
<ul class="articles clearfix">
<?php
/* Start the Loop */
while ( have_posts() ) : the_post();
printf('<li id="post-%2$s" class="article %1$s"> ',implode(' ', get_post_class()), get_the_ID() );
get_template_part( 'template/content', 'brief' );
echo '</li>';
wp_reset_postdata();
endwhile;
?>
</ul>
<?php else : ?>
<?php get_template_part( 'template/content', 'none' ); ?>
<?php endif; ?>
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"]'); ?>