UX/UI Research-Applied Strategies for Building a Custom WordPress Theme Using Underscores and Elementor

Lindenwood University Lindenwood University

Digital Commons@Lindenwood University Digital Commons@Lindenwood University

Theses Theses & Dissertations

12-2022

UX/UI Research-Applied Strategies for Building a Custom UX/UI Research-Applied Strategies for Building a Custom

WordPress Theme Using Underscores and Elementor WordPress Theme Using Underscores and Elementor

Sandi Harageones

Follow this and additional works at: https://digitalcommons.lindenwood.edu/theses

Part of the Art and Design Commons

UX/UI RESEARCH-APPLIED STRATEGIES FOR BUILDING A

CUSTOM WORDPRESS THEME

USING UNDERSCORES AND ELEMENTOR

Sandi Harageones

Submitted in Partial Fulfillment of the Requirements

for the Degree of Master of Arts in Web and User Experience Emphasis

Lindenwood University

The author hereby grants Lindenwood University permission to reproduce and to distribute

publicly paper and electronic thesis copies of document in whole or in part in any medium now

known or hereafter created.

_________________________________________________

Author

_________________________________________________

Committee chair

__________________________________________________

Committee member

__________________________________________________

Committee member

UX/UI RESEARCH-APPLIED STRATEGIES FOR BUILDING A

CUSTOM WORDPRESS THEME

USING UNDERSCORES AND ELEMENTOR

A Thesis Submitted to the Faculty of the Art and Design Department

in Partial Fulfillment of the Requirements for the

Degree of Master of Arts

Lindenwood University

Sandi Harageones

Saint Charles, Missouri

December 2022

