Anular with Headless WordPress

Creating an Angular App with a Headless WordPress CMS Part 3: Connecting the WordPress Site

Once we have a local instance of our WordPress site running we can now connect it to our Express server to send data to our Angular application. The first thing we need to do is check that our WordPress API is functioning. Making sure XAMPP is running Apache and MySQL we need to visit the URL http://localhost/rl/wp-json/wp/v2/. If this provides a response like below we know that the API is working.

Now that we know the WordPress API is working we can update our URL in our .env.development file

    WP_API_URL=https://localhost/rl/wp-json/wp/v2

Creating The Application Password

A lot of the content we are going to need from WordPress is going to require us to pass authentication details to WordPress when we call the API. To get our authentication information we are going to need to create an Application Password. To do this we are going to need to open up our wp-config file in our WordPress installation and add the following code.

    define( 'WP_ENVIRONMENT_TYPE', 'local' );

This is because WordPress does not allow application passwords through HTTP by default so we have to enable it. Next we can log into our WordPress admin.

link: http://localhost/rl/wp-admin/

Once logged in we can go to the users area, select our user, and to go the area where is says application password.

enter in “expressServer” into the application password name area and click to add a new application password. This will give you a new password that you can click to copy and we are going to paste it into our .env.development file.

    # Development Configuration
WP_API_URL=http://localhost/rl/wp-json/wp/v2
PORT=5000
CORS_ORIGIN=http://localhost:4200

# WordPress Authentication
WP_USER=morganwebdevelopment@gmail.com
WP_PASSWORD={your-app-password} # Replace with your actual app password

# Debugging
LOG_LEVEL=debug

We should now be able to call the API and get authenticated data.

Getting The Homepage

Now that we can access the API, we can get the homepage to display on our Angular app. It’s a logical first place to start.

Creating The Service

The first thing we need to do is create the service. Inside our wordpressService.js file past the following code:

    const axios = require("axios");
const { WP_API_URL, WP_USER, WP_PASSWORD } = require("../config/dotenvConfig");

// Create a reusable Axios instance
const auth = Buffer.from(`${WP_USER}:${WP_PASSWORD}`).toString("base64");
const axiosInstance = axios.create({
  baseURL: WP_API_URL,
  headers: {
    Authorization: `Basic ${auth}`,
    "Content-Type": "application/json"
  },
  timeout: 5000, // Set a timeout to avoid hanging requests
});

// Centralized error handling function
const handleApiError = (error, message) => {
  if (error.response) {
    console.error(
      `${message}: ${error.response.status} - ${error.response.data?.message || error.message}`
    );
  } else if (error.request) {
    console.error(`${message}: No response received from API`);
  } else {
    console.error(`${message}: ${error.message}`);
  }
  throw new Error(message);
};

// ==============================
//  Services for WordPress API
// ==============================

// Get the Homepage ID
const getHomepageID = async () => {
  try {
    const response = await axiosInstance.get("/settings");
    if (!response.data?.page_on_front) {
      throw new Error("Homepage ID not found in settings.");
    }
    return response.data.page_on_front;
  } catch (error) {
    handleApiError(error, "Failed to fetch homepage ID");
  }
};

// Get Homepage Data
const getHomepageData = async () => {
  try {
    const homepageID = await getHomepageID();
    const response = await axiosInstance.get(`/pages/${homepageID}`);

    if (!response.data) {
      throw new Error("Invalid response: Missing homepage data.");
    }

    return response.data;
  } catch (error) {
    handleApiError(error, "Failed to fetch homepage data");
  }
};



// Exporting all services
module.exports = {
  getHomepageData,
};

What this code does is import our authentication variables, creates a reusable Axios instance, and centralizes our error handling to keep things consistent for all the WordPress services we will create. Using those features we then create a function to get the homepage ID, and using that ID get the data from the homepage.

Creating the Controller

To access the service we will then create our controller. In our wordpressController.js file past the following:

    const { getHomepageData } = require("../services/wordpressService");

