theme development - How to link post image to post link?

admin管理员组

文章数量:1134067

For my client site, I am planning to enable link post image to post a link on blog list page, the site uses custom WordPress theme developed by the previous developer.

For blog post list page he created as content.php and for the single post he created content-page.php

Even if I add the featured image I can't able to see that featured image, only the image inside of the post is showing.

How to achieve this?

Here is the code for content.php

<?php
/**
 * Template part for displaying posts
 *
 * @link 
 *
 * @package Blog
 */

?>

<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 bfablog_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', 'bfablog' ), 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:', 'bfablog'
),

                           'after'  => '</div>',
            ) );
        ?>

    </div><!-- .entry-content -->

    <footer class="entry-footer">
        <?php bfablog_entry_footer(); ?>
    </footer><!-- .entry-footer -->
</article><!-- #post-## -->
<hr>

<script type="text/javascript">
  var addthis_config = {
    ui_language: "{{ site.lang }}"
  };
  var addthis_share =
  {
     // ... members go here
  }
</script>

<!-- Go to www.addthis/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis/js/300/addthis_widget.js#pubid=ra-586c401922d76d24"></script>

Here is the code for content-page.php

<?php
/**
 * Template part for displaying page content in page.php
 *
 * @link 
 *
 * @package BfA_Blog
 */

?>

<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>'
                );
            ?>
        </footer><!-- .entry-footer -->
    <?php endif; ?>
</article><!-- #post-## -->

For my client site, I am planning to enable link post image to post a link on blog list page, the site uses custom WordPress theme developed by the previous developer.

For blog post list page he created as content.php and for the single post he created content-page.php

Even if I add the featured image I can't able to see that featured image, only the image inside of the post is showing.

How to achieve this?

Here is the code for content.php

<?php
/**
 * Template part for displaying posts
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package Blog
 */

?>

<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 bfablog_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', 'bfablog' ), 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:', 'bfablog'
),

                           'after'  => '</div>',
            ) );
        ?>

    </div><!-- .entry-content -->

    <footer class="entry-footer">
        <?php bfablog_entry_footer(); ?>
    </footer><!-- .entry-footer -->
</article><!-- #post-## -->
<hr>

<script type="text/javascript">
  var addthis_config = {
    ui_language: "{{ site.lang }}"
  };
  var addthis_share =
  {
     // ... members go here
  }
</script>

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-586c401922d76d24"></script>

Here is the code for content-page.php

<?php
/**
 * Template part for displaying page content in page.php
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package BfA_Blog
 */

?>

<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>'
                );
            ?>
        </footer><!-- .entry-footer -->
    <?php endif; ?>
</article><!-- #post-## -->

• theme-development
• themes

Share Improve this question edited Sep 7, 2017 at 10:58 bravokeyl 3,37766 gold badges2727 silver badges3333 bronze badges asked Sep 7, 2017 at 9:41 Tamil BeyondTamil Beyond 333 bronze badges 1

• Please refrain from adding bitly links, I removed it from the post as the question can be explained even without it. If you think it's required please add the site URL not the bitly one – bravokeyl Commented Sep 7, 2017 at 11:00

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Just to be clear, you want to show the featured image and link it to the single post page? The content.php is the loop being used to display the content. So this is the place where you want to place the featured image.

To show the featured image in the archive or posts list, edit content.php. In the header tag of the article, Do this.

   if ( is_single() ) :
        the_post_thumbnail('large'); // If you want to show the featured image in the single post page
        the_title( '<h1 class="entry-title">', '</h1>' );
    else :
        the_post_thumbnail('large'); // If you want to show the image in the archive. You can change the location if before or after title
        the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '"  rel="bookmark" >', '</a></h2>' );
    endif;

Steps to edit the content.php

First, this answer is based on the notion that your client is using a featured image. If not, then I can no longer understand what you guys are trying to achieve :(

1. Login to Wordpress
2. Appearance -> Editor
3. Find and click content.php in the right side of the page
4. Backup the current codes in there and paste the code in the pastebin below.

https://pastebin.com/cEAFHntg

Hope this works for you, if not it is best to find a developer.

Your previous developer haven't called featured image in listing page and not even in single page. Here is the code to add featured image and linked to single post page.

<div class="featured-image">
  <a href="<?phpthe_permalink(); ?>">
  <img src="<?php the_post_thumbnail_url( $size ); ?>" alt="" />
  </a>
</div>

You can place this code above or below the title where ever you want and you can style the way you want. Cheers!

本文标签： theme developmentHow to link post image to post link