Question 2860 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPresss Twenty Twenty-One how to make clickable articles?

Hi !

I’m using Wordpres’s Twenty Twenty-One Theme which I modified.
The fact is that I want articles to be fully clickable, not just the title and the "See the rest…" button.

I know I have to edit content-single.php because I defined my homepage to be the latest articles :

<a href="<?php the_permalink() ?>">
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <header class="entry-header alignwide">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
        <?php twenty_twenty_one_post_thumbnail(); ?>
    </header><!-- .entry-header -->

    <div class="entry-content">
        <?php
        the_content();

        wp_link_pages(
            array(
                'before'   => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
                'after'    => '</nav>',
                /* translators: %: Page number. */
                'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ),
            )
        );
        ?>
    </div><!-- .entry-content -->

    <footer class="entry-footer default-max-width">
        <?php twenty_twenty_one_entry_meta_footer(); ?>
    </footer><!-- .entry-footer -->

    <?php if ( ! is_singular( 'attachment' ) ) : ?>
        <?php get_template_part( 'template-parts/post/author-bio' ); ?>
    <?php endif; ?>

    </article>
</a>

But the <a href="<?php the_permalink() ?>"> does not work…

How can I do that ? I’n not used to PHP anymore ^^’

Thank you in advance !

EDIT :

So the function was applying to the post itself, but I want it to be applied to the posts in the hompeage post list.

So I did this :

function clickable_article( $content ) {
if ( is_front_page() ) {
    ?>        
        <script>
        jQuery( document ).ready( function( $ ) {
        // add a cursor 
            $( '.post' ).css("cursor", "pointer");
        // on content click go to article url
            $( '.post' ).on( 'click', function( e ) {
                var url = window.location.href; 
                window.location = url;
            } );
        } );
        </script>
    <?php
}
return $content;
}
add_filter( 'the_content', 'clickable_article' );

Now the articles are clickables, but it just fully crashes my web navigator… It seems to be the window.location = url;

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Finally made it work !

    So to make the whole articles clickable in your Wordpress home page you need to :

    1. Set the homepage to display the last articles
    2. Ensure you have the "read more" link
    3. Paste this code in your function.php :
    function clickable_article( $content ) {
    if ( is_front_page() ) {
        ?>        
            <script>
            jQuery( document ).ready( function( $ ) {
                $( '.post' ).unbind().click(function() {
                    var url = $(this).find("a").attr("href"); 
                    console.log(url);
                    window.location = url;
                } );
            })
            </script>
        <?php
    }
    return $content;
}
add_filter( 'the_content', 'clickable_article' );

    You need to .unbind() the event, because the posts have several links (image, title, read more...) so the window.location does not get flooded with several urls and crashes your web browser.


  2. 0

    Try with something like this, in your child-theme functions.php:

    function clickable_article( $content ) {
    if ( is_single() ) {
        
        ?>
                      
<script>

jQuery( document ).ready( function( $ ) {
// add a cursor 
    $( '.entry-content' ).css("cursor", "pointer");
// on content click go to article url
    $( '.entry-content' ).on( 'click', function( e ) {
        var url = window.location.href; 
        window.location = url;
    } );
} );
</script>
    
    <?php
    
    }
    
    return $content;
    
}
add_filter( 'the_content', 'clickable_article' );
    Login or Signup to reply.
  3. 0

    Try this:

    function clickable_article( $content ) {
    if ( is_front_page() ) {
        ?>
            <script>
            jQuery( document ).ready( function( $ ) {
            // add a cursor 
            $("article").each(function() {
          var copyUrl = $(this).find(".entry-title").attr("href");
          
          $(this).click(function() {
            window.location = copyUrl;
          });
        });
      });
            </script>
        <?php
    }
    return $content;
    }
    add_filter( 'the_content', 'clickable_article' );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search