Step by Step: Embedded Salesforce page in WordPress

Here I am going to show you to to Embedded Salesforce page in WordPress as I have mentioned in my previous post How to get data in Salesforce from WordPress without authentication?

We are going to create a Visualforce Page, and make it available in WordPress.

Before we begin, you will need a custom object obj_contacts which have at least a custom field fl_mobile. You also need to create a test record and write down the id. You may see the id of the record by reading the detail of it.

For example, if it may be access by url, the id is a01A0000003eiAS.

Create a Visualforce Page

1. Make sure your [Site] is active in [App Setup]→[Develop]→[Sites]

2. Enable the [View All] in [Data Administration] for the object need to be viewed in WordPress by editing the [Profile Detail]

3. Create a Visualforce page in [App Setup]→[Develop]→[Pages] as below and named ContactMobile. This page shows nothing but only the mobile. You may also customized with CSS and html tags later.

<apex:page cache="false" sidebar="false" showHeader="false" standardController="obj_contacts__c">

    <apex:outputText value="{!obj_contacts__c.fl_mobile__c}"></apex:outputText></apex:page>

Visualforce is like html tags. The build-in editor provides auto-complete. More detail syntax and components for Visualforce may be found in Visualforce Developer’s Guide.

4. Add the page in Sites by clicking [Edit] button in [Site Visualforce Pages] section. Then move the page from [Available Visualforce Pages] to [Enabled Visualforce Pages]

Enable Visualforce page ContactMobile available to public in Site
Enable Visualforce page ContactMobile available to public in Site

5. Test your page in your browser with url like [Domain Name in Site]/[Visualforce Page Name]/?id=[id]. There is no need to login with a Salesforce account.

For example, If your Site url is , you may assess the fl_mobile field in obj_conbtact with id a01A0000003eiAS by

Embed the page In WordPress

1. install and activate iframe in WordPress

2. Add the shortcode [iframe src=”http://%5BDomain Name in Site]/[Visualforce Page Name]/?id=[id]” width=”100%” height=”50″] to embed the Visualforce page in content. You may change the width and height as your wish.

In this example, you may add the shortcode as [iframe src=”; width=”100%” height=”26″].

Now, you may see the a Salesforce Visualforce page embedded in WordPress content.


  1. How to get data in Salesforce from WordPress without authentication?
  2. Salesforce: Managing Sites
  3. Salesforce: Visualforce Developer’s Guide
  4. WordPress Plugin: iframe

3 thoughts on “Step by Step: Embedded Salesforce page in WordPress

  1. HI, I did everything how you write.
    However i do not see the page in wordpress when my user is logged of from salesforce.
    Could you help me with it ?

    Liked by 1 person

  2. 1. Can you see you Visualforce page? What’s the URL?
    2. If you use iframe (need to install and activate iframe plugin in WordPress) to insert in a WordPress page, can you see it?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.