Create micro portal website in your blogpost

Author: Categories: Citadela - best Gutenberg theme and plugins
Updated: February 9, 2021
Create micro portal website in your blogpost

Recently, we introduced the basic structure of our new plugin and explained how does Citadela WordPress Directory plugin work. Today, we’d like to give you a step-by-step guide on how to create a micro portal site in your blog. We’ll explain the practical use of Citadela WordPress Directory plugin using specific examples.

Enrich your blog posts to increase Dwell time

Citadela WordPress Directory plugin lets you enhance your blog with portal functionality. Here’s an example to get a better picture of what it means: using the plugin, you can insert a map with items that are thematically related to the content of an article into each blog post. Why should you do that?

First of all, thanks to this plugin, you can make your content extra unique and more attractive for your blog readers.

Now, your web visitors can:

  • Read the post with a particular topic (e.g. travel blog from Paris)
  • See exact location of places mentioned in the article

This way, they can discover various tourist attractions, coffee places or museums and learn more about them by clicking on the items (pins) on the map. As a result, they spend a lot more time on your website.

Features of Citadela Directory WordPress plugin can be used for different types of blogs – travel blogs or even professional blogs.

There are different types of Items that can be used to present not only above mentioned cafes but also business branches and events and to display them on the map. You can easily show anything you want.

Don’t let your visitors leave your site

The advantage of placing a map with items in your blog post is that you don’t need to link to other websites and send your visitors away from your site (up until now you could only insert links to external sources). Now you can add more information about each point of interest (item) right into the Item Detail. This will keep the visitors on your site for longer.

How to create a micro portal website

If you already have an established blog running on WordPress 5.2, it’s very easy to add portal functionality. Before you can start building your micro portal site, you need to download Citadela WordPress Directory plugin, which includes all the components you need (custom types, special pages and portal blocks), to enable you to run a micro portal website. If you don’t have it yet, you will get it by purchasing Ait-themes membership.


Buy Lifetime Membership


Building a blogpost with portal features step-by-step

Since Citadela WordPress Directory plugin only works with block-based themes, it’s understandable that the plugin itself adds blocks which you can use to build content in the editor. You can add and remove the available blocks or reorder them to create a custom layout of your blog post. Here is a step by step guide on how to create a micro portal website in a blog post by adding the right blocks and then creating locations, categories and items. This manual will give you a better idea about the selection of portal blocks, their arrangement and customisation.

There are 6 basic steps to create a blogpost with portal features:


It’s up to the blogger to decide if they want to follow the steps exactly or choose a different order. Ultimately, it doesn’t matter whether you add the map first or start with creating of localities, categories and items.


1. Adding Google Map block

One of the essential elements of a micro portal website is the map. You can add a map to a specific blog post via Google Map block and place it anywhere within the article. However, we recommend placing it at the top of your content before the text itself. Google Map block can be added by clicking the “+” symbol and choosing tab Citadela Directory Blocks.

Adding Google Map block

Google Map block is available within Citadela Directory blocks


Google map customisation

Once you’ve added Google Map, it’s time to customise it using Inspector. This is the advantage of having a map as the WordPress block – all settings are available directly within the Inspector.

The most used settings of a map inserted into a blog post are:

  • Category – you can choose if you want to display ALL items on the map or only items from particular category. For example, if you’ve written an article about must-visit places in Sicily, you can choose to display all items which include all categories such as restaurants, attractions, points of interest, etc.
  • Location – choose if you want to show items from all locations or the selected area only (Sicily)
  • Only featured items – by enabling this option, you can display featured items only, from selected categories and locations.
  • Appearance – in Inspector, there are designs and color combinations for maps that are used most often, available in one click. You can set them via the radio button. This way, you can choose the most appropriate appearance of your map that goes nicely with each particular blog post.
  • Enable search form – there is also an option to enable the search form directly on the map. However, if you’re writing an article about a specific place, city or experience, there’s no need for a search form on your map. In this case, you don’t need to turn this feature on. It’s more suitable in other use cases.


Google Map settings

Available settings for Google Map block


Advanced settings

You can further customise the appearance of your Google Map. More settings are available via the map styling tool. However, this is recommended especially for advanced users. Experienced users can also embed Custom CSS Class for more detailed customisation of the map according to their preferences.

Changing the blogpost layout and alignment of the map to full width

As mentioned above, Google Map works as a block. Therefore you can play with it some more and place it anywhere you like within the content. You can even display map in a column or insert it into our Ait Cluster Block, which:

  • Let’s you group multiple blocks into one block
  • Can be stretched to the full width of the page

So if you add Google Map block to the Cluster block, you can display the map full width, from one side of the page to the other. This will give you a modern layout and make your blogpost look special.


Google Map block inserted into AIT Cluster block

Achieve modern look of your map by placing it in Cluster block and aligning it to full width

By inserting additional blocks into the Cluster block, you can affect other aspects of the page’s layout. For example, adding Spacer block will create more airy design. Separator visually separates the content. This way you can use any WordPress core block or any of our Ait blocks added by our plugins.


2. Adding Item Locations

Second step when building a micro portal page is to create locations via Custom type Items -> Item Locations. When creating locations, it’s necessary to pay attention to logical structure and arrangements. You can use parent locations (e.g. Italy) or sublocations (specific place, e.g. Sicily)

Creating Item Locations

Item Locations settings


3. Adding Item Categories

The same way you’ve created Locations, you can create categories and subcategories via Custom type Items -> Item Categories. Add whatever group you write about in your article – from restaurants, ice cream shops, museums to water attractions or types of food – if you have a food blog.

4. Adding Items themselves

Once you have created categories and locations, it’s time to add specific items via Items -> Add New. It could be a excellent Ice cream place you tried in Sicily and that you’ve recommended in your article.

Don’t forget to fill in the necessary information for each Item (general description of the item, address, contact details, opening hours…) Also be sure to add item into relevant category (ice-cream shops) and location (Italy, sublocation Sicily).

Add new Item (in wp-admin)

Available options when you’re creating a new Item


5. Editing special pages

Special pages that are automatically added by Citadela WordPress Directory Plugin right after the installation, have a predefined layout and are used to extract and display data (items, categories, locations) according to specific criteria.

For you as a blogger who works mainly with blog posts, it is a good idea to customize the Item Detail Page. This is the page that will be viewed by your web visitors most often, as they click on specific item on the map displayed in the post.

Item Detail page (special page)

Item Detail page with default blocks that can be reordered or deleted


On the Item Detail page, you can shuffle individual blocks around. Or completely remove some of them. For example, if you’re not the owner of an item, you don’t need Item Contact Form at all, you can delete it from the page.

There’s no need to edit other special pages as their predefined layout is most likely convenient for your website with blog posts.

6. Final check of items on the map

As the last step we recommend you to double-check your Google Map and see if displayed items are in line with your original thought of the blogpost. This is because there are various options of viewing items on the map – you can show all objects or items from specified category or location. It’s a good idea to see if your map is showing items that you want there (especially if you’ve created the map before adding locations and categories)

If you like the concept of a micro portal site, you can create one any time you want. You can do so even if you have a blog based on WordPress theme from another developer, such as Avada, DIVI or other. Get Lifetime membership with us and gain access to Citadela WordPress Directory plugin which will allow you to enrich your blog with micro portal website as well as with other great features!


Get Citadela Directory with Lifetime Membership