const getHomepage = async (req, res) => {
  try {
    const homepage = await getHomepageData();
    res.json(homepage);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};

module.exports = { getHomepage };

Creating the Route

Lastly, to get the data and return it to our frontend we need to build our route. In our wordpressRoutes.js file past the following:

    const express = require("express");
const { getHomepage } = require("../controllers/wordpressController");

const router = express.Router();

router.get("/homepage", getHomepage);

module.exports = router;

Add the Route to the Server

To make the route accessible we need to add the following code to our server.js file.

    app.wordpressRouter = require("./routes/wordpressRoutes");

// Routes
app.use("/wordpress", wordpressRoutes);

Testing it Out

Now we can test out our new complete API. Start up the dev server, and install and open up the Postman tool. Inside Postman create a new GET call for our API http://localhost:5000/wordpress/homepage

Send the request and your response should look like the following:

    
    "id": 18,
    "date": "2024-12-18T15:10:07",
    "date_gmt": "2024-12-18T15:10:07",
    "guid": {
        "rendered": "https://retail-leaders.com/?page_id=18"
    },
    "modified": "2025-02-07T18:20:05",
    "modified_gmt": "2025-02-07T18:20:05",
    "slug": "home",
    "status": "publish",
    "type": "page",
    "link": "http://localhost/rl/",
    "title": {
        "rendered": "Home"
    },
    "content": {
        "rendered": "<!--themify_builder_content-->\r\n<div id=\"themify_builder_content-18\" data-postid=\"18\" class=\"themify_builder_content themify_builder_content-18 themify_builder tf_clear\">\r\n                    <div  data-css_id=\"b42y483\" data-lazy=\"1\" class=\"module_row themify_builder_row fullwidth tb_b42y483 tb_first tf_w hide-mobile\">\r\n                        <div class=\"row_inner col_align_top tb_col_count_2 tf_box tf_rel\">\r\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col4-2 tb_5f6h483 first\">\r\n                    <!-- module text -->\r\n<div  class=\"module module-text tb_0d2x962   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <h1>Retail Leaders</h1>    </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div  class=\"module module-text tb_i45l956   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <p>Connecting the Top Voices in Retail</p>    </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div  class=\"module module-text tb_9gf5792   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <p>Powered by RETHINK Retail, Retail Leaders is the premier platform for connecting top experts, thought leaders, and influencers with high-impact opportunities to share their knowledge, shape industry conversations, and elevate their visibility worldwide.</p>    </div>\r\n</div>\r\n<!-- /module text --><!-- module buttons -->\r\n<div  class=\"module module-buttons tb_42n5886 buttons-horizontal solid   rounded\" data-lazy=\"1\">\r\n        <div class=\"module-buttons-item tf_in_flx\">\r\n                        <a href=\"/become-a-member/\" class=\"ui builder_button tf_in_flx tb_default_color\" >\r\n                                                Get Started Now!                                        </a>\r\n                </div>\r\n            </div>\r\n<!-- /module buttons -->\r\n        </div>\r\n                    <div  data-lazy=\"1\" class=\"module_column tb-column col4-2 tb_wjpd954 last\">\r\n        <span class=\"tb_row_frame_wrap tf_overflow tf_abs\" data-lazy=\"1\"><span class=\"tb_row_frame tb_row_frame_left  tf_abs tf_hide tf_overflow tf_h\"></span></span>                    </div>\r\n                        </div>\r\n        </div>\r\n                        <div  data-lazy=\"1\" class=\"module_row themify_builder_row tb_uaj4535 tf_w hide-desktop hide-tablet hide-tablet_landscape\">\r\n                        <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\r\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col-full tb_z8nn535 first\">\r\n                    <!-- module text -->\r\n<div  class=\"module module-text tb_ahb4535   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <h1>Retail Leaders</h1>    </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div  class=\"module module-text tb_v4lu535   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <p>Connecting the top voices in retail.</p>    </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div  class=\"module module-text tb_2ay6535   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <p>Retail Leaders is the premier platform that connects top retail experts, thought leaders, and influencers with exclusive opportunities to share their insights through speaking engagements, media appearances, and industry collaborations. Powered by RETHINK Retail, we make it easy for experts and content creators to discover, connect, and engage—all in one seamless marketplace.</p>    </div>\r\n</div>\r\n<!-- /module text --><!-- module buttons -->\r\n<div  class=\"module module-buttons tb_y1rm535 buttons-horizontal solid   rounded\" data-lazy=\"1\">\r\n        <div class=\"module-buttons-item tf_in_flx\">\r\n                        <a href=\"/become-a-member/\" class=\"ui builder_button tf_in_flx tb_default_color\" >\r\n                                                Become a Member Today                                        </a>\r\n                </div>\r\n            </div>\r\n<!-- /module buttons -->\r\n        </div>\r\n                        </div>\r\n        </div>\r\n                        <div  data-lazy=\"1\" class=\"module_row themify_builder_row tb_hf4k775 tf_w\">\r\n                        <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\r\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col-full tb_mm71775 first\">\r\n                    <!-- module text -->\r\n<div  class=\"module module-text tb_qi50892   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <h2>What is Retail Leaders?</h2>    </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div  class=\"module module-text tb_sjzz880   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <p>Retail Leaders helps the industry’s most influential event producers and content creators identify and confirm credentialed guests, speakers, and sources faster by providing them with direct access to RETHINK Retail’s exclusive communities of Global Retail Leaders (GRLs) and Top Retail Experts (TREs).</p>    </div>\r\n</div>\r\n<!-- /module text -->        <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w col_align_top tb_col_count_4 tb_2g2c292 hide-mobile\">\r\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_5mfr292 first\">\r\n                    <!-- module counter -->\r\n<div  class=\"module module-counter tb_unfc783 size-large  tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t  data-to=\"220\"\r\n\t\t\t\t  data-suffix=\"+\"\r\n\t\t\t\t  data-prefix=\"\"\r\n\t\t\t\t  data-decimals=\"0\"\r\n\t\t\t\t  data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n    <div class=\"counter-text\">Leaders & Experts</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n        </div>\r\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_napp292\">\r\n                    <!-- module counter -->\r\n<div  class=\"module module-counter tb_q3b6202 size-large  tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t  data-to=\"35\"\r\n\t\t\t\t  data-suffix=\"+\"\r\n\t\t\t\t  data-prefix=\"\"\r\n\t\t\t\t  data-decimals=\"0\"\r\n\t\t\t\t  data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n    <div class=\"counter-text\">Industry Events</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n        </div>\r\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_rzsb292\">\r\n                    <!-- module counter -->\r\n<div  class=\"module module-counter tb_x6uh736 size-large  tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t  data-to=\"42\"\r\n\t\t\t\t  data-suffix=\"+\"\r\n\t\t\t\t  data-prefix=\"\"\r\n\t\t\t\t  data-decimals=\"0\"\r\n\t\t\t\t  data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n    <div class=\"counter-text\">Podcasts</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n        </div>\r\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_kpcb292 last\">\r\n                    <!-- module counter -->\r\n<div  class=\"module module-counter tb_4chj724 size-large  tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t  data-to=\"25\"\r\n\t\t\t\t  data-suffix=\"+\"\r\n\t\t\t\t  data-prefix=\"\"\r\n\t\t\t\t  data-decimals=\"0\"\r\n\t\t\t\t  data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n    <div class=\"counter-text\">Content Creators</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n        </div>\r\n                    </div>\r\n                <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w col_align_top tb_col_count_4 tb_tj5x400 hide-desktop hide-tablet hide-tablet_landscape\">\r\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_oa2y400 first\">\r\n                    <!-- module counter -->\r\n<div  class=\"module module-counter tb_hbpa400 size-small  tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t  data-to=\"220\"\r\n\t\t\t\t  data-suffix=\"+\"\r\n\t\t\t\t  data-prefix=\"\"\r\n\t\t\t\t  data-decimals=\"0\"\r\n\t\t\t\t  data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n    <div class=\"counter-text\">Leaders & Experts</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n        </div>\r\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_l4bw400\">\r\n                    <!-- module counter -->\r\n<div  class=\"module module-counter tb_m1jt400 size-small  tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t  data-to=\"35\"\r\n\t\t\t\t  data-suffix=\"+\"\r\n\t\t\t\t  data-prefix=\"\"\r\n\t\t\t\t  data-decimals=\"0\"\r\n\t\t\t\t  data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n    <div class=\"counter-text\">Industry Events</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n        </div>\r\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_telg400\">\r\n                    <!-- module counter -->\r\n<div  class=\"module module-counter tb_5zdk400 size-small  tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t  data-to=\"42\"\r\n\t\t\t\t  data-suffix=\"+\"\r\n\t\t\t\t  data-prefix=\"\"\r\n\t\t\t\t  data-decimals=\"0\"\r\n\t\t\t\t  data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n    <div class=\"counter-text\">Podcasts</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n        </div>\r\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-1 tb_eyf9400 last\">\r\n                    <!-- module counter -->\r\n<div  class=\"module module-counter tb_kbmq400 size-small  tf_textc \" data-lazy=\"1\">\r\n\t\t\r\n\t\t<div class=\"counter-chart tf_rel\">\r\n\t\t\t<svg class=\"tf_abs tf_w tf_h\">\r\n\t\t\t\t\t\t\t<circle fill=\"#ffa200\" class=\"module-counter-background\"></circle>\r\n\t\t\t\t\t\t<circle class=\"tb_counter_fill\" stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\r\n\t\t\t<circle class=\"tb_counter_stroke\" stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\r\n\t\t\t</svg>\r\n\t\t\t\t<div class=\"number tf_abs_c\">\r\n\t\t\t<span class=\"bc-timer\"\r\n\t\t\t\t  data-to=\"25\"\r\n\t\t\t\t  data-suffix=\"+\"\r\n\t\t\t\t  data-prefix=\"\"\r\n\t\t\t\t  data-decimals=\"0\"\r\n\t\t\t\t  data-grouping=\"\"></span>\r\n\t\t</div>\r\n\r\n\t\t\t\t</div><!-- .chart -->\r\n\t\r\n    <div class=\"counter-text\">Content Creators</div>\r\n\r\n\t</div>\r\n<!-- /module counter -->\r\n        </div>\r\n                    </div>\r\n                </div>\r\n                        </div>\r\n        </div>\r\n                        <div  data-lazy=\"1\" class=\"module_row themify_builder_row tb_5pyr784 tf_w\">\r\n                        <div class=\"row_inner col_align_top tb_col_count_2 tf_box tf_rel\">\r\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col4-2 tb_2uib784 first\">\r\n                    <!-- module text -->\r\n<div  class=\"module module-text tb_ytbc223   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <h3><b>Connect With Experts</b></h3>    </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div  class=\"module module-text tb_rx0v40   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <p>Discover and connect with top retail experts, speakers, and thought leaders to elevate your events, podcasts, and content with expert-backed insights.</p>    </div>\r\n</div>\r\n<!-- /module text -->        </div>\r\n                    <div  data-lazy=\"1\" class=\"module_column tb-column col4-2 tb_x3ir748 last\">\r\n                    <!-- module text -->\r\n<div  class=\"module module-text tb_28km748   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <h3 class=\"elementor-icon-box-title\"><b>Discover Opportunities</b></h3>    </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div  class=\"module module-text tb_k4wd748   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <p>Showcase your expertise and gain access to exclusive speaking, media, and thought leadership opportunities by hosting your free expert profile.</p>    </div>\r\n</div>\r\n<!-- /module text -->        </div>\r\n                        </div>\r\n        </div>\r\n                        <div  data-lazy=\"1\" class=\"module_row themify_builder_row tb_zey6690 tf_w\">\r\n                        <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\r\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col-full tb_tzr1690 first\">\r\n        <span class=\"builder_row_cover tf_abs\"></span>            <!-- module text -->\r\n<div  class=\"module module-text tb_ow99244   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <h2>Getting Started Is Easy!</h2>    </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div  class=\"module module-text tb_q9nk980   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <p><strong>No barriers, no fees—just meaningful connections.</strong></p>    </div>\r\n</div>\r\n<!-- /module text --><!-- module text -->\r\n<div  class=\"module module-text tb_st8e977   \" data-lazy=\"1\">\r\n        <div  class=\"tb_text_wrap\">\r\n        <p>Whether you’re an industry expert looking for thought leadership opportunities or a content creator searching for the perfect speaker, guest, or contributor—<strong>Retail Leaders makes it simple to discover and connect.</strong></p>    </div>\r\n</div>\r\n<!-- /module text --><!-- module buttons -->\r\n<div  class=\"module module-buttons tb_v45a197 buttons-horizontal solid   rounded\" data-lazy=\"1\">\r\n        <div class=\"module-buttons-item tf_in_flx\">\r\n                        <a href=\"#\" class=\"ui builder_button tf_in_flx tb_default_color\" >\r\n                                                Become a Member                                        </a>\r\n                </div>\r\n            </div>\r\n<!-- /module buttons -->\r\n        </div>\r\n                        </div>\r\n        </div>\r\n        </div>\r\n<!--/themify_builder_content-->",
        "protected": false
    },
    "excerpt": {
        "rendered": "<p>Retail Leaders</p>\n",
        "protected": false
    },
    "author": 1,
    "featured_media": 0,
    "parent": 0,
    "menu_order": 0,
    "comment_status": "closed",
    "ping_status": "closed",
    "template": "",
    "meta": {
        "_acf_changed": false,
        "footnotes": ""
    },
    "class_list": [
        "post-18",
        "page",
        "type-page",
        "status-publish",
        "hentry",
        "has-post-title",
        "has-post-date",
        "has-post-category",
        "has-post-tag",
        "has-post-comment",
        "has-post-author",
        ""
    ],
    "acf": [],
    "aioseo_notices": [],
    "builder_content": "<h1>Retail Leaders</h1>\n<p>Connecting the Top Voices in Retail</p>\n<p>Powered by RETHINK Retail, Retail Leaders is the premier platform for connecting top experts, thought leaders, and influencers with high-impact opportunities to share their knowledge, shape industry conversations, and elevate their visibility worldwide.</p>\n<a href=\"/become-a-member/\" >\n Get Started Now! </a>\n<h1>Retail Leaders</h1>\n<p>Connecting the top voices in retail.</p>\n<p>Retail Leaders is the premier platform that connects top retail experts, thought leaders, and influencers with exclusive opportunities to share their insights through speaking engagements, media appearances, and industry collaborations. Powered by RETHINK Retail, we make it easy for experts and content creators to discover, connect, and engage—all in one seamless marketplace.</p>\n<a href=\"/become-a-member/\" >\n Become a Member Today </a>\n<h2>What is Retail Leaders?</h2>\n<p>Retail Leaders helps the industry’s most influential event producers and content creators identify and confirm credentialed guests, speakers, and sources faster by providing them with direct access to RETHINK Retail’s exclusive communities of Global Retail Leaders (GRLs) and Top Retail Experts (TREs).</p>\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Leaders & Experts\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Industry Events\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Podcasts\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Content Creators\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Leaders & Experts\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Industry Events\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Podcasts\n<svg>\n <circle fill=\"#ffa200\"></circle>\n <circle stroke=\"rgba(0,0,0,.1)\" stroke-width=\"0\"/>\n <circle stroke-width=\"0\" stroke=\"#ccc\" data-progress=\"0\" stroke-dasharray=\"0,10000\"/>\n </svg>\n \n \n \n \n \n Content Creators\n<h3><b>Connect With Experts</b></h3>\n<p>Discover and connect with top retail experts, speakers, and thought leaders to elevate your events, podcasts, and content with expert-backed insights.</p>\n<h3><b>Discover Opportunities</b></h3>\n<p>Showcase your expertise and gain access to exclusive speaking, media, and thought leadership opportunities by hosting your free expert profile.</p>\n<h2>See some of our featured experts</h2>\n<h2>Getting Started Is Easy!</h2>\n<p><strong>No barriers, no fees—just meaningful connections.</strong></p>\n<p>Whether you're an industry expert looking for thought leadership opportunities or a content creator searching for the perfect speaker, guest, or contributor—<strong>Retail Leaders makes it simple to discover and connect.</strong></p>\n<a href=\"#\" >\n Become a Member </a>\n<h2>See some of our featured Events</h2>",
    "_links": {
        "self": [
            {
                "href": "http://localhost/rl/wp-json/wp/v2/pages/18",
                "targetHints": {
                    "allow": [
                        "GET",
                        "POST",
                        "PUT",
                        "PATCH",
                        "DELETE"
                    ]
                }
            }
        ],
        "collection": [
            {
                "href": "http://localhost/rl/wp-json/wp/v2/pages"
            }
        ],
        "about": [
            {
                "href": "http://localhost/rl/wp-json/wp/v2/types/page"
            }
        ],
        "author": [
            {
                "embeddable": true,
                "href": "http://localhost/rl/wp-json/wp/v2/users/1"
            }
        ],
        "replies": [
            {
                "embeddable": true,
                "href": "http://localhost/rl/wp-json/wp/v2/comments?post=18"
            }
        ],
        "version-history": [
            {
                "count": 39,
                "href": "http://localhost/rl/wp-json/wp/v2/pages/18/revisions"
            }
        ],
        "predecessor-version": [
            {
                "id": 652,
                "href": "http://localhost/rl/wp-json/wp/v2/pages/18/revisions/652"
            }
        ],
        "wp:attachment": [
            {
                "href": "http://localhost/rl/wp-json/wp/v2/media?parent=18"
            }
        ],
        "curies": [
            {
                "name": "wp",
                "href": "https://api.w.org/{rel}",
                "templated": true
            }
        ]
    }

We have now successfully connected our WordPress site and can retrieve our homepage to send to our Angular application

Creating an Angular App with a Headless WordPress CMS Part 2: Creating an Express Middleware Server

To connect our Angular app to our WordPress site we are going to go through an Express server that is going to function as our middleware. We want to do this because we want to show different content to logged in users and users with different roles and it is going to be easier to manage that outside of the frontend. Additionally we are going to be creating content on the Angular app that will be pushed to the WordPress database and we will want to make sure that that data is secure before allowing it to go to the database. Let’s start setting up the server.

First thing is going to be to create a new folder in our repository called “express-middleware”. From here we can go into that folder and install our express server.

    npm install express axios cors dotenv

Next we are going to create the structure of our express server. It should look like the following.

    wp-express-middleware/
│── node_modules/
│── src/
│   ├── routes/
│   │   ├── wordpressRoutes.js
│   ├── controllers/
│   │   ├── wordpressController.js
│   ├── services/
│   │   ├── wordpressService.js
│   ├── config/
│   │   ├── dotenvConfig.js
│   ├── server.js
│── .env.development
│── .env.production
│── package.json
│── README.md

From here we are going to open our .env.development file and add our development variables. Don’t worry about their current values. We are just setting it up for what we will need later.

    # Development Configuration
WP_API_URL=https://dev-your-wordpress-site.com/wp-json/wp/v2
PORT=5000
CORS_ORIGIN=http://localhost:4200

# WordPress Authentication
WP_USER=dev-user
WP_PASSWORD=dev-app-password

# Debugging
LOG_LEVEL=debug

Next, open up the .env.production file and add the production variables

    # Production Configuration
WP_API_URL=https://your-wordpress-site.com/wp-json/wp/v2
PORT=8080
CORS_ORIGIN=https://your-angular-app.com

# WordPress Authentication
WP_USER=prod-user
WP_PASSWORD=prod-app-password


# Security & Logging
LOG_LEVEL=info

Let’s make sure we have dotenv and cross-env installed

    npm install dotenv cross-env

Now, let s modify the dotenvConfig.js file to load the correct .env file based on NODE_ENV.

    const dotenv = require("dotenv");
const path = require("path");

// Determine environment (default to 'development')
const envFile = process.env.NODE_ENV === "production" ? ".env.production" : ".env.development";

// Load the correct .env file
dotenv.config({ path: path.resolve(__dirname, `../../${envFile}`) });

module.exports = {
  WP_API_URL: process.env.WP_API_URL,
  PORT: process.env.PORT || 5000,
  CORS_ORIGIN: process.env.CORS_ORIGIN,
  WP_USER: process.env.WP_USER,
  WP_PASSWORD: process.env.WP_PASSWORD,
  REDIS_HOST: process.env.REDIS_HOST,
  REDIS_PORT: process.env.REDIS_PORT,
  LOG_LEVEL: process.env.LOG_LEVEL || "info",
};

Next, we need to update our server.js file to use the correct configuration.

    const express = require("express");
const cors = require("cors");
const { PORT, CORS_ORIGIN } = require("./config/dotenvConfig");
const wordpressRoutes = require("./routes/wordpressRoutes");

const app = express();

// CORS configuration
app.use(cors({ origin: CORS_ORIGIN }));
app.use(express.json());

// Routes

// Start server
app.listen(PORT, () => console.log(`Server running on port ${PORT} (${process.env.NODE_ENV})`));

Finally we need to update our package.json file to load the correct .env file in different environments.

    
  "dependencies": {
    "axios": "^1.7.9",
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "dotenv": "^16.4.7",
    "express": "^4.21.2"
  },
  "scripts": {
    "start": "cross-env NODE_ENV=production node src/server.js",
    "dev": "cross-env NODE_ENV=development nodemon src/server.js"
  }

We should now be all set. We can now start our server.

    npm run dev

Creating an Angular App with a Headless WordPress CMS Part 1: Creating the Angular App

When creating an Angular app with a Headless WordPress instance, the Angular application and the WordPress website sit separate from each other, where the end result is an Angular application where your desired domain points to, and a hosted WordPress site that your Angular application pulls in data from using WordPress APIs. To start our project we are going to create our Angular Application. So, create a GIT repository called “Retail Leaders” and open it in Visual Studio Code or the text editor of your choice.

Once your text editor is opened we can then install our Angular app, and we are going to install the most recent version of Angular 19, choosing to use standard CSS, a SSR application, and including routing.

    npx -p @angular/cli ng new retail-leaders-ui

This will create our new Angular app. Once installed we will install our UI library. In this project we will be using PrimeNG. To do this we will enter our new application.

    cd retail-leaders-ui

and install our PrimeNG library

    npm install primeng @primeng/themes primeicons primeflex

Now we need to update our app.config.ts file to use a PrimeNG theme.

    import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes), provideClientHydration(withEventReplay()),
     provideAnimationsAsync(),
     providePrimeNG({
         theme: {
             preset: Aura
         }
     })
    ]
};

To test it out we can create a homepage component

    npx ng g c homepage

create a route for the homepage

    import { Routes } from '@angular/router';
import { HomepageComponent } from './homepage/homepage.component';
export const routes: Routes = [
    {path: '', component: HomepageComponent},
];

and then add a PrimeNG button to the homepage

    <div class="card flex justify-center">
    <p-button label="Check" />
</div>

    import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
@Component({
  selector: 'app-homepage',
  imports: [
    ButtonModule
  ],
  templateUrl: './homepage.component.html',
  styleUrl: './homepage.component.css'
})
export class HomepageComponent {

}

If we serve up our application we should then see everything working.

Go ahead and delete all of the content inside the app.component.html file besides <router-outlet />. Our application is now set up and now ready for us to start connecting our WordPress site.