WordPress is one of the most popular content management systems in the world. It powers millions of websites and blogs, and offers a wide range of features and functionalities. One of the most important features of WordPress is its ability to extend its functionality through plugins. Plugins can be used to add new features and functionalities, or to modify existing ones.
ReactJS, on the other hand, is a popular JavaScript library that is used to build user interfaces. It offers a great deal of flexibility and performance, and is widely used in modern web development.
GoEmbed is a WordPress plugin that allows developers to easily embed ReactJS, VueJS or any JavaScript based applications into WordPress. In this blog post, we will discuss how GoEmbed works, and how it can be used to enhance the functionality of your WordPress site.
How GoEmbed Works
GoEmbed is a simple and easy-to-use WordPress plugin that allows developers to embed JavaScript applications to their WordPress site. It works by providing developers with a shortcode that they can use to embed their ReactJS application to any page or post on their WordPress site.
To use GoEmbed, developers simply need to install the plugin, create a new JavaScript application, and then use the shortcode provided by GoEmbed to embed their application to their WordPress site. The shortcode can be customized to include any additional parameters, such as the width and height of the application, or any additional styles or scripts that need to be included.
Getting Started with GoEmbed
To get started with GoEmbed, you need to have a WordPress site up and running.
Next, you need to install the GoEmbed plugin. You can do this by going to the Plugins section of your WordPress dashboard and searching for “GoEmbed”. Once you find the plugin, simply click “Install” and then “Activate”.
Install the plugin
Don’t forget to Activate the plugin
Once the plugin is activated, you can start creating your ReactJS application. To do this, you can use any code editor or development environment that you prefer. You can also use one of the many ReactJS boilerplates available online to get started.
Our plugin also comes with a pre-config ReactJS application in wp-content/plugins/go-embed/apps/my-app. You can use this as a template or build your own.
Prepare your application
This is the tutorial targeting the ReactJS application, but the plugin also works with VueJS or any JavaScript based applications.
GoEmbed utilizes the power of Webpack under the hood, and before we can connect to your app, we are going to build it. Let’s start by installing Webpack if your project not have it already.
npm install -D webpack
Next, we are going to need some basic configuration for the Webpack bundler. For the sake of simplicity, we are going to utilize the example project that comes with the plugin. Simply copy 2 files:
webpack.config.js
src/wpComponent.js
From wp-content/plugins/go-embed/my-app to the root folder of your ReactJS project. You can always adjust the config file to suit your need.
Now, we need to build the project using Webpack, add this script to your package.json
"buildwp": "webpack --config webpack.config.js"
Run the newly added script to build the ReactJS application.
npm run buildwp
Your built project will be available in the build folder
To learn more about the Webpack config that we use, check out our previous blog post.
Once you have built your ReactJS application, you can use the shortcode provided by GoEmbed to embed it to your WordPress site. The shortcode should be placed in the post or page where you want your application to appear.
At this point, we provide you with 2 options:
You can copy the entire ReactJS Project or create a new application inside wp-content/plugins/go-embed/apps, this is recommended, because you can just run the buildwp script and the plugin will pick up your code changes immediately.
The second option is to create a folder with your project name, inside, you can just copy the build folder (the folder needed to be named build as well).
The plugin will treat the folder name as a unique identifier for your application.
All left now is adding a shortcode to your site. We will name our project my-react-appso we can use the shortcode like below in order to embed our ReactJS to WordPress.
[go-embed id="my-react-app"]
✏️ Notes:
The plugin will use the built version of your application, so you will need to re-build the application to see your code changes.
There is no hot-reload at the moment for WordPress site, so don’t forget to refresh after changing the code.
If you want to use the example my-app, install the dependencies then run the buildwp script first.
Benefits of Using GoEmbed
There are several benefits to using GoEmbed to embed Javascript applications to WordPress. First and foremost, it allows developers to take advantage of the flexibility and performance of JavaScript based application, while still using WordPress as their content management system. This means that developers can create dynamic and interactive user interfaces, without sacrificing the ease-of-use and flexibility of WordPress.
GoEmbed is free and open-source, which means that developers can modify and customize the plugin to suit their specific needs. This makes it a powerful tool for developers who want to create custom and unique user interfaces for their WordPress site.
Conclusion
GoEmbed is a powerful and easy-to-use WordPress plugin that allows developers to embed ReactJS applications to their WordPress site. It offers a wide range of benefits, including flexibility, performance, and ease-of-use. If you are a developer who is looking to enhance the functionality of your WordPress site, then GoEmbed is definitely worth considering. Try it out today and see how it can help you create dynamic and interactive user interfaces for your WordPress site!
We value your opinion and would greatly appreciate it if you could take the time to rate and leave a comment on the plugin’s page. Your valuable feedback will help us improve the plugin and make it even more useful for our users. We are always striving to provide the best possible experience for our customers, and your comments will help us achieve that goal. Thank you once again for using our plugin and for your valuable feedback.
Thank you for reading our blog post! If you are interested in building a website, we would be happy to help. At our company, we specialize in website development and design, and we are passionate about helping our clients create a strong online presence. Whether you are looking to build a personal website or an e-commerce platform, we have the expertise and knowledge to help you achieve your goals. Don’t hesitate to reach out to us if you have any questions or if you would like to get started on your website project. We look forward to working with you!
