WordPress Content Plugins: Create Content Plugin for WordPress

In this tutorial post of mine, we will create a Embedded Content Plugin for Wordpress. With the aid of this plugin you would be able to share the content of a parent website on a remote website. I had provided every essential coding part incorporation with additional performance upgrading tactic. To create this Embedded Content Plugin is very simple and hassle free to task.

Sharing the content of your WordPress website is the most efficient way to target users to your web page. Web developers are using different techniques and plugins like RSS Feed, Atom Feed and website APIs for sharing the content of the parent website on different other websites. The main problem while using the RSS and Atom feed is the fact that they can only share the posts on a web page whereas the Website APIs are very tough to integrate with a web page. To get a better and easy way to share the content of the website; the Embeddable widgets were introduced.

Embeddable widgets are the JavaScript codes which are used to show some definite content of a web page on different websites. Google Adsense and Facebook are the most common example of Embeddable widgets which are employed to advertise the services and products on a webpage. Embeddable codes are really easy to install and in this post of mine I will tell you how.

With this tutorial you will be able to develop a widget code to display the recent posts of a parent website on other sub pages.

The Widget Code

Widget Code is the code that authorizes the web page to fetch information from the parent website. This code needs to be inserted in the webpage by the user. The wp-widget.js file is the most important part of this code which connects with the content of the parent website, copy it and paste it onto the page in which the Widget code is pasted.

With this Widget code you will be able to insert the recent post from the website www.example.com. In this code I had provided you the way to fetch posts from the parent website but moreover you can even import pictures, videos, tags, comments, reviews and much more with just a few modifications. The basic algorithm of this code will be the same for these modifications.

Design the Plugin

The first step of designing an embeddable widget is to create a WordPress Plugin which can receive the trigger from the widget code and then reply with the assigned content. I know that this step sounds very tricky and complex but actually it is as much simple as making excuses for coming late.

In the below provided code I am calling the recent posts from the parent website by sending a GET query.

The complete code for the plugin is given below.

In the next step we will add the em_embed and em_domain parameter so that the parent website can successfully accept the trigger. In the upcoming stages; this section will also be used to see what kind of data the parent website is sending or the remote website is receiving.

Now we are required to attach the query variable with the template_redirect hook so that the processing of data can take place as soon as the em_embed variable is announced with the global variable.

Here we are going to fetch the list of recent posts from the parent website and hence the export_post function of the code will be abbreviated as below.

The above stated example can be use4d to export the posts; if you are looking to export some other data then you can use this code as guideline and replace the post code by the code of your desired data type.

Developing the Embeddable Widget Code

Till this stage we are done with creating the WordPress plugin and in the upcoming section we will create the Embeddable Widget Code that can add the triggered content to the calling website or webpage. The most common and hassle free way to display the fetched content on the calling page is to use an iframe. To embed the content into the web page; below is the required code.

If you want to fetch only a single type of data than the widget_embed variable can do the job. The code for the single data type will look like as below.

wp-widget.js is the most important JavaScript that performs all the tasks including, triggering the remote website and embedding the appropriate content to the iFrame. To make it active on your WordPress website, you have to place this wp-widget.js file in any subdirectory of your WordPress website. Below is the code for the wp-widget. js Javascript.

Till this step we had successfully integrated the iFrame and content in the DOM via main() function. You can alter the size of iFrame according to your webpage and requirement.

Integrating Custom CSS To The Content

Icing the cake you can also add the Custom CSS to the content displayed on the remote website. to add the Custom CSS, you can use the below provided code.

You have to different CSS according to the type of fetched content. You can easily pour more beauty to the plugin window with a little more modification. So start exploring your creativity skills to give a unique and elegant look to the plugin window.

Putting a Limit to the Domains

Customizing the domain visibility is possible here; so now you can easily restrict the display to certain domains. As we already have the remote website’s URL in the em_domain variable; we have to simply check the domains and had to choose the content accordingly.

Performance Issues

While allowing the remote websites to fetch the content from your website will surely impose additional load on your server. The situation may get worse when the number of those remote websites is high. So it is always advised to the user that he must carefully allow the remote websites to access the content of the website.

However there are certain methods and Plugins that can help you to fade the affect to an extent. The Plugins like WP Super Cache are really popular among the web developers to store the cache information and hence reducing the server load.

You can even use the WordPress Transient API to use the database as a temporary Cache memory space. After adding the catch_widget_query() to the WordPress API code; the resultant code will look like as follows.

I hope that your phobia of creating the Embedded Content plugin for WordPress will be passed after this tutorial post. If you are still finding any hassle then you can share your issues with us in the comments. I will appreciate your feedback and suggestions for my next post.




Jennifer Adam

The area of interest of Jennifer Adam is to cater technologically advanced and powerful tool which works remarkably with multiple browsers and devices. Being a talented professional of inkyROBO, she is capable of implementing the innovative ideas and also loves to write inspiration blogs.