How to create a custom user interface in a Craft CMS plugin

A step by step guide on creating UI within a Craft CMS Control Panel section that visualizes subscriber entries.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 01/14/2023 at 15:00
Last Updated on 02/14/2023 at 10:58
A flower that represents Craft CMS, beneath it sits the text "Custom UI."

A step by step guide on creating UI within a Craft CMS Control Panel section that visualizes subscriber entries.

The following tutorial walks you through create custom UI for a Craft CMS control panel section within a plugin that visualizes subscribers, an entry channel within our Craft CMS with the intention of allowing you to send them an email through a button. It builds on top of our Open Source Craft CMS starter project which can be found at the repository below.

SubscribeDownload Open Source Starter ProjectHow to create & setup a Craft CMS projectHow to create & setup a Craft CMS moduleHow to create & setup a plugin in Craft CMS

We recommend that you download or clone our Open Source starter project, check out the tutorial/cp-section branch and complete the steps below. The changes can be found on the tutorial/cp-section-ui.

git clone git@github.com:delasign/craft-cms-starter.git
View Repository

Please note that this tutorial walks you through the example of a control panel section within a plugin, though the example can be used for any page within a Craft CMS. If you are curious how to setup the control panel section, please consult the tutorial below.

How to create a custom control panel section in Craft CMSHow to add a custom icon to a Craft CMS control panel section

Step One: Create your asset bundle

A screenshot of the asset bundle in VSCode.

To be able to style UI within your Craft CMS, you must create an Asset Bundle. Asset Bundles are useful as:

  • They publish an inaccessible directory into a directory below the web root, making it available for front-end pages to consume via HTTP requests.
  • They can register specific CSS and JS files within the directory as <link> and <script> tags in the currently-rendered page.
Learn more about Asset Bundles

A | Setup the folder structure

A screenshot of the Asset Bundle folders.

In the src directory of your plugin, create new folder called assetbundles.

Within the assetbundles folder create another folder that holds the asset bundle, in our open source project have called it cpsectionassetbundle.

Within this folder create a dist folder.

Within the dist folder, create a css folder to hold your css files and a js folder for your js files.

B | Setup the asset php file

A screenshot of the code for our asset bundle PHP file. The code can be found below.

In the cpsectionassetbundle folder or equivalent, create a new php file - we have called it CpSectionAssetBundle.php - and copy in the code below.

Please replace the name space on line 3 and the source path on line 24 with the correct identifiers.

C | Setup css file

A screenshot of an empty css file within our plugin.

Within the dist/css folder create a new css file called index.css. Leave it blank for now.

D | Setup js file

A screenshot of an empty js file within our plugin.

Within the dist/js folder create a new css file called index.js. Leave it blank for now.

Step Two: Register the Asset bundle to the html or twig file

A screenshot of our index.twig with the asset bundle registered.

Open your html or twig file and at the top of the file add the following line:

{% do view.registerAssetBundle("delasign\\craftcmsstarterplugin\\assetbundles\\cpsectionassetbundle\\CpSectionAssetBundle") %}

Please replace delasign\\craftcmsstarterplugin with the relevant path.

Step Three: Add the HTML

A screenshot of the control panel section after adding the HTML.

The code below demonstrates how to add html to a file that will show checkmarks and emails of subscribers, with the intention of allowing you to send them an email through a button.

Step Four: Add the CSS

A screenshot of the control panel section after adding the css.

Add the relevant css to the index.css file that you created earlier. We have provided a sample of the index.css that we used for our mail service.

Step Five: Add the JS

A screenshot of the control panel section after adding the js file. Please note for this to appear you must select and deselect a checkbox.

Add the following jQuery code to your index.js file

Then call the JS function (i.e. MailService as defined on line 15 in index.js) in your twig file using code similar to the one below:

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

SubscribeInquireView All PostsView All ServicesView All Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe