Mark F
Mark F

Reputation: 83

WordPress self-developed AMP - edit Query if URL is homepage.com/amp to get front-page post

I'm not sure what i'm doing wrong, been researching for the past few days but hopeless.

WordPress Settings: Static Page: Home

GOAL: to replace the query so it takes ALL front page data including the following:

and to display the content, title, metadata in a natural way by calling in theme page template

// Takes front page title
<?php wp_title(); ?>

// Takes front page config
<?php wp_head(); ?> 

// takes front page post and display content
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php echo the_content(); ?>
        <?php endwhile; endif; ?>

Target URL: homepage.com/amp (not existing page) but defined as shown below

// defines AMP variable
define( 'AMP_QUERY_VAR', apply_filters( 'amp_query_var', 'amp' ) );

// enable URL endpoint rewrite for /amp
add_rewrite_endpoint( AMP_QUERY_VAR, EP_ALL );

MAIN PROBLEM in the Current Code Below

function front_page_post_AMP( $query  ) {

    // Get's the Current Browser URL
    global $wp;
    $current_url = home_url(add_query_arg(array(),$wp->request));

    // Homepage AMP URL
    $front_page_amp_url = get_site_url() . "/amp";

    // check if the current browser URL is homepage.com/amp
    if ( strcasecmp( $current_url, $front_page_amp_url ) == 0 && $query->is_main_query() ) 
    {

        // gets front page id
        $front_page_id = get_option( 'page_on_front' );

        // replace query id
        $query->set( 'page_id', $front_page_id );

        return $query;
    }
}

add_action( 'pre_get_posts', 'front_page_post_AMP' ); 

Current Results:

Upvotes: 2

Views: 832

Answers (2)

Mark F
Mark F

Reputation: 83

spent days studying how WP_Query and pre_get_posts works and finally got the answer

/*
 * if user is accessing the not existing page homepage.com/amp/
 * set the query to get the frontpage post
 */
function front_page_post_AMP( $query ) {

    // Only noop the main query
    if ( ! $query->is_main_query() ) {
        return;
    }

    /*
    * check if endpoint is AMP
    * check if the array count is 1 (means no parameters, and most likely will result in 404)
    */
    if ( is_amp_endpoint() && 
         count( $query->query ) == 1 && 
         ! isset( $query->query['page'] ) ) 
    {
        // Get's the Current Browser URL
        global $wp;
        $current_url = home_url(add_query_arg(array(),$wp->request));

        // Homepage AMP URL
        $front_page_amp_url = get_site_url() . "/amp";

        /* 
         * If current URL is homepage.com/amp
         * set the empty query to get the front page post
         */
        if ( strcasecmp( $current_url, $front_page_amp_url ) == 0 ) {

            $front_page_id = get_option( 'page_on_front' );
            $query->set( 'page_id', $front_page_id );
            $query->set( 'post_type', "page" );
        }

    }

    return;
}
add_action( 'pre_get_posts', 'front_page_post_AMP' );

With this solution, you can use the natural way of calling the title and content on your page template as shown below

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <?php echo the_content(); ?>
<?php endwhile; endif; ?>

Upvotes: 1

rheeantz
rheeantz

Reputation: 1020

Off course it will return 404 not found because amp page or amp post is not exist.

My idea is there is an alternative way it can return to a valid url by add custom endpoint for your website

reference : https://codex.wordpress.org/Rewrite_API/add_rewrite_endpoint

add this following code to your theme function

add_rewrite_endpoint( 'amp', EP_ALL );

then save permalink , then try acces any url of your website followed by /amp example : homepage.com/amp , homepage.com/single-post/amp

Hope it helps

Upvotes: 1

Related Questions