Blog Archives | Ashok Luhar | MA UXUI https://mauxui.com/category/blog/ Sr. UX/UI Designer, Front-end Coder & WordPress Developer Sun, 01 Feb 2026 12:47:20 +0000 en-GB hourly 1 https://mauxui.com/wp-content/uploads/2022/07/MA-UIUX-Favicon.svg Blog Archives | Ashok Luhar | MA UXUI https://mauxui.com/category/blog/ 32 32 How I Crafted a Tailor-Made WordPress Site with Custom Code – a Step-by-Step Guide https://mauxui.com/how-i-crafted-a-tailor-made-wordpress-site-with-custom-code-step-by-step-guide/ Sun, 30 Mar 2025 11:33:14 +0000 https://mauxui.com/?p=5784 A step-by-step guide to developing a custom coded WordPress website using Underscore WordPress core theme

The post How I Crafted a Tailor-Made WordPress Site with Custom Code – a Step-by-Step Guide appeared first on Ashok Luhar | MA UXUI.

]]>

How I Crafted a Tailor-Made WordPress Site with Custom Code – a Step-by-Step Guide

Step - 1

Reviewing the Design File

I started by reviewing the Figma file in detail to understand the design and layout. I noted down all the necessary steps for development. From there, I exported images in JPG and PNG formats and icons in SVG format as per the project’s requirements.

Step - 2

Setting Up the Foundation

Next, I downloaded the ‘Underscores Starter Theme‘ to serve as the foundation of the WordPress theme. I personalized it to fit the project and set up the basic structure of the theme.

Step - 3

Enhancing WordPress with Plugins

To optimize the development process, I installed the ‘Admin Site Enhancement (ASE)‘ plugin. This allowed me to enable and disable core WordPress functions, such as disabling comments for page, media; Gutenberg blocks for custom taxonomy; REST API in case we don’t use and enabling maintenance mode.

Step - 4

Building the Header and Footer

I started coding with the Header and Footer sections, ensuring they were functional and user-friendly. For easy maintenance, I created widget areas, and used core widgets with small HTML blocks to avoid unnecessary functions.

Step - 5

Customizing with ACF Plugin

To manage dynamic content, I installed the ‘ACF (Advanced Custom Fields)‘ plugin. Using this plugin, I created custom fields tailored to the home page and landing page content.

Step - 6

Adding Main Functionalities

I created a Custom Post Type and Custom Taxonomy to handle specific content needs. Additionally, I configured custom fields in ACF, added dummy data, and developed custom templates for the custom post type’s list and detail pages.

Step - 7

Ensuring Responsiveness

To make the website responsive, I applied proper CSS styles and included media queries for tablet and mobile versions.

Step - 8

Testing and Migration

Once development was complete, I thoroughly tested the website for performance, compatibility, and functionality. After ensuring everything worked perfectly, I migrated the website to the client’s server.

This is how I developed a custom-coded WordPress website using the Underscores base theme and the ACF plugin. Each step was crucial in ensuring a high-quality, tailored solution for the project.

The post How I Crafted a Tailor-Made WordPress Site with Custom Code – a Step-by-Step Guide appeared first on Ashok Luhar | MA UXUI.

]]> Figma to Functional WordPress Website with Elementor https://mauxui.com/figma-to-functional-wordpress-website-with-elementor/ Sat, 06 Jan 2024 11:43:21 +0000 https://mauxui.com/?p=3938 Figma design to functional website in WordPress by using Elementor with minimum plugins.

The post Figma to Functional WordPress Website with Elementor appeared first on Ashok Luhar | MA UXUI.

]]>

Figma to Functional WordPress Website with Elementor

Figma design to functional website in WordPress by using Elementor with minimum plugins.

COMPARISION

A pixel-perfect design conversion from Figma design to WordPress.

Figma Screenshot

Website Screenshot

Figma - Home page full-screenshot

Website - Home page full-screenshot

What is difference?

The only difference is in line-height. In Figma design the line-height varying in headings. I used 1.2em (120%) in headings and 1.6em (160%) in body text for better readability.

SCREENSHOTS FROM LIVE SITE

Home
About
Product
CTA
Blog
News
Blog detail
Career
Other pages

Desktop & Mobile Menu

The desktop megamenu created with Elementor’s menu (megamenu) element. But the mobile menu designed in Figma was not possible by using Elementor’s menu (Mega menu element). I simply create a custom mobile menu by adding some jQuery and custom CSS code.

PROCESS

Plan:
Reviewed all the pages of Figma file. Global Sections: Created a list of the repetitive sections which have been placed in different pages without any change. Global Layouts: Created a list of the sections which had been similar layout, but the content is different. Headings: Created a list of all titles according to heading tags (h1 to h5). Listed down color-pallet.

Theming:
Started theme by adding global colors; set typography; create headings, buttons and form fields; set typography scale for responsiveness. Started implementation of header and footer. Completed global sections first i.e. CTA, testimonials, mega-menu etc.; and global layouts. Exported all icons and graphics to SVG; and images to webp format for quality result and good performance.

Implementation:
Started implementation of home page design according to desktop, tablet and mobile device. Created and implemented product pages design. Created and implemented other pages and posts pages design i.e. blogs, events, webinars, case studies and use cases.

Testing:
Tested all pages in actual devices i.e. tablet, iPad, android phone, iPhone etc. Submitted to client for Q.A. to check performance.

Finalize:
Completed the changes after received insights from Q.A. team and migrate the website to live.

The post Figma to Functional WordPress Website with Elementor appeared first on Ashok Luhar | MA UXUI.

]]>