Abstract(

Title of Thesis: UX/UI Research-Applied Strategies for Building a Custom WordPress Theme

Using Underscores and Elementor

Sandi Harageones, Master of Arts in Art and Design, Web and User Experience Emphasis, 2022

Thesis Directed by: Dr. Jason Lively, Professor Art, Design, and Media at Lindenwood

University

The aim of this project is to offer a new, easier method to web designers and web design

instructors for creating a custom-built WordPress theme using primarily Underscores, a starter

theme made by Automattic, the creators of WordPress; and Elementor, a leading WordPress-

based web creation platform. WordPress is a leading, free content management system (CMS)

for building websites. Premised on user experience/user interface (UX/UI) applied research, this

method can help web design professionals avoid using third-party WordPress themes. Moreover,

web design instructors can incorporate this method into their course curricula to prepare their

students for professions in custom CMS web design. Collectively, these strategies will best serve

novice to advanced WordPress web designers (and educators) with little to no PHP (a popular

general-purpose scripting language used for web development) coding experience.

Acknowledgements(

First and foremost, I would like to express my sincere gratitude to my committee chair,

Dr. Jason “Dude” Lively, professor of Art, Design & Media at Lindenwood University, for all

his ongoing support, his guidance with my project, and his dedication to my success. I would

also like to thank my academic advisor at Lindenwood, Dr. James Hutson, as this endeavor

would not be possible without him. A very special thanks goes to my committee members,

Professors Justin Kussman and Mike Lavella, for all their invaluable knowledge and

encouragement. I am deeply grateful to all the Writing Specialists at Lindenwood for their

tenacity in proofreading my work. I would also like to thank all my UX testers for their time and

patience with every testing stage of my projects. Finally, my appreciation goes out to my family

and friends for their encouragement and support all throughout my studies.

Table(of(Contents(

Abstract ........................................................................................................................................... 3

Acknowledgements ......................................................................................................................... 4

List of Figures ................................................................................................................................. 6

Introduction ..................................................................................................................................... 7

Literature Review ............................................................................................................................ 9

Methodology ................................................................................................................................. 12

Production and Analysis ............................................................................................................... 13

Instructions for implementing this method: .............................................................................. 17

Conclusion .................................................................................................................................... 22

References ..................................................................................................................................... 24

Appendix ....................................................................................................................................... 27

List(of(Figures((

Figure 1. Shortcut Admin Menu with Editable Regions .................................................................14

Figure 2. Underscores Website Advanced Options…………………...……………….………….19

Introduction(

(

Third-party WordPress themes (for purchase at ecommerce websites like

www.themeforest.net) are a quick solution for getting a great-looking website up and running with

little knowledge of WordPress and website coding. For web designers and web design companies,

they are great for streamlining workload by offering their customers a quick turnaround time and

perhaps also a discounted price on their website. While third-party themes are a good solution for

some, there are several problems associated with them: They are not unique; they need a license

to purchase (and then eventually repurchase to continue receiving technical support after the initial

license/support period expires); they occasionally need to be updated due to possible

vulnerabilities (this can require repurchasing the license to receive theme updates); they can

become discontinued and no longer supported; the editable regions (headers, footers, cascading

style sheets (CSS), and other styling elements) are in several different places; they can be hard to

customize for novice users; the names of the themes are difficult to change (which can be seen in

the HTML code and in the administrative panel of WordPress); and each third-party theme is made

differently. For example, the various places where the editable regions in third-party themes could

be located are under the Appearance menu, under the Tools menu, in the theme’s dynamic

stylesheets, and in the theme’s control panel. These regions are sometimes hard to find (with or

without documentation) when working with different themes from different creators. Another

caveat to using third-party themes is having to re-learn a new theme upon every new purchase, as

some theme creators use different frameworks and create their own control panel for styling and

functionality. Sometimes these frameworks are separate plugins that can cause conflicts with other

plugins. Plugins (also known as extensions) are pieces of software that WordPress uses to extend

the functionality of a WordPress website, such as an ecommerce shopping cart or a contact form.

There is still a large demand for using third-party themes and it is a profitable business for their

developers. However, this project offers an easy method, using a combination of free software, to

those who are interested in building custom designed websites (with no hard-coding experience)

and to educators who would like to offer their students a blank starting point for building

WordPress websites from scratch, using a visual layout.

The purpose of this project is to introduce some new strategies for easily creating a custom-

built WordPress theme, to help web designers eliminate their inclination to use third-party themes,

and to inform web design instructors of a new method of website building that they may

incorporate into their curricula. Creating a custom WordPress theme from scratch can be daunting,

but the new strategies herein can make it simpler, and potentially more profitable. For example,

web designers who promote their work as custom-designed verses templated could have a higher

advantage in gaining more customers in their market. Likewise, educators could use these new

strategies and incorporate this method into a curriculum for a WordPress web design course. This

method will help streamline workload by using a combination of free software that gives more

flexibility, creative freedom, and usability for creating professional, custom-built websites. The

new strategies herein include: methodology focused on the user’s experience (UX); using

Underscores (a starter theme made by Automattic, the creators of WordPress); using Elementor (a

leading WordPress-based web creation platform) to build headers, footers, page layouts, mobile

menus, and other elements; creating a shortcut admin menu and placing all editable regions there;

and placing all the custom CSS styling in one place. The method will first be tested as a prototype

using Adobe XD (industry standard software for designing and testing web applications) and will

then be used to build two fully developed websites. Collectively, these strategies will best serve

novice to advanced WordPress web designers (and educators) with little to no PHP (a popular

general-purpose scripting language used for web development) coding experience.

Literature(Review(

The user’s experience is an important component for this project to ensure that it will be

easy and intuitive to use with little or no instruction. This research aims to pursue two objectives.

The first objective is to discover how the theme will be built. This goal is reached by researching

which content management system (CMS) to use, whether the theme should be built using a starter

theme or framework, and which page builder software to use. Objective two is to identify with the

user and to create prototypes of the theme for testing to ensure that this method is instinctive to

use. This goal is achieved by researching what UX design is and how to implement the

methodologies that go into this project, while maintaining flexibility in design (a feature that third-

party themes lack, since they are generally not meant to be redesigned).

To reach objective one, choosing a starting point for creating this theme is challenging, as

there are many different content management systems (CMS), frameworks, and starter themes to

suit different web designers’ needs. Firstly, why use WordPress? The author, Sandi Harageones,

is a professional web designer and started building websites using Joomla. In her empirical

experience, she switched to WordPress for a couple of reasons. The first reason was that there was

a larger market and, therefore, more options and support for WordPress. Most importantly, she

discovered that Joomla was frustrating to use for her customers because of the large learning curve

and the inability to easily copy and paste content into Joomla’s text editors when editing pages.

Comparative CMS research in one study suggests that WordPress is overall easier to use, has better

support for search engine optimization (SEO) using the Yoast SEO plugin, and has better

customization possibilities (Ewer, 2021). Another comparative study found that WordPress won

over Joomla and Drupal for overall better technical capabilities, higher market share, and ease of

use (Iqbal et al., 2020).

Moreover, the future of CMS technology is evolving into a more connected experience for

users, called a Digital Experience Platform (DXP), which “WordPress comes closer and closer to

what a DXP can offer” (FastComet, 2020, para. #25). A DXP is a fully integrated, personalized

experience for users where every interaction a user has is with a touchpoint (an online store, an in-

store kiosk, customer portals, or anywhere a customer can interact with a product or service); the

data collected is then used to optimize the next interaction (Brenninkmeijer, 2017). There is already

a plugin for WordPress called WP-DXP that transforms WordPress into a DXP on a smaller scale,

making WordPress a better choice for future expansion (Filter Digital, 2021).

Secondly, another challenge for objective one is deciding whether using a framework or a

starter theme will work best for this project. John Hughes (2017) explains that a theme framework

is basically a parent theme that stores the base code, handles theme functionality, and needs a child

theme for styling. A starter theme is a bare, standalone theme with minimal to no styling (Hughes,

2017). A disadvantage to using frameworks is that they can sometimes become discontinued,

rendering the theme obsolete (Hughes, 2017). Underscores, a barebones starter theme created by

Automattic (the creators of WordPress), is well-known, and the styles and scripts are minimal

(Karkovack, 2020). Underscores is an installable theme (pre-packaged as an installable ZIP file

that can be uploaded into the WordPress theme installer), and it can be given a custom name before

it is downloaded. This feature is attractive because it gives web designers the capability to give a

custom name to their themes, an ability that can be difficult, or even impossible, with third-party

themes. Because of its benefits and its lightweight and minimalistic code, Underscores is a better

fit.

Furthermore, one of the most popular page content editor plugins, Elementor, is made only

for WordPress. Elementor is an attractive solution for webpage content building because of its

drag-and-drop editor, instant page edits, unlimited number of undos, high-speed performance,

affordability, large library of pre-packaged widgets and page templates, mobile-friendly design,

global styling, thorough documentation and support, and overall ease of use (Babich, 2021; Pines,

2021; Schäferhoff, 2021; Versoza, 2021). It also allows web designers to easily create headers,

footers, individual pages, landing pages, pop-up pages, off-canvas (mobile) menus, and 404 error

pages. There are also several free and paid WordPress plugins that add more functionality to

Elementor. Therefore, Elementor is a good solution for this project.

The second objective is to find ways to identify with the users (who will ultimately be the

ones using this method to produce websites). To do this, it is important to understand the

significance of UX design. Firstly, why is UX design important? UX design is the work, focused

on the usability of a product (or, in this case, the usability of a method for making websites), that

contributes to the overall enjoyable experience of a user (Ritter, 2017). Websites that are well-

designed, and easy to use, give a satisfiable experience to prospective customers. According to

Lisandra Maioli (2018), “UX is present everywhere” and “bad UX is bad for your business” (p.

7). If anything prevents users from accomplishing their tasks on a website, the website will result

in a poor user experience (Maioli, 2018). When designing a solution for an effective user

experience, one must understand the needs of both the business and the users (Maioli, 2018). There

are many UX design methods used to identify with users. A user persona represents a larger group

of users who share similar characteristics and goals (Faller, 2019). Designers use personas to help

them understand and develop empathy for the targeted audience to create the best possible design

that is centered around their experience (Faller, 2019). Unmoderated remote usability testing

occurs when participants are asked to answer a list of questions about the prototype while using it

in their own environment and using their own equipment without a moderator (Babich, 2019). This

simulates a natural way for the product to be used but offers less details in the testing result

compared to other methods (Babich, 2019). User personas and usability testing with digital

prototypes will serve as the best methods for this project. Also, due to the limited availability of

representative testers for the investigation of this project, unmoderated remote usability testing

will be the testing method for the project’s digital prototype.

In summary, WordPress will be used as the CMS for this project, along with Underscores

(the starter theme produced by Automattic), Elementor (the WordPress-based web creation

platform), and Admin Menu Editor (a plugin for creating a custom WordPress admin menu with

shortcut links to frequently used editable regions). The UX testing for the digital prototype of the

project will be performed by unmoderated remote testers. A qualitative methodology will be used

to examine this software used cooperatively to create a custom-built WordPress theme.

Methodology(

(

Before building the theme, a digital prototype using Adobe XD was created to show what

the grid positions and main menu will look like on a desktop computer, a tablet, and a mobile

phone. The prototype simulates a webpage layout when using Elementor to create pages with

columns and rows. A screenshot of the backend of WordPress will also be taken to show where

the editable regions will be located. A questionnaire was provided to the remote testers, asking

questions about the layout of the grid positions and where to find certain aspects of the theme. This

testing phase will help determine if this method of page layout is intuitive to use and if the custom

admin menu of shortcuts aids in usability.

Next, four user personas’ archetypes were created to help identify with the users’ needs.

Two of the personas represent male and female web designers who use WordPress to produce

websites. The other two personas represent male and female web design instructors who teach

CMS web design to college level students. The personas present data about the users, such as their

general biographical information; experience level with WordPress, Elementor, HTML, and CSS;

work experience level; status in higher education; their career goals, along with any related

problems or frustrations they are facing; and their desired outcome for using this new method.

After the results are collected from this user testing phase, two uniquely designed websites

using this method will be built. Underscores, Elementor, Admin Menu Editor (a plugin for editing

the admin menu), and Max Mega Menu by megamenu.com (a plugin for creating menus and

mobile menus in WordPress) will be installed. Headers, footers, pages, grid positions, and menus

will be created and a shortcut menu for the editable regions will be placed in the left-hand-side

WordPress admin menu. After the two websites are built, detailed step-by-step, written instructions

will be provided to explain how to build a website using this method. A second UX testing phase

will be performed to ensure the utmost usability of this method for building WordPress websites

from scratch. The testers for this second testing phase will be asked to follow the step-by-step

instructions and answer questions about their experience with the entire procedure.

Production(and(Analysis(

(

The first UX testing phase was performed by two unmoderated, remote testers. The user

testing results revealed that finding the custom admin menu with editable regions (Headers,

Footers, Page Templates, Off Canvas Menus, and Style CSS) at the top of the WordPress admin

menu (on the left-hand-side just under the Dashboard) was easy to find, according to both testers

(Figure 1, p. 14). Placing the editable regions in one place is accomplished by using the plugin,

Admin Menu Editor, by Janis Elsts. Both users easily found the off-canvas menu (mobile menu)

on the top right-hand-side when viewing the theme on smaller screens. They both agreed that this

was a good placement for it. Both testers agreed that the grid positions were easily identifiable and

easy to understand on all screen sizes. One tester mentioned that the Utility Menu grid position

took up half the mobile screen and took precedence over the brand/logo. To remedy this problem,

a good solution would be to place the most important Utility Menu items on the off-canvas menu

to not obstruct the visual hierarchy of elements and to reduce the need to scroll down on smaller

screens.

Figure 1

Shortcut Admin Menu with Editable Regions

Note. Editable regions are encased in green.

Regarding frameworks and starter themes, Underscores proved to work best for the starting

point of the theme for three reasons. The first reason is that when Underscores is downloaded from

its website (www.underscores.me), it is downloaded as an installable WordPress theme in a .zip

format. Secondly, before download, the theme can be custom-named and branded, which appears

in the HTML and CSS code and includes the theme branding in the main stylesheet (style.css)

(such as author, author url, theme name, version, etc.). Thirdly, Underscores’ stylesheet already

comes packed with basic element styling and corrective styling to maintain uniformity in different

browsers. Any custom CSS IDs and classes (IDs and classes are used to style web elements) can

be placed at the top of this stylesheet, so that they are easy to find when adding custom styling.

The stylesheet is located at Appearance > Theme File Editor > style.css. A helpful strategy to

streamline workload is to create a link to the style.css when creating the custom admin menu. This

creates a shortcut to easily make edits to the stylesheet when needed. Alternatively, custom CSS

can also be inputted at Appearance > Customize > Additional CSS in the default WordPress admin

menu.

As for page content layout, Elementor is the winner. Elementor has a built-in feature called

Theme Builder that allows users to create custom sections of a website such as headers, footers,

single pages, error pages, pop-up pages, and much more. The user can create multiple templates

for each section, save them, and reuse them throughout the website. For example, a user can create

the layout for a single page, save it as a template, and then use the same layout for another page

by inserting that template. This saves a lot of time, especially if you have several pages and want

to keep page layouts uniform with minimal differences on each page. Each of these sections

(headers, footers, etc.) can be placed as a separate editable region in the custom admin menu for

easier access while designing. One important discovery of using Elementor is that the pop-up page

builder feature can be used to create and design off-canvas menus. This eliminates having to use

the plugin, Max Mega Menu, to create mobile menus. Additionally, using less plugins makes the

website lighter in weight and speeds up page loading for the entire website.

After this method was completed, a video was created to demonstrate how to create the

custom admin menu and how to place the custom CSS IDs and classes at the top of the main

stylesheet. The video, a new install of WordPress, and a UX questionnaire were provided to one

of the testers of the original prototype. The tester was to follow along with the video to install the

required plugins, create a custom admin menu, and to create custom CSS in the stylesheet.

According to the user, the video was easy to follow, and he easily accomplished the tasks in the

questionnaire. However, he stated that he would have liked to have seen a demonstration of

Elementor as part of the process. A complete guide to using Elementor can be found at

https://elementor.com/blog/what-is-elementor-for-wordpress/. Elementor’s website

(www.elementor.com) and YouTube’s website (www.youtube.com) include many useful video

tutorials on how to use Elementor.

For educators and web designers alike, to use this method for building a custom WordPress

website in your curricula or for your web projects, below are four steps of instructions on how to

implement the method. WordPress and Underscores are entirely free to use under the GNU General

Public License (https://www.gnu.org/). Elementor and Admin Menu Editor both have free and

paid Pro versions. The free versions will suffice for using this method; however, the paid Pro

versions have extensive premium features that will enhance your work. Nonetheless, step three

introduces another free plugin (Elementor Header & Footer Builder) that at least gives the ability

to create headers and footers (two important and standard features of a website) without having to

purchase Elementor Pro.

The first step explains how to install WordPress on your server; it provides helpful links

that show different ways to install WordPress. The second step tells how to download and install

Underscores. It also explains how to fill out Underscores’ “Advanced Options.” Step three

provides the installation process for Elementor, links to online Elementor tutorials, an explanation

about purchasing the Elementor Pro license (optional), the installation process for the Elementor

Header & Footer Builder plugin, and a recapitulation about where to enter custom CSS styling.

Step four is optional; it provides the installation process for Admin Menu Editor to create a shortcut

menu for your frequently visited editable regions.

Instructions for implementing this method:

1. WordPress: Setup WordPress on your server. You will need access to a website

hosting server with a database connection to use WordPress.

a. If your server provides it, you may use a web hosting tool such as Softaculous

or Fantastico to automatically install WordPress for you. Instructions on how

to install WordPress from numerous hosting servers (e.g., Bluehost, HostGator,

etc.) and from several server options (e.g., via cPanel, FTP, etc.) are found at

https://www.wpbeginner.com/how-to-install-wordpress/.

b. Or you may download and install it yourself from WordPress’s website at

https://wordpress.org/download/. The installation guide is found at

https://wordpress.org/support/article/how-to-install-wordpress/.

2. Underscores: WordPress requires a theme to be installed and Underscores provides a

completely blank slate for customization.

a. Go to www.underscores.me to name and download your starter theme. Use the

“Advanced Options” to customize more fields, if desired (figure 2, p. 19). The

Theme Name is your theme’s name. The Theme Slug is the part of the URL

that identifies the theme’s name in an easy-to-read format. For example, if a

theme’s name is Six Figure Design, the slug would be sixfiguredesign. The

theme’s folder within the website’s hierarchy of directories would be named

sixfiguredesign. (In this case, the URL WordPress would use to locate the theme

folder would be something like http://www.sixfiguredesign.com/wp-

content/themes/sixfiguredesign/.) For Author, put your name, the name of your

business, or the name of your entity. For Author URL, put your website domain

name or your entity’s website domain name (e.g., http://www.example.com).

For Description, write a short description about what this theme is for. Only

check the “WooCommerce boilerplate” option if you plan to develop custom

WooCommerce plugins for the WooCommerce ecommerce plugin on your

website. Likewise, only check the “_sassify!” option if you know how to use

Sass, an advanced scripting language that preprocesses CSS (https://sass-

lang.com/).

b. After inputting your information, click “Generate.” The theme will download

as a ZIP file (.zip). Do not open or unzip this file. Save it to a place on your

computer where you can easily find it.

c. Now, in the admin panel of WordPress, go to the theme installer located at

Appearance > Themes. At the top of the page, click “Add New.” Then, click

“Upload Theme” when this option appears.

d. Next, you will see a button to browse your computer and locate your

downloaded ZIP file. After choosing your ZIP file, click “Install Now.”

e. After installing your theme, click “Activate” to activate your theme. Further

instructions for installing themes can be found at

https://wordpress.com/support/themes/uploading-setting-up-custom-themes/.

Figure 2

Underscores Website Advanced Options

3. Elementor: Elementor’s website includes many written and video tutorials on how to

use it. A good starting point is found at https://elementor.com/blog/base-theme-with-

elementor/. There are also many video tutorials at https://www.youtube.com. A

complete guide to Elementor’s page building (including how to create page layouts,

how to use Elementor’s widgets, how to style elements, and other tips and tricks) is

found at this link https://elementor.com/help/page-building/.

a. To install the plugin, in the backend of WordPress, go to Plugins > Add New.

b. In the search bar, search for Elementor Website Builder by Elementor.com.

Click “Install Now” to install the plugin.

c. After installing the plugin, click “Activate” to activate it.

d. Elementor Pro (optional): The paid Pro version is not required; however, it

includes premium, convenient features such as the Theme Builder, which

allows for the creation of headers, footers, popups, etc. If you decide to purchase

the Pro version, you would install it after installing and activating the free

version first. Go to Elementor > License and follow the on-screen instructions

for obtaining a Pro license, if desired.

e. Elementor Header & Footer Builder (a free alternative): Since headers and

footers are standard features for websites, hand-coding them in the

Underscores’ theme footer file (footer.php) and theme header file (header.php)

could require advanced knowledge of WordPress and PHP, especially when

incorporating a WordPress menu and another dynamic content. Please note that

the free version of Elementor does not allow access to the Theme Builder

premium feature, where you may create headers and footers for your website.

As an alternative, install and activate the free plugin Elementor Header &

Footer Builder by Brainstorm Force. This plugin allows you to easily create

headers and footers and use Elementor’s page builder to style them. It works

similarly to how Elementor’s Theme Builder works, such as creating multiple

headers and footers that can be assigned to display on different pages. It does

not have all the premium features that Elementor’s Theme Builder offers, but it

can create both headers and footers for your website, without having to purchase

Elementor Pro.

i. To install this plugin, in the backend of WordPress, go to Plugins > Add

New.

ii. In the search bar, search for Elementor Header & Footer Builder. Verify

the plugin by its author, Brainstorm Force. Click “Install Now” to install

the plugin.

iii. After installing and activating the plugin, go to Appearance > Elementor

Header & Footer Builder to use it. For further information about this

plugin, visit https://wordpress.org/plugins/header-footer-elementor/.

f. Custom CSS Styling: While Elementor has its own built-in styling and

provides many options for custom styling for each Elementor widget, you may

want to add your own styling to certain elements beyond Elementor’s

limitations. To add custom CSS styling all in one place, you may use the

style.css file located at Appearance > Theme File Editor > style.css or the

Additional CSS option located at Appearance > Customize > Additional CSS.

4. Admin Menu Editor: This step is optional, but it will help you create shortcuts to your

frequently visited editable regions that will ultimately speed up your workload.

a. To install this plugin, in the backend of WordPress, go to Plugins > Add New.

b. In the search bar, search for Admin Menu Editor. Verify the plugin by its author,

Janis Elsts. Click “Install Now” to install the plugin. After installing, make sure

to activate the plugin to use it.

c. From within the WordPress admin menu, go to Settings > Menu Editor to use

this plugin.

d. Visit the plugin website (https://www.adminmenueditor.com) for instructions

on how to create a custom admin menu.

Conclusion(

(

To conclude this project, two fully built WordPress websites were made using this method.

Both websites were uniquely different in design, which demonstrates that this method

accommodates flexible styling for various layouts and distinctive designs. A final UX test was

implemented to examine the simplicity of the provided four-step written instructions for executing

this method. Three testers with both web design and college level teaching experience reported

that this method of building websites was easier, compared to building websites using other CMSs,

and it allows for more control and flexibility in designing WordPress themes. The testers agreed

that while third-party themes are convenient and easy to use, this method is simple, and they would

use it again. Two of the testers agreed that this method allows for more control over styling and is

suitable for teaching in academia since it encourages a basic starting point to build WordPress

websites from scratch, which permits as much customization as possible.

To recapitulate, third-party WordPress themes are used to quickly build a good-looking

WordPress website. However, they can be problematic and can be difficult to customize and

redesign. The suggested WordPress theme-building strategies herein offer UX/UI research-tested

method for web designers to build custom-designed WordPress themes with ease and for web

design instructors to introduce a more effortless method to their students for building WordPress

websites with a visual layout. These strategies include using Underscores as a base theme with

customized theme details; placing all CSS styling in one place (either in the theme’s stylesheet

(style.css) or in the Additional CSS option); using Elementor for creating and editing page content;

and making a custom admin menu that creates shortcuts to the editable regions in the backend of

WordPress. Collectively, this combination of tools aids the novice to advanced WordPress web

designer in creating custom-built websites. Web design instructors may also use this method to

teach an intermediate level web design course involving the use of a CMS and a database.

References(

Babich, N. (2021, June 16). How to create a design system: 10-Step guide (2021). Elementor.

https://elementor.com/blog/design-system/.

Babich, N. (2019, November 11). The top 7 usability testing methods: Adobe XD ideas. Ideas.

https://xd.adobe.com/ideas/process/user-testing/top-7-usability-testing-methods/.

Benefits of custom WordPress theme for your website. (2021, March 19). Grace Themes.

https://gracethemes.com/benefits-of-custom-wordpress-theme-for-your-website/.

Boden, M. (2021, April 29). Custom web design vs template website: Which is best? Kicking

Pixels. https://kickingpixels.com.au/custom-web-design-vs-template-website-which-is-

best/.

Brenninkmeijer, T. (2017, December 4). From web CMS to DX platforms: The Evolution of

content management. CMSWire.com. Retrieved September 9, 2021, from

https://www.cmswire.com/digital-experience/from-web-cms-to-dx-platforms-the-

evolution-of-content-management/.

Campbell, N. (2021, January 5). Top 10 open-source WordPress theme frameworks. Speckyboy

Design Magazine. https://speckyboy.com/wordpress-theme-frameworks/

Eduonix Learning Solutions & Packt Publishing. (2017). Learn to create WordPress themes by

building 5 projects: Master the fundamentals of WordPress theme development and

create attractive WordPress themes from scratch [E-book]. Packt Publishing.

https://search.ebscohost.com/login.aspx?direct=true&AuthType=sso&db=nlebk&AN=16

82403&site=ehost-live&custid=092-800&ebv=EB&ppid=pp_Cover

Ewer, T. (2021, May 27). WordPress vs Joomla: Which CMS to choose for your website?

ThemeIsle Blog. https://themeisle.com/blog/wordpress-vs-joomla/.

Faller, P. (2019, December 17). Putting personas to work in UX design: What they are and why

they’re important. XD Ideas (Adobe). Retrieved September 25, 2021, from

https://xd.adobe.com/ideas/process/user-research/putting-personas-to-work-in-ux-design/.

FastComet. (2020, June 15). The Evolution of CMS - digital experience platform (DXP)

explained. FastComet Blog. Retrieved September 9, 2021, from

https://www.fastcomet.com/blog/digital-experience-platforms.

Hughes, J. (2017, August 22). The Beginner’s guide to creating a theme with Underscores.

Torque. https://torquemag.io/2017/08/beginners-guide-to-creating-a-theme-underscores/

Iqbal, Muhammad & Noman, Muhammad & Talpu, Samar & Manzoor, Engr. Dr. Amir &

Muneeb Abid, Malik. (2020). An empirical study of popular content management system

- WordPress vs Drupal vs Joomla. 10.21917/ijms.2020.0168.

Karkovack, E. (2020, December 5). The top starter & barebone themes for WordPress

development. Speckyboy Design Magazine. https://speckyboy.com/wordpress-starter-

themes/

Maioli, L. (2018). Fixing bad UX designs: Master proven approaches, tools, and techniques to

make your user experience great again. Packt Publishing.

Muriuki, F. (2020, March 2). WordPress theme frameworks: Pros, cons and all you must know.

WPExplorer. https://www.wpexplorer.com/wordpress-theme-frameworks/

Rand-Hendriksen, M. (2017, February 6). Welcome-WordPress: Building themes from scratch

using Underscores [Video]. LinkedIn. https://www.linkedin.com/learning/wordpress-

building-themes-from-scratch-using-underscores-2/welcome?u=98593218

Ritter, Marli & Winterbottom, Cara. (2017). UX for the web : Learn how UX and design thinking

can make your site stand out from the rest of the internet. Packt Publishing.

Pines, B. (2021, June 7). How to create a header & footer in WordPress + examples. Elementor.

https://elementor.com/blog/header-footer-builder/.

Pines, B. (2021, July 1). How to create a responsive WordPress site with Elementor. Elementor.

https://elementor.com/blog/introducing-mobile-editing/.

Pines, B. (2021, July 8). Introducing theme style: Global theme design for Elementor. Elementor.

https://elementor.com/blog/introducing-theme-style/.

Popescu, A. (2019, December 3). How to build a customer journey map. UX Collective.

Retrieved September 25, 2021, from https://uxdesign.cc/how-to-build-a-customer-journey-

map-3f3651ec9990.

Price, A. (2020, December 26). WordPress: From CMS to digital experience platform (DXP).

93digital. Retrieved September 9, 2021, from https://93digital.co.uk/blog/wordpress-from-

cms-to-digital-experience-platform-dxp/.

PR Newswire. (2019, June 24). The 5 best website elements that more than 90% of

consumers want - Plus, the top 25 web design agencies of 2019. PR Newswire US.

https://www.prweb.com/releases/the_5_best_website_elements_that_more_than_90_of_co

nsumers_want_plus_the_top_25_web_design_agencies_of_2019/prweb16396073.htm

Schäferhoff, N. (2021, July 14). How to create & design a custom navigation menu. Elementor.

https://elementor.com/blog/custom-navigation-menu/.

Tanaz. (2020, October 29). Elementor 3.0: Things you need to know about new design system &

more. WPDeveloper. https://wpdeveloper.net/elementor-3-0-design-system/.

Teixeira, F. (2021, January 18). A comprehensive list of UX design methods & deliverables

(2021). UX Collective. Retrieved September 25, 2021, from https://uxdesign.cc/a-

comprehensive-list-of-ux-design-methods-deliverables-2021-2feb3e70e168.

Versoza, K. (2021, January 26). Elementor vs every page builder out there. WpBuilt.

https://wpbuilt.co/elementor-vs-every-page-builder/.

WordPress vs Joomla vs Drupal - Which one is better? (2021). (2021, July 27). WPBeginner.

https://www.wpbeginner.com/opinion/wordpress-vs-joomla-vs-drupal-which-one-is-

better/.

WP-DXP. (2021, June 14). Filter Digital. Retrieved September 25, 2021, from https://filter-

digital.com/about/wp-dxp/.

Appendix(

Websites built using the method herein:

1. Family Assistance Program – http://www.familyassist.org/

2. Six Figure Design – http://www.sixfiguredesign.com/