How to create a Custom Module

As with any kind of Module, we recommend that you DUPLICATE rather than try to reinvent the wheel.

Duplicate and amend an existing Custom Module which is currently displayed in the same Position as the one where you want to display the new Module.

This is both quicker and easier.

Read more: How to duplicate a Module.

 

Create and publish a Custom Module

modules

The NEW button is at the top left of the MODULES screen.

modules new

Choose CUSTOM from the list of Module Types.

custom module select type

Under the MODULE tab you can:

  • name the Module (see Title field), and
  • add text and images (in the same way as editing an Article).

custom module add content

Also under the MODULE tab.

Choose who will be able to see the Module.

For example, the Public, only Registered Users after signing in, or only Special Users (like you) after signing in.

Toggle the Access button.

module access

By default, the Module will be visible immediately after publication.

But you can set start and end dates:

  • START PUBLISHING and
  • FINISH PUBLISHING

or choose to UNPUBLISH the Module until a later date.

Simply toggle the PUBLISHED button to unpublish the Module.

module publish dates

Finish Publishing Date

Unless you set a date then the Module will remain published until you unpublish it.

Also under the MODULE TAB.

Choose the Template Position where you want to display the Module.

And enter its name in the Position field.

module position

To see a POSITION MAP visit the link below.

Read more: How to assign a Module to a Position.

Under the MENU ASSIGNMENT tab you may assign the CUSTOM MODULE to one or more Menu Links.

The example below shows: On all pages.

The CUSTOM MODULE will be displayed when any Menu Link is selected.

custom module assign menu

Read more: How to assign a Module to a Menu Link.

To assign a Style Set to a Module requires adding the name of the Style Set you wish to use to the Module Class Suffix field.

You will find the Module Class Suffix field under the Advanced tab of a Module in the Extensions > Modules screen of your website's dashboard.

See image below.

custom module assign style set

No need to reinvent the wheel

Assigning a Style Set to a Module is a higher order task.

For example, before you can add a Style Set to a Module you will need to:

  • have in mind a purpose for wanting to style the Module in a particular way, and
  • know the name of the Style Set you wish to use to achieve your goal.

It is also important to use the correct syntax when adding a Style Set name to the Module Class Suffix field.

  • Use only lower case letters.

  • Insert a space in front of the STYLE SET name.

For this reason we include example Modules with every WYNCHCO website design.

Before creating a brand new Module, try duplicating an existing example:

  • of the same type,
  • assigned to the same position and
  • visible on the same type of devices (phone etc)

as you want for your new Module.

Read more: How to duplicate a Module.

STYLE SETS

WYNCHCO website designs include a wide range of STYLE SETS, some of which make use of CSS3 @media Queries to help you control WHEN Modules are displayed.

Others change the Look & Feel of Modules.

Visit the following link to learn more about working with STYLE SETS.

Read more: Introducing Style Sets.