WordPress Set-Up for Different Home URL and Site URL

Configuring WordPress - A Guide to Setting Up Different Home URL and Site URL for Enhanced Flexibility

January 19, 2022 • Dykraf

Have WP Admin with your hosting Public IP Address and WP Website with your domain name. The separation of Headless WordPress CMS from front-end website.

Web Story

The reason you want to do this is that somehow you want to implement some Headless CMS with JavaScript framework in the front-end and still use WordPress for the backend. In addition to that, you might want to use plugins such as WPGraphQL: GraphQL API for WordPress a Headless WordPress CMS combine with Advanced Custom Fields for WordPress Developers. to make your WordPress website customizable.

This set-up will bring GraphQL API endpoint available in different host for your JavaScript framework to connect with the GraphQL client.

As for this writing, I am using a default WordPress 5.9-alpha-51804, a generatepress theme, and another plugin such as Yoast.

In WP Admin Settings > General Settings. Insert the Hosting Public IP Address in WordPress Address (URL) field. Insert your website domain in Site Address (URL). Or you can define site_url() and home_url() in wp-config.php if you prefer to write codes.

The use of different site_url() and home_url() functions in WordPress templates was for a developer that wants to have the WP Website have a different admin URL from the main WP website URL.

The problem is when you are using public IP host to set up the WP admin, the Ip Address will mix up with the home URL in your WP theme template causing broken links when accessing the template theme assets.

To have this all fixed, you have to disable some plugins in order to have the main WP Website up and running again.

Some of the broken links errors came from the default plugin in the templates. Open up functions.php in the theme directory that you use. Insert these codes for disable some of the plugins in functions.php below the add_action( 'after_setup_theme', 'generate_setup' ); function:

/**
 * Disable the plugins's
 */
function disable_default() {
    remove_action( 'wp_head', 'rest_output_link_wp_head' );
    remove_action( 'wp_head', 'wp_resource_hints', 2 );
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'wp_head', 'rsd_link' );
    remove_action( 'wp_head', 'wlwmanifest_link');
    remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    remove_action( 'admin_print_styles', 'print_emoji_styles' );
    remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
    remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
    remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
    remove_action( 'wp_head', 'wp_generator' );
    add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
    add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_default' );

/**
* Filter function used to remove the tinymce emoji plugin.
*
* @param array $plugins
* @return array Difference betwen the two arrays
*/
function disable_emojis_tinymce( $plugins ) {
    if ( is_array( $plugins ) ) {
        return array_diff( $plugins, array( 'wpemoji' ) );
    } else {
        return array();
    }
}

/**
* Remove emoji CDN hostname from DNS prefetching hints.
*
* @param array $urls URLs to print for resource hints.
* @param string $relation_type The relation type the URLs are printed for.
* @return array Difference between the two arrays.
*/
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
    if ( 'dns-prefetch' == $relation_type ) {
    /** This filter is documented in wp-includes/formatting.php */
    $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );

 $urls = array_diff( $urls, array( $emoji_svg_url ) );
    }

 return $urls;
}

function my_deregister_scripts(){
  wp_deregister_script( 'wp-embed' );
}
add_action( 'wp_footer', 'my_deregister_scripts' );

// Remove Gutenberg Block Library CSS from loading on the frontend
function smartwp_remove_wp_block_library_css(){
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css' );

Wp rest url also need to be modified in functions.php inside add_action( 'after_setup_theme', 'generate_setup' );. This should be fixing the errors on the WP Admin area in the Add New Post page in the select categories section:

  // Adjust rest url if different from home url
  add_filter('rest_url', function ($url) {
    $url = str_replace(home_url(), site_url(), $url);

    return $url;
  });

Hope these will help you with your WordPress projects.