0

I was wondering how I can achieve the following. I have created an overview page of all news articles. At the top of the page there is a big background image and a white block with content. What I want is, when an item is clicked, it should update the background image with the featured image of that specific post and textual content inside the block. So also an important thing is that it shouldn't open a new page, but only change the content on the current page. Is there a simple way to do this within WordPress custom theme development?

I think I should make use of the_content and featured image template tag, but how can I know which post is clicked and which content should be displayed?

0

If you don't care about the URL of this page, you can do it without Ajax, using $_GET parameters. Take a look:

// If we have $_GET parameter in URL, we save it in $page variable. Otherwise $page will be empty.
( isset( $_GET['page'] ) ) ? $page = ( int ) $_GET['page'] : $page = '';

get_header();

if ( $page != '' ) :
    // If $page variable is not empty, we get post(page) by ID
    $header_page = get_post( $page );
    // Then we can print anything we want, using this post object: title, content, custom fields, thumbnail, etc.
    echo $header_page->post_title; // Post title 
    echo apply_filters( 'the_content', $header_page->post_content ); // Post content
    echo get_post_meta( $page, 'custom_meta_key', 1 ); // Any custom field
    echo get_the_post_thumbnail ( $page, 'post-thumbnail' ); // Post thumbnail
endif; 

// Our links will look like so:
?><a href="<?php echo $_SERVER['REQUEST_URI']; ?>?page=123">Some title</a><?php
// Here 123 is ID of page, which content we want to show.

get_footer();

When you click on such a link, you will go to the same page, but with a new parameter in the URL. For example:

http://site.ru/page -> http://site.ru/page?page=123.

But if you want to have "clean" urls, then you'll need Ajax.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.