Services / Features in Ayro UI themes

Services / Features in Ayro UI themes

 None  12 Sept 2022 : 16:16  Comments (0)  Jimako

Attempt to describe how services should/could work in my future themes. History and actual state.

What services element is? 

Even better. Is there a difference between services and features?  

Not semantically, but in template meaning? What we know:

  • they have similar content: icon, title, maybe subtitle, and description.
  • service's list often has a link to a separate page. But features could be services without the link
  • services are mostly cards (panels), and features are mostly lists. But it can be the opposite way too. 

So, they are the same. You can see some examples here:

but in some themes, they call them services... Lately, I found that some of them are services (file is service-xxx), and some are features (file is feature-xxx) So the title is confusing - feature 20 is service 07 in real use.

So, if something is called services in the theme, you can use it for features too... and the opposite way.

To be continued :)

 So what is to discuss about services? The approach how to implementing them. Imagine 3 service boxes.

Solution one. Custom menus and menu areas. 

  • you create 3 custom menus, service-1, service-2, and service-3, set them to the correct template, and then manually add them in the menu manager. When you want to reorder them, you need to do it via the menu manager. 
  • simple, easy, it works.


  • not able to use the intro (title and subtitle section about services), you need the next custom menu for this like the section header.
  • not able to template section itself - area for menus has to be hardcoded in your layout, their position is set
  • if you don't need separated pages, you waste cpage table just for something so simple


a direct link between menu and page 

You can see this approach in bootstrap3 theme. 

Solution two. Chapters menus.

Chapters menus were introduced sometimes around 2.1 version, from the start as a custom plugin menu, lately, it was partially implemented in core.

 How they work:

  • you create a chapter with a defined sef-url (you need some book too). You can use a special template for the chapter, so you can solve the problem with the intro. 
  • you create menus and add them to that chapter 
  • you use shortcode with parameters
  • you can reorder menus just with the order field in the admin area

The problem is that they added this in core only to solve issues of some themes but it is not user-friendly. 

  • there is no menu for this to add in the menu manager and select the needed chapter and template
  • there is no menu for direct inserting shortcode. The answer for feature was no.

You can suppress this with a custom plugin. But why do it the hard way?   

Another disadvantages:

  • your pages/menus are listed in the menu manager but you don't have a prepared menu area for them, so adding them manually can have a weird result. 
  • you need to hardcode shortcode, to know the parameters....
  • you use 2 chapters records and 3-4 cpage records just to display 3 boxes

You can see this approach in the agency theme and in many themes from that period too. Some themes use this for the portfolio section too. It was many times used for features too. What a waste of pages!

Solution three. Elements plugin.

You could saw this in my premium themes. They partially implemented the idea in core as custom fields. This plugin needs to be reworked after introducing custom fields handler. 

Solution four. Custom fields. 

You will see this in my future themes. 

  • one chapter is needed to set custom fields 
  • one page is needed to set all services


  • you need to know the custom fields name to create your template.
  • you need to insert a link manually to one field if you want the read more functionality.
  • hardcoded number of items

You can have one general chapter for all similar elements (like in the elements plugin):

Standard fields are:

  • icon, title, subtitle, text, link 

You can have 20 custom fields for one page, so you can have max 5 items. The fields are named:

  • item-01-icon, item-02-icon, item-03-icon... 

so it is easily understood the template code

Any custom solution is very easy: 

  • either adding only a new template or copying the chapter and add/change needed fields. 

Intro section solved:

  • chapter data are not used to have just one chapter for this type of menus, but it is possible to extend it with a special chapter for some menu
  • menu + page data can be used for the intro 
  • you can use cpagebutton for Read more button for whole section  
  • you can use the same menu on page itself :)