Search code examples
phpwordpressamp-html

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:

  • front page post content
  • front page title
  • front page metadata

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:

  • Page Title = not found
  • Page post content = empty/null

Solution

  • 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; ?>