Preview link in wordpress

[Axel Verglas]

Hello,
There is no way to change the preview link directly in WordPress to access the preview for article ?

[Axel Verglas]

Hello @gregrickaby do you have any solution ?

[Greg Rickaby]

@axelverglas Yes, there is a way!

I copied the method from my Next.js WordPress Plugin, and turned it into a function you could drop into functions.php. If you already use the Next.js WordPress Plugin, you'll need to edit that to point at the preview route of your front-end.

/**
 * Customize the preview button in the WordPress admin.
 *
 * This function modifies the preview link for a post to point to a headless client setup.
 *
 * @param string  $link Original WordPress preview link.
 * @param WP_Post $post Current post object.
 * @return string Modified headless preview link.
 */
function set_headless_preview_link( string $link, WP_Post $post ): string {

	// Set the front-end preview route.
	$frontend_preview_route  = 'http://localhost:3000/preview';

	// Update the preview link in WordPress.
	return add_query_arg(
		esc_url_raw( "{$frontend_preview_route}/{$post->ID}" )
	);
}
add_filter( 'preview_post_link', 'set_headless_preview_link', 10, 2 );
add_filter( 'rest_prepare_page', 'set_headless_rest_preview_link', 10, 2 );
add_filter( 'rest_prepare_post', 'set_headless_rest_preview_link' , 10, 2 );

Good luck! 🍻

[Axel Verglas]

Hello,

I installed the plugin and added this in the functions.php of my theme but neither works I even have a blank page when I add this in the function.php in the page to write or modify an article

[Axel Verglas]

Hello @gregrickaby do you have any news for this ?

[Bjørn Nyborg]

@axelverglas Be aware you need to modify the code posted by @gregrickaby to make it work in your specific case.

• Adjust $frontend_preview_route to match your own frontend url
• The add_query_args needs to be modified to include your secret, (if you are going with the same preview approach as suggested in this repo)
• The function "set_headless_rest_preview_link" is not provided in this code.

The adjusted code in my case looks like this:

add_filter( 'preview_post_link', 'set_headless_preview_link', 10, 2 );
function set_headless_preview_link( string $link, WP_Post $post ): string {
	// Set the front-end preview route.
  $frontendUrl = HEADLESS_URL;
  $frontend_preview_route  = "$frontendUrl/preview";

	// Update the preview link in WordPress.
  return add_query_arg(
    [ 'secret' => HEADLESS_SECRET ],
    esc_url_raw( esc_url_raw( "{$frontend_preview_route}/{$post->ID}" ))
  );
}

function set_headless_rest_preview_link( WP_REST_Response $response, WP_Post $post ): WP_REST_Response {
  // Check if the post status is 'draft' and set the preview link accordingly.
  if ( 'draft' === $post->post_status ) {
    $response->data['link'] = get_preview_post_link( $post );
    return $response;
  }

  // For published posts, modify the permalink to point to the frontend.
  if ( 'publish' === $post->post_status ) {

    // Get the post permalink.
    $permalink = get_permalink( $post );

    // Check if the permalink contains the site URL.
    if ( false !== stristr( $permalink, get_site_url() ) ) {

      $frontendUrl = HEADLESS_URL;

      // Replace the site URL with the frontend URL.
      $response->data['link'] = str_ireplace(
        get_site_url(),
        $frontendUrl,
        $permalink
      );
    }
  }

  return $response;
}

[Axel Verglas]

Hello @Bjornnyborg, I tried like you and like @gregrickaby but it still doesn't work I adapted I replaced the variables with mine I have the plugin installed and the theme I put what you said in the functions.php but nothing works...