WordPress

Log into your WordPress site's wp-admin dashboard. Navigate to Users → Profile (or Users → All Users → click your username). Scroll down to the 'Application Passwords' section near the bottom of the profile page. In the 'New Application Password Name' field, enter a descriptive name like 'Bubble Integration' — this label is just for your reference and has no functional effect. Click 'Add New Application Password.' WordPress generates a password immediately and shows it once — copy it now, because you cannot retrieve it again. The format will look like a random string with spaces, for example: `abcd EfGH 1234 WXYZ mnop QRST`. Remove all spaces when you use it: `abcdEfGH1234WXYZmnopQRST`. Keep your WordPress admin username and this cleaned Application Password together — you will combine them in the next step. If you do not see the Application Passwords section, verify that your WordPress version is 5.6 or above (check Dashboard → Updates → 'Your site is up to date' shows the version). The feature is enabled by default but can be disabled by a security plugin.

Bubble's API Connector does not automatically encode HTTP Basic Auth credentials — you must do this manually before pasting into the Authorization header. The format for Basic Auth is `username:password` (your WordPress username, a colon, then the Application Password with spaces removed). For example, if your username is `admin` and your Application Password is `abcd EfGH 1234 WXYZ mnop QRST`, the string to encode is `admin:abcdEfGH1234WXYZmnopQRST`. Open a browser tab and navigate to a base64 encoding tool (search 'base64 encode online' or use base64encode.org). Paste your `username:password` string and click Encode. You will get a base64 string like `YWRtaW46YWJjZEVmR0gxMjM0V1hZWm1ub3BRUlNU`. The full Authorization header value is `Basic YWRtaW46YWJjZEVmR0gxMjM0V1hZWm1ub3BRUlNU` — note the word `Basic` followed by a space, then your encoded string. Copy this full value. You will paste it into Bubble in the next step. Keep this encoded string private — it is equivalent to your username and password.

1// Format for base64 encoding:
2// Input string: admin:abcdEfGH1234WXYZmnopQRST
3// (WordPress username : Application Password with spaces removed)
4
5// Result (example — yours will differ):
6// Basic YWRtaW46YWJjZEVmR0gxMjM0V1hZWm1ub3BRUlNU
7
8// Full Authorization header value:
9// Authorization: Basic YWRtaW46YWJjZEVmR0gxMjM0V1hZWm1ub3BRUlNU

In your Bubble editor, click the Plugins tab in the left sidebar. Click 'Add plugins,' search for 'API Connector,' find the one by Bubble (official), and click Install. After installation, click 'API Connector' in your plugins list to open the configuration panel. Click 'Add another API.' Name this API 'WordPress.' Set the Authentication dropdown to 'None or self-handled' — you will handle auth manually via the header. Set the base URL to your WordPress site's REST API root: `https://yoursite.com/wp-json/wp/v2` (replace `yoursite.com` with your actual domain). Under 'Shared headers,' click 'Add a header.' Set the key to `Authorization` and the value to the full `Basic [base64string]` you generated in step 2. Check the 'Private' checkbox next to this header — this is critical. When Private is checked, Bubble sends this header from its servers and it never appears in browser-side network requests. This is the core security model for this integration. Save the API configuration. You are now ready to add individual API calls.

1{
2  "api_name": "WordPress",
3  "base_url": "https://yoursite.com/wp-json/wp/v2",
4  "shared_headers": [
5    {
6      "key": "Authorization",
7      "value": "Basic <your_base64_encoded_credentials>",
8      "private": true
9    }
10  ]
11}

Inside the WordPress API Connector entry, click 'Add a call.' Name it 'Get Posts.' Set the method to GET and the path to `/posts`. Add URL parameters to control the response: `status` (value `publish`), `per_page` (value `10`), `page` (value `1`), `orderby` (value `date`), `order` (value `desc`), and `_fields` (value `id,title,excerpt,date,status,link,featured_media,categories`). The `_fields` parameter tells WordPress to return only those fields, dramatically reducing response size for list views. Under 'Use as,' select 'Data' — this allows you to bind the response array to a Bubble repeating group. Click 'Initialize call.' Bubble will send a real GET request to your WordPress site and receive a live array of posts. If successful, Bubble auto-detects the response fields: `items[].id`, `items[].title.rendered`, `items[].excerpt.rendered`, `items[].date`, `items[].link`. If you see 'There was an issue setting up your call,' check that your Authorization header is correct (the base64 encoding, the word 'Basic' with a space) and that your WordPress permalink structure is not set to Plain. If a security plugin blocks the request, check the WordPress server logs or temporarily disable Wordfence to test.

1{
2  "call_name": "Get Posts",
3  "method": "GET",
4  "path": "/posts",
5  "parameters": [
6    { "key": "status",    "value": "publish" },
7    { "key": "per_page",  "value": "10" },
8    { "key": "page",      "value": "<dynamic>" },
9    { "key": "orderby",   "value": "date" },
10    { "key": "order",     "value": "desc" },
11    { "key": "_fields",   "value": "id,title,excerpt,date,status,link,featured_media,categories" }
12  ],
13  "use_as": "Data"
14}

Add a Repeating Group element to your Bubble page. Set its type to 'WordPress Get Posts' and its data source to 'Get Posts from WordPress' (your initialized API call). Set per_page and page parameters dynamically if you want pagination. Inside the repeating group cell, add Text elements bound to: `Current cell's WordPress Get Posts title rendered` (post title) and `Current cell's WordPress Get Posts excerpt rendered` (converted to text to strip HTML). Add a Date/Time element bound to `date`. For featured images, you will need a separate GET `/media/[id]` call — the `/posts` endpoint returns the media ID, not the URL. For the editorial dashboard, add a Form group with Input fields for Title and Content, and a Create Post button. Wire the button to a Backend Workflow that POSTs to `/posts` with a JSON body containing title, content, and status set to draft. Add a header `Content-Type: application/json` at the call level for POST requests. RapidDev's team regularly builds Bubble editorial workflows like this — reach out at rapidevelopers.com/contact for a free scoping call if you want a more advanced workflow including category assignment and featured image upload.

1{
2  "call_name": "Create Post",
3  "method": "POST",
4  "path": "/posts",
5  "headers": [
6    { "key": "Content-Type", "value": "application/json" }
7  ],
8  "body": {
9    "title": "<dynamic: Input Title's value>",
10    "content": "<dynamic: Input Content's value>",
11    "excerpt": "<dynamic: Input Excerpt's value>",
12    "status": "draft"
13  },
14  "use_as": "Action"
15}

Preview your Bubble app and verify the repeating group loads posts correctly. Open Bubble's Logs tab (visible in the editor left sidebar) and check Workflow logs to confirm the API calls are completing with status 200 and to spot any WU consumption patterns. Now set up Bubble Data Privacy rules: go to Data tab → Privacy. If you create any Bubble data types that store WordPress content (for example, a CachedPost type that saves post IDs or metadata), add privacy rules restricting who can search for or modify those records — this prevents unauthorized data access through Bubble's API. For the HTML issue: WordPress's `title.rendered` and `excerpt.rendered` fields contain HTML entities and tags. In Bubble text elements, use the expression `:converted to text` to strip basic HTML. For full content (`content.rendered`), use a Bubble HTML element instead of a text element — paste the dynamic value directly into an HTML element to render the WordPress HTML properly in the browser. Test pagination by wiring a 'Next page' button to increment the `page` parameter value and refreshing the repeating group.