How to add a blog component to your Atlas website

Would you like full blog capabilities on your crowdfunding website? This tutorial will cover an easy way to add a blog component to your Atlas website.

We will be using the component provided by Skhemata, a partner of Thrinacia. Skhemata makes it easy to add components to any website and provides extensive functionality that can be customized via HTML attributes, CSS, and more. So let’s get started.

Step 1. Thrinacia Subscription

Since Thrinacia is partnered with Skhemata, you can gain access to the components by subscribing to the correct plan as outlined in this FAQ here.

If you don’t want to use the Scale plan, you can also try using the plans on the Skhemata pricing page as well, however, Thrinacia will provide WordPress hosting as part of the scale plan which is essential for this component to function properly. You will need to find a host for WordPress if you do not want to use the scale plan.

If you are using the scale plan, you can contact Thrinacia support when ready to use the blog component, and they will provide you with access to a WordPress instance.

Step 2. Copy the widget code

Now that you have a WordPress instance, you can add the widget code to your site. The Skhemata components can be used in different ways. For this tutorial, we are going to be using the components via widget code. The actual source code is hosted on the Skhemata CDN so you will be able to easily copy and paste a small snippet of widget code to reference it.

Before you can add the widget code to your page, it is best to create placeholder articles so that you can see what the component looks like on the page. For further reference, here is an example of the blog component. You can see this is the Skhemata documentation for the components, you can also see that there’s a tab for the widget code. This is not going to be the same as the widget code that needs to be pasted into the Atlas platform. Pelase use the code provided below as it needs to be pasted into a WYSIWYG editor. Such editors can have limitations so the widget code needs to be tailored for this.

Here is an example of the widget code:

<div style="padding-top: 100px; padding-bottom: 100px;">
	<div class="ui page grid">
		<div class="column">
			<skhemata-blog api-wordpress='{"url": "your-url-here/wp-json/wp/v2"}' blog-post-path="post" posts-per-page="10">&nbsp;</skhemata-blog>
			<script>
				async function check()
				{
					const script = await
					import ('https://cdn.jsdelivr.net/npm/@skhemata/skhemata-blog@latest/build/index.js');
				}

				check();

			</script>
		</div>
	</div>
</div>

You can copy and paste the above code into a page on your platform. Replace the URL as seen in the code ‘your-url-here‘ with the URL of your wordpress blog. You’ll notice that there’s a /wp-json/wp/v2 keep the path the same, do not delete it, if you do, the component won’t work. This path is referencing the WordPress back end. You can then save the page and see the component displayed. It should look something like this if you haven’t added any content yet:

Step 3. Customize the component

You can also make further customizations. One of which is the number of articles that are displayed on the page. This can be customized via the widget code that you have pasted. You should be able to see the posts-per-page attribute. As per the widget code above, it has 10 by default but you can change that to be any number you would like. This is considered an HTML attribute. These attributes are also listed in the Skhemata documentation along with the CSS properties.

For further manipulation and customization, you will need to do so via custom code. Remember, the widget’s source code is hosted on the Skhemata CDN, so you will not have access to manipulate this in particular, but you can add your own custom CSS, javascript, and use the provided attributes.

For any questions regarding the components or customization, contact Thrinacia or join Thrinacia’s Discord chat.