In this short tutorial, we will cover how to integrate outside WordPress blog into your crowdfunding portal powered by Thrinacia.
NOTE: Your WordPress blog instance has to be using the HTTPS protocol.
Step 1: Make sure CORS is enabled ( can Skip #1 if using newer version of plugin )
You’ll need to have CORS enabled on your WordPress blog instance either at PHP or web server level for the headless WordPress blog integration to work. Depending on your server and where you hosted your wordpress site, this might be enabled already. If you’ve followed this tutorial and it still doesn’t work, then this is likely the problem.
You’ll need to add Header add access-control-expose-headers “X-WP-Total,X-WP-TotalPages” to your web server’s config file or
header( 'Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages');
in your php file.
Step 2: Save the correct permalink settings
To ensure that the blog posts will properly display on your blog page, you will need to ensure that the correct permalink settings are saved.
Go to the WordPress dashboard, click on settings in the left menu, and click on permalinks.
Make sure you save the permalink settigns to be “Post name” as per the image above.
Step 3: Install the WP REST Filter
You will have to install the WP REST Filter to add filters to the headless WordPress blog. For example, if you do not have the filters, you cannot filter via category when clicking on a particular category.
Go to the plugins in the left menu, then click on add new.
Search for WP REST Filter and install the following:
Make sure to activate the filter.
Step 4: Add the API URL
Log into your platform as a protal admin, go to the administrator dashboard, and click on portal settings, then on widget settings.
Your WordPress API URL should be in this format:
https://YOUR-WORDPRESS-SITE-URL/wp-json/wp/v2/
EXAMPLE: my wordpress blog site = thrinacia-blog.com
So the API URL would be => https://thrinacia-blog.com/wp-json/wp/v2/
You can choose to enable the WordPress widget in the footer as well.
Step 5: To customize the view of the blog and individual post, go to admin dashboard->pages, and modify the content of the pages with path “blog” and “blog/post/*”.
DO NOT remove the default tags in the page editor (<wp-post-list> & <wp-individual-post>). If they are missing, you’ll need to add them back in. You can only see the tag in Codeview:
blog
blog/post/*
Step 6: You can use controllers “WpListCtrl” and “WPCtrl” to access the data of the posts.
If you’re familiar with angularJS and web development, you can use the following controllers above to get the wordpress blog posts you want, and put it anywhere you need. Learn more by watching the following video: