If you’ve ever followed a web design or development tutorial, you might have seen instructions asking you to use commands like npm install or git clone. These instructions are for the Command Line Interface (CLI), a tool we use to instruct the computer to carry out specific actions, typically by entering commands in Terminal or Command Prompt.
For web designers, using Terminal or Command Prompt might not seem the easiest, especially if you’re more accustomed to graphical interfaces. However, command line tools such as Yeoman, Bower, and Google Web Starter Kitrely on command line inputs.
If the thought of typing commands seems daunting, this article will introduce you to a few simple command lines to get you started and make you more comfortable with using them.
Let’s discuss Terminal and Command Prompt first. These applications grant you access to the operating system’s heart. It’s crucial to understand that once you make a change here, it cannot be undone. Therefore, any actions taken in these environments must be approached with care – only proceed if you’re confident in what you’re doing.
Another key point is the inability to use the mouse within Terminal or Command Prompt. This means you can’t search or select text using the mouse. All interactions are through the keyboard, making keyboard shortcuts invaluable.
For Windows users, it’s important to note that some commands might not be available. In such cases, I recommend using tools like Cygwin, UnxUtils, or Windows Services for UNIX Version 3.5 to bring UNIX utilities to Windows. Now, get ready to dive in with enthusiasm.
Changing Directories
Navigating through directories is a common task. Both Terminal and Command Prompt utilize the cd command for changing your current directory to a specified destination. For example, to move to a folder named foo, you would type:
cd foo
The current directory is displayed before the blinking cursor, as shown below.
To dive into a sub-directory of foo, you can do it in one step:
cd foo/sub-folder
If you need to go back to the previous directory or move up one level from your current directory, simply type:
The mkdir command is handy when you need to create a new directory. To make a directory named foo, you would use the following command:
mkdir foo
Creating multiple directories simultaneously is also straightforward. The next command will create three directories named foo, hello, and world in one go:
mkdir foo hello world
This mkdir command works in both Terminal and Command Prompt.
One of my most frequently used commands is the List Directory command, also known as ls. This command allows you to view all the contents within a directory.
By specifying a folder name before the ls command, you can list the contents of that particular folder, as shown below:
To get more details about the contents, such as creation date, permissions, and owners, use ls -l or ll.
Note that the ls command works in UNIX shells, meaning it’s suitable for Ubuntu and OS X but not for Windows. For Windows, you’ll need to use the dir command instead.
Symbolic links, or Symlinks, function like shortcut folders, yet the system recognizes them as actual folders. A favorite use case of mine for Symlinks is to sync folders from /Dropbox to my /Sites directory, where I store all my web development projects.
Here’s how you specify the command:
ln -s /source /destination
To link your /Dropbox to the /Sites folder, execute:
If you need to set up a new VirtualHost with a new domain name, you’ll likely need to edit the hosts file that maps domain names to IP addresses. The fastest way to do this is by using the following command:
sudo nano /etc/hosts
Sublime Text Command Line Interface
Sublime Text includes a command line interface (CLI), subl, allowing operation through Terminal and Command Prompt. Initially, the Terminal won’t recognize the subl command.
To integrate Sublime Text CLI, execute this command:
Mastering these command lines and starting with the basics will reveal that commands can be more efficient than graphical interfaces for certain tasks. Hopefully, this guide helps you begin your journey.
Further Reading: Command Line Mastery
Explore more through these posts, which teach you various tasks using command lines:
The number of design resources and tools available on the market is increasing at a pace faster than one can count to 100. This makes it increasingly challenging to find the tools or resources you want and need to stay ahead of the competition.
To lend a helping hand, we’ve evaluated numerous free and premium resources and tools for designers and small business owners.
The variety of web design tools and resources featured in our list includes:
Website Builders – which you can use to quickly and easily create landing pages and multi-page websites, all without the frustration of hitting your head against the desk.
WordPress Themes – which allow you to build complex websites and e-stores known for their high conversion rates.
WordPress Plugins – which enable the incorporation of otherwise challenging-to-develop functionalities, helping your websites stand out.
Vector Illustrations – which can transform a dull website into a captivating one.
Font Identifiers – which help you identify appealing fonts used by brands like Nike or Hilton, allowing you to incorporate them into your own web projects.
More than half of the web design resources and tools listed here are either free or offer a free version or trial. They are presented in order of discussion:
What Do These 15 Best Web Design Tools & Resources for Designers and Small Businesses Have in Common?
They Exude Quality. The moment you install or download and begin using any of them, you’ll notice there’s something distinctively premium about them. This “special” quality is reflected in how effortless each interaction with the tool or resource feels.
They Are User-Friendly. From installation to downloading, using, or editing, all interactions and features are thoughtfully placed and designed.
They Deliver Value. Utilizing these tools will enable you to complete web design projects more quickly and enhance the aesthetics of your deliverables. By incorporating them into your workflow, you’re likely to secure higher-paying projects.
The 15 Best Web Design Tools & Resources for Designers and Small Business Owners
To simplify your search, we have meticulously compiled essential information about these products, including key features, ratings, user reviews, and access to immediate customer support resources.
In Brief: Brizy is the best and most intuitive website builder for any agency or designer in the hunt for a white label option.
Click on the video to get a firsthand look at one of Brizy’s most popular templates in action.
Notably, its standout feature is the white label option that allows your clients to build websites using a builder that you own, which prominently showcases your brand.
There’s much more to appreciate about Brizy. Highlights include:
Brizy’s intuitiveness: each tool or option is readily available precisely when and where you need it.
The capability to directly edit text, images, or any content in place.
The elimination of the need to deal with content creation through a disjointed sidebar, a common inconvenience with many other builders.
Brizy Builder also presents its users with a commendable array of demo/template/prebuilt websites. The “Natural Beauty” pre-built website, for instance, is attractive and inspirational, offering a robust foundation for websites aimed at beauty parlors, spas, and other service-oriented businesses.
Agencies and resellers will find value in the marketing integrations, reseller client management, and billing features.
Rating: 4.6/5 on Trustpilot
User Review:“I’ve been using Brizy for a while now, and their support team is outstanding. Quick, knowledgeable, and always ready to help. They’ve made our website design experience a breeze. I highly recommend Brizy for their exceptional support and user-friendly platform. Thank you, Brizy team!”
Types of Instant Support Materials: Support manual and YouTube videos
In Brief: The #1 Free Scheduling Online Software for Service-Oriented Businesses.
Click on the video for a firsthand look at one of Trafft’s most popular templates in action.
A highly valued feature among website building or enhancement tools is their adaptability; in this instance, the capability to operate in multiple languages. 70% of Trafft users highlight its powerful multilingual notifications system as the top feature.
The extensive library of prebuilt websites significantly contributes to the enjoyable experience of working with Trafft. The Trafft Barbershop template demonstrates the seamless integration of scheduling and marketing.
Exploring Trafft’s capabilities is a rewarding journey. Key features you’ll appreciate when you start using Trafft include:
The backend and frontend interface’s ease of use and innovative design.
The strength of the customization options available.
The versatility of the white label option.
The white label option is particularly advantageous for digital design agencies and web developers servicing clients. Another key user group includes individuals who require immediate confirmation for their appointments and schedules.
Rating: 5 stars on Captera
User Review:“Overall, Trafft makes a very good impression. For those looking to manage appointments within their business, Trafft is an indispensable tool. The UX and UI impressed us with their intuitiveness.”
Types of Instant Support Materials: Customer Support via Trafft’s ticketing system, Support manual, YouTube videos, email, and social media.
In Brief: WpDataTables is the best WordPress plugin for businesses and individuals tasked with managing complex data to create tables and charts.
Click on the video for a firsthand look at one of WpDataTables’ most popular uses in action.
The WordPress table plugin’s standout feature, its Multiple Database Connections, marks a significant advance in data management, transforming every table into a comprehensive data hub that can gather information from various databases and servers.
Aside from this, WpDataTables offers numerous features that facilitate the creation of custom, responsive, and easily editable tables and charts, streamlining data management processes. For instance, a financial team could effectively utilize the responsive top mutual fund template.
With WpDataTables, you will quickly realize you have access to:
A rich assortment of useful and practical functionalities within an intuitive interface.
Unmatched data management capabilities.
The expertise to adeptly handle complex data structures.
WpDataTables serves a broad spectrum of client needs effectively.
Separate database connections for engaging with specialized database systems.
Chart engines for visualizing data trends and comparisons, useful in marketing, finance, and environmental contexts.
Rating: 4.5/5 on WordPress.org
User Review:“My company deals with A LOT of data and spreadsheets. These spreadsheets act as master files shared among various departments, and I needed a way to link these spreadsheets with the data on WordPress. WP Data Tables provided THE PERFECT SOLUTION for bridging this gap.”
Types of Instant Support Materials: Support manual, YouTube videos, and the Facebook community.
In Brief: LayerSlider is the best WordPress slider plugin for creating websites with amazing animations. It is perfect for anyone who wants to save time and effort.
Click on the video for a firsthand look at one of LayerSlider’s most popular templates in action.
It’s common for a newly added tool or feature to quickly become a favorite among users.
The scroll effect in LayerSlider has become the plugin’s standout feature, prominently featured in the most recently released templates, including full-size landing pages and entire websites. Experience the Parallax City template to see the potential of these designs.
The versatility of LayerSlider contributes to its popularity, enabling the creation of simple sliders or slideshows as well as the integration of complex animated content.
You will appreciate:
The customizable interface, making LayerSlider feel like it was tailored specifically for you.
The access to connected online services, providing a plethora of visual content creation possibilities.
The Project Editor, simplifying the use of this plugin significantly.
LayerSlider particularly excels in creating content for marketing, offering astonishing effects for engaging customers through popups and banners.
User Review:“Great quality and importantly – great support!”
Types of Instant Support Materials: Manual, integrated help in Project Editor, ticket system, and questions or concerns sent via email
In Brief: Amelia is the ideal WordPress plugin for agencies and service-oriented businesses looking for an automated booking website.
Click on the video for a firsthand look at one of Amelia’s most popular templates in action.
Amelia’s automated notification system stands out as its prime feature. Users appreciate the simplicity with which they can categorize appointments as pending, approved, cancelled, rejected, or rescheduled. Additionally, sending birthday greetings or notices for upcoming events helps enhance client engagement and loyalty.
Amelia offers a variety of templates that are easily customizable. The massage therapist template, for instance, exemplifies a stylish and contemporary design.
Engaging with Amelia, you will notice:
The seamless navigation and innovative design of both the frontend and backend interfaces, highlighting its functionality and user-friendly approach.
The extensive customization options Amelia provides, along with its straightforward pricing plans.
The Amelia plugin is beneficial for any service-oriented business, including ticket sales agencies and event organizers. Developers and programming agencies will also find value in incorporating Amelia into their design toolsets.
Rating: 4.8 on Capterra
User Review:“Easy to learn, comprehensive (recurrent bookings, group bookings…), customization options for colors, fonts, various forms available, integrates well with Elementor. Ideal for the end user: logical, simple, includes customer accounts. Support is efficient and responsive.”
Types of Instant Support Materials: YouTube videos, Discord Group, and Support Manual
In Brief: Uncode is the #1 multiuse WordPress and WooCommerce theme for designers and creative agencies in search of an excellent solution for any project.
Click on the video for a firsthand look at one of Uncode’s most popular templates in action.
The extensive range of website building tools and options offered by this creative WooCommerce theme certainly contributes to its popularity. However, most users highlight the demo library as its standout feature. The demos exhibit remarkable attention to detail and can serve as significant sources of inspiration.
Choosing a single best feature would be difficult, so it’s best not to attempt it. The Portfolio Video Cover template from Uncode is among its most downloaded. Consider what possibilities it could open up for you.
You will quickly appreciate Uncode’s customization capabilities, the value of its demos and wireframes, and the exceptional customer support provided.
Uncode’s main user base includes:
Shop business owners who praise Uncode’s innovative WooCommerce features.
Agencies and freelancers who value the advanced customization options available.
Rating: 4.89/5
User Review:“Out of all the themes I’ve used, Uncode surpasses them all, in my opinion, and the latest update is simply astonishing! It offers the flexibility to create any design or type of site. It’s an exceptionally robust theme with numerous options and settings. I’m extremely satisfied with it! A heartfelt thanks!”
Types of Instant Support Materials: Support manual, YouTube videos, Facebook groups
In Brief: Slider Revolution is the best WordPress plugin for anyone looking to create jaw-dropping animated sliders.
Click on the video for a firsthand look at one of Slider Revolution’s most popular templates in action.
Slider Revolution’s premier feature is its capability to create visually stunning animated effects for WordPress sites without the need for additional effort or coding skills.
But the Slider Revolution plugin’s utility extends beyond just sliders. It allows you to:
Design home pages that immediately capture the attention of visitors.
Create visually appealing portfolios that demand a closer look.
Develop striking website sections that stand out.
If you’re seeking inspiration, explore Slider Revolution’s extensive library of over 250 templates. Many feature unique special effects not found on other websites and are fully optimized for various screen sizes. For instance, the Generative AI WordPress template is nothing short of revolutionary.
Slider Revolution is ideally suited for individual web designers, e-commerce sites, and small agencies.
Rating: 4.6/5 on Trustpilot
User Review:“Slider Revolution 6 is an incredibly fun tool to use, delivering exciting and fantastic looking animations to any site. Its versatility makes Slider Revolution an essential and powerful addition to any WordPress site!”
Types of Instant Support Materials: Support manual and YouTube videos
In Brief: The best resource for designers looking for premier illustrations that feature exceptional attention to detail.
Click on the video for a firsthand look at one of GetIllustrations’ most popular icons in action.
Is GetIllustrations’ top feature its collection of 21,500 vector illustrations, the free updates for one year, or the addition of new illustration packs every week? In fact, it’s the combination of all three.
With over 40 categories to explore, each filled with dozens, hundreds, and even up to 1,200 captivating illustrations, finding the perfect one for your needs is effortlessly easy. The illustrations are so well organized that browsing through them is a breeze.
Designed to cater to a wide range of clients, from students to businesses and developers, the collection includes pencil and basic ink illustrations, several 3D illustration categories, and specific themes like fitness, logistics, and eco illustrations, among others.
Exclusive to GetIllustrations, these illustrations enable users to craft truly unique projects.
Packs are available for purchase, with the Essential Illustrations pack being the most comprehensive. It includes Scenes, Avatars, and Elements, boasting a vast collection of one-color vector illustrations renowned for their depth and timeless appeal.
User Review:“Great product, and I appreciate the alternative to relying solely on Adobe stock for my app’s illustrations. Really impressed with the range of illustrations you offer!”
In Brief: The best online AI tool for generating and downloading full page websites through the use of prompt commands.
The Mobirise AI website builder’s premier feature allows for the generation of a website from a single prompt.
Provide a detailed description of your envisioned website, your offerings, and your target audience. The AI website builder leverages your input and intelligent algorithms to automatically create customized, aesthetically pleasing websites. This makes it an excellent choice for those without technical expertise or anyone in search of straightforward, efficient design solutions.
So advanced is Mobirise AI that it can understand instructions in Swahili, showcasing its impressive language capabilities.
Once the AI has generated a basic layout, you can use prompts to select a style, color scheme, typography, and more. Pre-generated text and content can also be edited to meet your specific requirements without the need for coding.
Important: The AI facilitates website creation but does not claim ownership of the final product.
Concerned about optimization for Google or mobile devices? Mobirise AI addresses all such concerns as well.
User Review:“Your team has excelled here! With just a brief paragraph from me, the complete concept of the site was grasped. What was generated, including images and text, perfectly aligned with our brand’s upscale messaging and class of images. Everything was executed exceptionally well.”
Types of Instant Support Materials: Support manual, YouTube videos, and the User Forum
In Brief: The most accurate font identifier available with no cost for searching.
There is a 90%+ chance that WhatFontIs will identify any free or licensed font you wish to find.
No other system matches this level of accuracy. WhatFontIs boasts a database of nearly 1 million free and commercial fonts, which is at least five times more than any other font identifier tool.
Users turn to WhatFontIs for various reasons, whether it’s to identify a specific font requested by a client or simply because they’ve encountered an appealing font and wish to know its name and where to find it. The search can be conducted regardless of the font’s publisher, producer, or foundry.
Just drag, drop, and upload a clear font image.
An AI-powered search engine swiftly identifies the font along with over 50 similar options.
The results will indicate where to download the free font and where to purchase a commercial one.
For the tool to accurately identify your font, the submitted image must be of high quality, and letters in cursive fonts should be separated. If these conditions are not met, the tool may not correctly identify the font.
User Review:“I found my font within seconds. Many thanks.”
In Brief: Blocksy is the #1 free WordPress theme for building beautiful, lightweight websites in 2024.
Click on the video for a firsthand look at one of Blocksy’s most popular templates in action.
Blocksy’s leading feature is evenly split among its user-friendly header and footer builder, WooCommerce integration with its extensive features, Gutenberg compatibility, and the advanced hooks system equipped with display conditions.
In other words, there’s hardly anything that you won’t find utterly impressive. (The high customer rating supports this assertion).
Moreover, Blocksy is available for free!
You’ll quickly come to realize that Blocksy:
Leverages the latest web technologies.
Delivers exceptional performance.
Seamlessly integrates with the most popular plugins.
Blocksy is versatile enough to create any type of website across any niche.
The demos of Blocksy are not just visually appealing but also highly useful for website building. The Daily News creative demo ranks among the top 5 most utilized.
Rating: 5/5 on WordPress.org
User Review:“An exceptional theme supported by a world-class customer service team! The responsiveness and helpfulness of the customer service team make this the best WordPress theme I’ve ever used. 🚀 With a wealth of features, I highly recommend this theme.”
Types of Instant Support Materials: Support manual, YouTube videos, and an easily navigable documentation section
In Brief: Total is the #1 WordPress theme for web designers and developers who want the flexibility to be able to design from scratch.
Click on the video for a firsthand look at one of Total’s most popular templates in action.
Total’s versatility is undoubtedly its standout feature, making it a comprehensive toolkit of design options, which justifies its name perfectly. Additionally, its exceptional support distinguishes Total from many other themes.
Engaging with Total will quickly reveal:
That Total is optimized for speed, with possibilities for further optimization to enhance performance.
An abundance of settings, numerous page builder element options, a font manager, custom post types, and more.
Support for dynamic templates for posts and archives.
The prebuilt sites offered by Total are of superior quality. Bolt, known for its minimalistic design, is among the top 5 most downloaded and utilized, adaptable to a variety of purposes.
Total is designed to meet the needs of beginners, developers, DIY enthusiasts, and essentially anyone in need of a flexible and powerful website solution.
Rating: 4.86/5
User Review:“I have utilized this theme across multiple sites, and the developer consistently keeps it updated and in excellent condition. Highly recommended!”
Types of Instant Support Materials: Support Manual
In Brief: Essential Grid is the best WordPress Gallery Plugin for designers and businesses who want to create a breathtaking gallery.
Click on the video for a firsthand look at one of Essential Grid’s most popular grid skins in action.
The hallmark of Essential Grid, its array of over 50 unique grid skins, is undoubtedly its standout feature.
This plugin offers significant value, as few web designers or developers would choose to create a gallery from scratch when such alternatives are available.
Using an Essential Grid gallery skin, you can easily achieve the desired gallery layout, and you might even find yourself enamored with a layout you hadn’t anticipated. For instance, the Funky Instagram cobbled layout social media grid might present an entirely new perspective on gallery design.
You’ll quickly appreciate Essential Grid’s ability to save time and effectively organize content streams.
Rating: 4.7/5 on Trustpilot
User Review:“An excellent plugin, operates flawlessly. Had some questions that needed answering, and the support team was incredibly friendly and helpful, not stopping until all issues were resolved and I was fully satisfied.”
Types of Instant Support Materials: Support manual and YouTube videos
In Brief: WoodMart is the ideal WooCommerce theme for designing niche ecommerce websites.
Click on the video for a firsthand look at one of WoodMart’s most popular templates in action.
A quick visit to the WoodMart website immediately highlights its standout feature: the custom layouts for shop, cart, and checkout pages are so impressively designed and realistic that you might momentarily forget you’re viewing a demo and attempt to place an order.
WoodMart is distinguished by numerous appealing aspects:
A vast array of options available for customization.
The ease with which layouts can be customized to add necessary branding, despite their near-perfect initial design.
The Theme Settings Search function and performance optimization features significantly save time.
Options like “Frequently Bought Together,” “Dynamic Discounts,” and social media integrations are highly favored by store owners and marketers.
Additionally, WoodMart offers a White Label option for further customization.
Identifying the most popular demos can be challenging, as many enjoy widespread usage. However, the Event Agency demo stands out as one of the top 5 most downloaded for clear reasons.
Rating: 4.93/5
User Review:“An excellent theme that’s easy to use and optimized for page speed insights. I’m very satisfied with this purchase.”
Types of Instant Support Materials: Support Manual and YouTube Videos
In Brief: XStore is the best WooCommerce theme for anyone looking to easily build a high-converting online store.
Click on the video for a firsthand look at one of XStore’s most popular pre-built websites in action.
XStore is clearly designed for shop owners and those aspiring to be, with its range of ready-made stores (pre-built websites) having long been a popular feature. However, the newly introduced selection of Sales Booster features has rapidly become the most celebrated aspect.
You’ll quickly come to value the Builders Panel and the intuitive XStore Control Panel, both of which offer extensive flexibility for building and customizing your store.
The immediate advantage provided by the pre-built websites is evident from the start. Opting for a pre-built website like the XStore Grocery Store, you’ll see how swiftly you can have an e-store operational.
Beyond the ready-to-use layouts, XStore grants you immediate access to the Single Product Builder, Checkout Builder, Cart Builder, Archive Products Builder, and 404 Page Builder, enriching your site-building toolkit.
Rating: 4.87/5
User Review:“For those seeking a WordPress theme that perfectly blends style with functionality, XStore is the answer. Its elegant design, straightforward customization options, and flawless WooCommerce integration make it a standout in the theme market.”
Types of Instant Support Materials: Support Manual and YouTube Videos
The best web design tools & resources all share several things in common.
They’re easy to use and set up.
They give a finished website a competitive edge in terms of both design and functionality.
They have excellent customer support.
Many of them have a free version, or as a minimum come with a lot of information so that you won’t suspect that you bought a completely different product from the one they described.
Are you looking to create a WordPress-powered website that serves as a classified platform? If so, you’re in the right place. This article showcases more than 20 WordPress themes, carefully selected to cater to a variety of classified site needs. Whether you’re a budding entrepreneur, a small business owner, or simply someone keen on setting up an efficient online classifieds portal, these themes are just what you need.
Our list includes both free and premium options, ensuring there’s something for every budget and requirement. Each theme is designed with user-friendliness in mind, making your site not only visually appealing but also easy to navigate and use.
Dive in and find the ideal WordPress theme to launch or enhance your classified website.
Best Listing is designed for professional directory websites. It offers a straightforward directory builder, making it easy to manage different types of directories. You’ll find features like a multi-directory system, unlimited custom fields, and ranked featured listings. Importing data is simple with CSV import capabilities.
Additionally, it includes classified ads functionality, perfect for starting a classified listing business. The responsive design ensures your site looks great on all devices, making it a great choice for launching a directory listing business.
The Classified Ads theme is notable for its striking red, multi-purpose HTML5 layout. It’s effective for classified ad websites, providing a responsive 2-column layout. Customize it with your own ad button text, header, and background https://assets.hongkiat.com/uploads/classified-wordpress-themes/colors.
The premium version includes PayPal integration for paid ads, Adsense JavaScript code, customizable user form fields, and various payment gateways. It’s browser-friendly and offers a user-friendly platform for classified ad listings.
For those looking to build a diverse range of sites, from Yellow Pages to real estate agencies, the Classified Ads Directory Theme is a perfect choice. It includes Open Street Maps support, making it ideal for real estate and location-based services. Check out its versatility in the demo at wpdirectorykit.com.
This theme serves various purposes, whether for realtors, brokers, hotels, or rental services, offering a comprehensive solution for directory-based websites.
Classified Listings is dynamic, suitable for a wide range of online classified ads platforms. Whether for real estate, jobs, or products, it offers an easy-to-use interface for posting and searching ads. The front-end submission system is user-friendly, perfect for a community-driven marketplace.
Its advanced search and filtering help users find listings easily. Customizable templates provide a unique look for each listing, and monetization options are available for revenue generation. It’s responsive, ensuring a smooth experience across devices.
CLClassified reinvents the classified ad website experience. Suitable for both beginners and experienced users, it focuses on the essentials of a classified ads site. This theme supports multiple revenue streams, including ad promotions and a store facility. It offers extensive customization, with Gutenberg compatibility for easy editing and unlimited color options.
Features like the WordPress Live Customizer and One-Click Demo Importer make setup a breeze. User-friendly elements like Ajax filters and autocomplete search enhance the overall experience. This fully responsive, mobile-friendly theme is also cross-browser compatible and supports unlimited custom fields.
Listdomer is tailored for listing, directory, and classified websites, adaptable to various industries like events and real estate. Integrated with the Listdom plugin, it offers diverse views such as grid, list, and masonry.
This theme is easy to use, requiring no technical knowledge, and features a powerful, customizable search form. Designing pages is effortless with Elementor’s drag-and-drop functionality. Its mobile compatibility and SEO-friendly design make it a top performer in search engine rankings.
ListingHive serves as a multipurpose theme for any directory or listing website. Ideal for a business directory, job board, or a classifieds site, its flexibility accommodates various listing types.
The theme’s user-friendly design simplifies site building and management, making it an efficient choice for diverse projects.
NexProperty is designed for real estate directory listings, suitable for agencies, realtors, and classified ads. It’s tailored for Elementor, allowing visual customization across the board.
The theme includes features for managing listings, categories, and fields, multimedia integration, and messaging support. Fully compatible with Elementor, it offers a visually appealing, customizable experience. Open Street Maps support enhances its real estate listing capabilities. With demo data for real estate and car dealerships, NexProperty provides a complete solution for classified directory or listing businesses.
TerraClasic is the first free theme for the TerraClassifieds plugin, ideal for classified ads. It emphasizes user-friendly ad posting and uses a classic contact form for advertiser communication. Future updates are set to include various payment methods and auction features.
This theme is a great starting point for those new to classified ads, offering a straightforward, functional solution.
AdForest distinguishes itself as a premium Classified Ads WordPress theme with a modern front-end UI. It offers various color options and WordPress functionalities, including Google Map integration.
Built for the modern era, AdForest is quick to set up and easy to customize. Constructed with HTML5, CSS3, Bootstrap 5, and JQuery 3.1, it promises a robust and responsive design. Extensive documentation is provided for easy setup.
AdForest is designed to meet all classified ad posting needs, making it an excellent choice for those aiming to elevate their classified business.
Adifier transforms the classified ads marketplace with its comprehensive and user-focused design. It’s built from the ground up to provide essential features, such as multiple ad types, advanced custom fields, and various monetization options.
Users can choose from a range of payment methods, enjoy a custom messaging and reviews system, and participate in auctions. A standout feature is the ad comparison based on custom fields, elevating the user experience.
Adifier also integrates social login and a user dashboard, making it a complete solution for a sophisticated classified ads marketplace.
For car dealership businesses, Avtorai emerges as the top pick. Tailored specifically for Car Dealer, Dealership, Car Listing, Classified, and Car Rental sites, this theme is responsive, retina-ready, and built on Bootstrap 4.
With features like 4 Home Page layouts, WPBakery Page Builder, and WooCommerce readiness, it’s highly functional. Avtorai supports one-click installation, touch-enabled carousels, Slider Revolution, and includes a variety of listing features like paid listings, a Trim Cars Database, and multiple layout options.
The frontend dashboard, shortcode elements, and compatibility with Google fonts, WPML, and Contact Form 7, make it versatile for car dealership websites.
Buyent stands as a fast and modern option for classified ads and directory websites. Its integration with the Elementor page builder makes homepage customization straightforward.
The theme shines with its monetization features, such as selling ads and ad banner slots. For a classified business looking to stand out, Buyent offers a user-friendly design and efficient monetization capabilities, making it an excellent choice.
CarSpot, a robust theme for car dealerships, caters to all sizes of automotive businesses. It includes key ad posting features, a modern gallery, a review system, and a car comparison feature.
With 6 premade demos, a one-click demo importer, and various customization options, CarSpot is ideal for creating a feature-rich website. Its exceptional vehicle search functionality and ad features are designed to boost business sales, making it a comprehensive choice for anyone in the car dealership industry seeking a strong online presence.
Clasifico offers a clean and modern solution for classified advertising and online listing sites. It’s highly responsive and customizable, featuring three homepage layouts, two header styles, and over 15 inner page variations. This flexibility allows for extensive personalization and design choices, making Clasifico a versatile choice for various advertising or online listing sites.
Classiads stands as a top choice in the classified ads website arena, thanks to its status as the best-selling theme on ThemeForest. Renowned for its flexibility and feature-rich environment, it offers a user-friendly interface that makes it a reliable choice for building a classified ads platform.
Ideal for those seeking an efficient and trusted solution, Classiads is a standout in its category.
Turning to Classiera, this theme is known for its modern and responsive design, making it a popular choice for classified ads websites. It’s SEO optimized and offers a range of features including various ad types and pricing plans.
With its ability to cater to diverse classified ad needs, Classiera is a versatile and professional option for creating classified ads websites.
ClassifiedPro, using the CubeWP Framework, offers unique versatility with support for three specific post types: General items, Automotive, and Real Estate. This theme suits both local classified websites for cash transactions and pickup, and re-commerce sites that support online transactions and shipping.
ClassifiedPro stands out for its dual functionality, enhancing revenue generation opportunities and making it a top choice for diverse classified ad requirements.
The Classified Ads WordPress Theme provides a comprehensive solution for classified ads websites. It’s designed to be both beautiful and powerful, with a fast performance that aims to meet all classified ad needs. Their team offers free installation of the latest version and demo content within 48 hours, providing a hassle-free setup and making it an attractive option for a user-friendly classified ads website.
Classify is a responsive and SEO-optimized Classified Advertising Theme for WordPress. Developed using Bootstrap, HTML5, and CSS3, it promises a modern and durable framework.
It’s versatile, particularly excelling in Directory and Classified listings, and integrates social media logins for enhanced user convenience. With lifetime support, free installation, and updates, Classify is a sustainable choice for long-term website development.
Classima, created with creativity and modern design, is ideal for classified listing and directory websites. Optimized for Gutenberg and built with Elementor Page Builder, it offers customizable features like multiple homepages and header styles. It supports various ad layouts, Ajax filters, and autocompletion for searches, making it a comprehensive and user-friendly theme.
Classima is responsive, mobile-friendly, and supports multiple payment options, ensuring it meets the needs of classified ads websites.
Hourty Complex Tower, designed for real estate agents and agencies, excels in showcasing single properties and apartment complexes. Its design is both attractive and functional, meeting a variety of real estate needs such as rentals, sales, and commercial projects.
With four homepage demos, Hourty is efficient for creating quality real estate websites. Its comprehensive functionalities and plugins are time-savers, making it a versatile choice for realtors, investors, and construction companies.
Knowhere Pro is a diverse directory WordPress theme, ideal for a city portal or specialized directories like restaurants, cafes, hotels, job boards, or classified ads. Its flexibility caters to a range of directory styles, from property listings to job portals.
With its diverse page blocks and sections, Knowhere Pro offers a universal solution for any directory-based website.
Lisfinity focuses on classified ads, offering a streamlined platform specifically for this niche. Its design and functionality are tailored to enhance classified listings, providing a focused solution for this sector.
Motodeal is a multipurpose theme for vehicle dealerships. It suits a variety of vehicles, from luxury cars to bikes, trucks, yachts, and even agricultural vehicles. This theme’s versatile design makes it an excellent platform for any vehicle dealership, providing an attractive and functional website.
Trade stands out for its customization and flexibility. It incorporates the Visual Composer Drag & Drop Page Builder and an extensive options panel. Built on Bootstrap 3.x, it offers a responsive, mobile-first experience. With unlimited color choices, Google Fonts, and cross-browser compatibility, Trade is user-friendly. Its detailed documentation and child theme inclusion simplify customization.
Additionally, it’s translation ready and WPML compatible, appealing to a broad audience.
The shift towards mobile browsing has made responsive website design more important than ever. As most people now surf the web on their smartphones, websites must adapt seamlessly to different screen sizes to ensure a user-friendly experience. This is where responsive WordPress themes come into play, offering flexibility and optimal viewing across various devices.
To help you stay ahead in this mobile-first world, we’ve compiled an extensive list of 60 WordPress themes that excel in responsiveness. This collection features a mix of both free and paid options, providing choices for every need and budget. Whether you’re launching a business site, a creative portfolio, or an online store, our selection is designed to help your website not only look fantastic but also perform exceptionally on any device. Explore our carefully curated list and find the perfect responsive WordPress theme to boost your online presence.
Alpus stands out with its range of features, perfectly blending with drag & drop page builders and plugins. It excels with unique widgets like Animated Text and Price Table, and advanced tools including Contact Form 7. The theme offers versatile chart options and practical features like Sticky Navigation. Users appreciate its user-friendliness, support, and professional design.
Sydney transforms business websites with its free, customizable design. Its array of headers, colors, and typography aligns with any brand. The inclusion of Sydney Studio and layout options enhances its appeal. With Sydney Pro, you get extra WooCommerce features and more Elementor widgets. It’s recognized for its speed and flexibility.
Corporate Moderna, ideal for corporate websites, boasts a modern design and essential features like a portfolio filter. This Bootstrap template is also great for startups and blogs, offering Google fonts and a multi-column footer. Its built-in code editor simplifies customization, and users love its professional look and user-friendly interface.
Activello’s clean, minimal design is perfect for various blogs. Built with Bootstrap, it’s responsive and features custom widgets and a fullscreen slider. It supports major plugins and is SEO friendly. Its flexibility and speed make it a favorite among free WordPress themes.
Shapely’s one-page design is ideal for businesses and blogs. It offers flexibility with customizable homepage widgets and compatibility with major plugins. This theme suits a wide range of websites, boasting SEO optimization and a responsive design.
Blocksy, known for its performance with Gutenberg and WooCommerce, offers a blend of speed and innovative features. Its lightweight design, live preview customizations, and layout options cater to a wide range of projects. Its balance of aesthetics and functionality makes it a versatile choice.
The Free Minimalist WordPress Theme offers a simple, clean design for designers and bloggers. Its responsive design, custom background options, and SEO optimization make it ideal for those seeking simplicity. It supports major browsers and offers unlimited domain usage.
Hello Theme by Elementor is a blank canvas for design, tailored for Elementor’s tools. It’s fast, responsive, and SEO-friendly, supporting a variety of languages and widgets. This theme is perfect for any website, from portfolios to eCommerce, thanks to its fast loading time.
Futurio caters to speed and performance, ideal for professional websites. Its compatibility with Elementor and WooCommerce readiness enhances its appeal for online stores. It’s responsive, supporting various header styles and page builders, suitable for blogs to eCommerce sites.
Kadence stands out with its ultra-fast performance and flexibility. Its drag-and-drop header builder and global color palettes offer extensive customization. SEO-optimized and featuring a responsive design, it’s compatible with popular plugins, making it a top choice for diverse websites.
SociallyViral boosts social shares and viral traffic for WordPress sites. Built for engagement and speed, it’s optimized for social media and includes features that promote sharing on major platforms. With performance enhancements like lazy loading and advanced typography options, it’s a top choice for those seeking to amplify their social media impact and search rankings.
The Qi Theme impresses with its collection of 150 site demos, each rich in features and functionalities. Enhanced by Qi Addons, it offers an extensive range of Elementor widgets, ensuring high performance and reliability. From portfolios to eCommerce, it’s an all-encompassing theme that’s easy to use, even for beginners.
Suki caters to a variety of websites with its flexibility and lightweight design. With over 1000 customization options, it allows full control over design elements. Optimized for speed, Suki integrates seamlessly with page builders like Elementor and offers WooCommerce features, perfect for creating fast, beautiful websites.
Ample, ideal for businesses and portfolios, combines simplicity with performance. It loads swiftly, offers easy customization, and integrates effortlessly with WooCommerce and popular page builders. With its focus on speed and SEO, Ample is a go-to for businesses and portfolios seeking a blend of performance and ease of use.
ColorMag, tailored for news and magazine sites, offers extensive customization with Elementor compatibility. Known for its performance and SEO optimization, it provides unique post systems and multiple starter sites. It’s perfect for creating engaging, well-organized magazine-style websites.
Hestia brings a modern touch with its focus on material design. Offering a range of features from WooCommerce integration to page builder compatibility, it’s known for its speed and sleek design. Suitable for various website types, Hestia combines a full-width header and simple footer with efficient design tools.
Neve’s design focuses on speed and accessibility, offering a mobile-first approach. Compatible with popular page builders, it offers a range of customizable options for different website types. Optimized for speed, SEO, and mobile devices, Neve is a versatile choice for blogs to business sites.
CTLG, a free WordPress block theme, is perfect for lists, directories, and catalogs. Featuring pre-designed templates and style variations, it showcases content efficiently with a user-friendly interface. CTLG’s emphasis on ease of use and customization makes it ideal for managing content-heavy sites.
Heiwa presents a clean and elegant design, ideal for businesses with a visual focus. It offers sophisticated typography and minimalist design, with full site editing capabilities. Suitable for various website types, Heiwa ensures a clean, professional online presence.
Masu brings a modern, light aesthetic to blog themes, inspired by traditional Japanese culture. Ideal for beauty and lifestyle blogs, it features custom colors, block editor styles, and full site editing. Masu combines cultural elegance with modern web design, perfect for a range of blogging niches.
Remote combines a dark, minimal design with easy reading features, perfect for bloggers. It uses a sans-serif font against a dark background, ensuring comfort for readers. Standout elements include large post lists and bordered categories. Its key aspects are customizable colors, support for right-to-left languages, and comprehensive site editing capabilities.
Moving to Vivre, this theme takes inspiration from fashion and lifestyle magazines, offering a bold and refined look. It’s a perfect match for fashion-focused or modern lifestyle blogs, featuring a mix of heavy sans-serif and elegant serif fonts. Like Remote, it offers customizable colors, right-to-left language support, and full editing options.
Accelerate, in contrast, is a multipurpose theme, great for everything from portfolios to corporate sites. It offers a clean, premium look and supports various post formats. Notably, it allows customization of backgrounds, colors, headers, logos, and menus, and is e-commerce ready.
Appointment stands out for its responsiveness and suitability for diverse fields like law, travel, and art. Developed with Bootstrap 3, it ensures a mobile-friendly experience. Its features range from customizable headers and logos to various widgets, catering to a wide range of needs.
For those in the food industry, Auberge is an ideal choice. This retina-ready theme supports popular plugins like Beaver Builder and Jetpack, perfect for restaurants and recipe blogs. It offers a header slideshow, customizable colors, and layout options.
Awaken offers an elegant solution for magazine or news sites, with a magazine layout and widget areas. Its responsiveness, powered by Twitter Bootstrap, and its variety of post display styles make it a versatile choice. Additional features include social media integration and a YouTube video widget.
For personal branding, Biography Theme brings simplicity and elegance. It’s optimized for personal information display, with features like text sliders and various sections including Service and Testimonial. It’s also WooCommerce ready and responsive.
Clean Box offers a grid-based design that adapts smoothly to any screen size. Relying on HTML5 and CSS3, it enables real-time customization and is translation-ready. It’s an excellent choice for those prioritizing simplicity and cleanliness in design.
ColorMag excels in creating modern, elegant websites for news and magazines. With multiple starter demos and ad spaces, it’s tailored for news portals and online magazines. It’s SEO optimized, translation and RTL ready, and features a responsive design with custom widgets.
Customizr is designed to attract and engage, known for its simplicity and effectiveness on smartphones. Powering a vast number of sites, it’s highly rated for its user experience and is smartphone friendly.
Dispatch stands out with its fast-loading, retina-ready design, tailored for a wide array of sites from photography to business. It offers flexible layouts, including Full Width Stretched and Boxed, alongside HTML and image sliders, color customization, and various widgets. Notably, it’s SEO friendly and mobile-optimized.
For a versatile option, Esteem caters to businesses, portfolios, and blogs with its clean, responsive design. It supports custom features like headers and backgrounds and is compatible with essential plugins. Translation readiness is a key aspect, making it accessible for a global audience.
Evolve by Theme4Press appeals to those who value minimalism and flexibility. Built on Twitter Bootstrap and Kirki frameworks, it boasts varied header layouts, widget areas, and sliders. Key features include a custom front page builder, blog layouts, and WooCommerce support, ensuring both attractiveness and functionality.
Hueman excels in speed and mobile-friendliness, a top choice for blogs and magazines. With custom color options, a flexible header, and various post formats, it’s a theme that powers over 70,000 websites worldwide.
The I-Excel theme combines beauty and flexibility, ideal for creating visually appealing pages. It supports WooCommerce and is multilingual, including RTL languages, making it a versatile choice for diverse needs.
Interface offers a simple, flat design, perfect for business sites. Its numerous theme options, layouts, widget areas, and social icons cater to a variety of preferences. Compatibility with WooCommerce and bbPress adds to its versatility.
Jupiter X redefines power and speed in WordPress themes. Every aspect is customizable through a visual editor, using WordPress Customizer and Elementor. It’s ideal for all kinds of websites, offering ready-made templates and being developer-friendly.
For magazine-style sites, MH Magazine lite offers a free, responsive solution. It’s SEO friendly and suitable for a range of topics, with more features available in the premium version.
Modern focuses on accessibility, making it perfect for personal portfolios and blogs. Optimized for search engines and high-resolution displays, it supports multilingual setups and features like a featured posts slideshow.
Newsmag brings a clean, modern feel to magazine, news, and blog sites. Responsive and SEO-friendly, it adapts well to mobile devices and offers a range of customization options, including various blog page styles and a dynamic front page.
Olsen Light offers a stylish, elegant solution for bloggers in lifestyle, food, fashion, and more. Its clean, minimal design is responsive and SEO-friendly, with RTL language support. Key features include customizable blog layouts, social icons, and a footer Instagram carousel.
The Optimizer stands out as a versatile, multi-purpose theme with live customization. It provides full-width and boxed layouts, an image slider, and a variety of fonts and colors. Fully responsive and SEO-friendly, it supports WooCommerce and other popular plugins, prioritizing speed and clean code.
Owner is tailored for business use, offering a powerful yet easy-to-use design that adapts to all screen sizes. It’s highly customizable and well-suited for various business applications, backed by strong customer support.
Phlox caters to a wide range of websites, from blogs to WooCommerce storefronts. It’s a modern, lightweight theme offering professional portfolio features, 30 exclusive widgets, and compatibility with major page builders. It’s responsive, translation-ready, and GDPR compliant.
Receptar presents a unique, split-screen book-like design, ideal for blogs that emphasize imagery and typography. It supports Beaver Builder and Jetpack, is translation-ready, and features a front-page slideshow.
Rowling is a simple, elegant magazine theme with great typography and responsive design. Ideal for magazines, it supports gallery post formats and editor styles, focusing on simplicity and ease of use.
Smartline Lite is perfect for news, magazine websites, and blogs, offering a responsive design with bold colors. Its flexible, widgetized front page template allows for a magazine-styled homepage, adaptable to any device.
Tracks is a bold and minimalist theme, great for personal blogs, magazines, and photography websites. Features include a logo uploader, social media icons, and premium layouts. It’s WooCommerce compatible and suits both text and image-based content.
Vantage is a flexible multipurpose theme that works well with powerful plugins for responsive layouts and online selling. Fully responsive and retina ready, it’s suitable for business sites, portfolios, or online stores, and offers free forum support.
Vega offers a clean, minimal design for one-page business sites, personal blogs, or creative websites. Built on Bootstrap, it’s responsive with animated content, pre-built color choices, and basic WooCommerce support. It’s also suitable for multilanguage websites.
Vertex presents a sleek and modern look, ideal for portfolio, photography, and blog websites. Its design is clean and contemporary, perfect for highlighting images and content. The responsive layout ensures a great viewing experience on all devices.
Shifting to Wallstreet, this theme caters to a range of business needs, from corporate to freelance websites. Built on Bootstrap 3, it’s adaptable across devices. Its key features include a featured banner, social icons, and a variety of page templates. The premium version adds more color options and an enhanced slider.
Yummy offers a specialized platform for restaurants to showcase and sell their offerings online. Customizable through a live preview customizer, it supports various layouts, widgets, and is WooCommerce ready. Its focus is on effective exposure for food and beverage businesses.
Astra stands out for its speed and customization capabilities. It’s a performance-oriented theme, SEO-friendly, and compatible with major page builders. With features like pre-built demos and extensive layout settings, it’s versatile for various website types.
TrueNorth, a free theme, is designed for showcasing creative work elegantly. Its block-based design facilitates easy page building. Flexible color customization and a real-time preview make it ideal for professionals and creatives to display their skills.
Ember, tailored for creative agencies and freelancers, offers a one-page design that’s responsive and mobile-friendly. It includes parallax support, adding a dynamic dimension to the website.
Simple, from Nimbus Themes, delivers a modern and minimal design. It offers diverse frontpage layouts and is customizable in color, layout, and typography. It’s a blend of quality and flexibility, ensuring a modern web presence.
Phlox Pro, a free Elementor theme, is perfect for crafting elegant websites. It’s customizable, fast, and SEO-friendly, featuring exclusive elements for Elementor, ready-to-use templates, and online store capabilities.
Bulan, ideal for bloggers at any level, provides a clean and modern blogging experience. It includes multiple homepage layouts and custom widgets, enhancing interactivity and engagement.
Lastly, Zakra is a versatile, highly-rated theme suitable for various website types. With over 80 templates, it’s friendly with all page builders and includes features like starter templates and extensive customization options. It’s optimized for performance and SEO.
I got to work with a new type of chart for data visualization called a radar chart when a project asked for it. It was new to me, but the idea is that there is a circular, two-dimensional circle with plots going around the chart. Rather than simple X and Y axes, each plot on a radar chart is its own axis, marking a spot between the outer edge of the circle and the very center of it. The plots represent some sort of category, and when connecting them together, they are like vertices that form shapes to help see the relationship of category values, not totally unlike the vectors in an SVG.
Sometimes, the radar chart is called a spider chart, and it’s easy to see why. The axes that flow outward intersect with the connected plots and form a web-like appearance. So, if your Spidey senses were tingling at first glance, you know why.
You already know where we’re going with this: We’re going to build a radar chart together! We’ll work from scratch with nothing but HTML, CSS, and JavaScript. But before we go there, it’s worth noting a couple of things about radar charts.
First, you don’t have to build them from scratch. Chart.js and D3.js are readily available with convenient approaches that greatly simplify the process. Seeing as I needed just one chart for the project, I decided against using a library and took on the challenge of making it myself. I learned something new, and hopefully, you do as well!
Second, there are caveats to using radar charts for data visualization. While they are indeed effective, they can also be difficult to read when multiple series stack up. The relationships between plots are not nearly as decipherable as, say, bar charts. The order of the categories around the circle affects the overall shape, and the scale between series has to be consistent for drawing conclusions.
That all said, let’s dive in and get our hands sticky with data plots.
The Components
The thing I like immediately about radar charts is that they are inherently geometrical. Connecting plots produces a series of angles that form polygon shapes. The sides are straight lines. And CSS is absolutely wonderful for working with polygons given that we have the CSS polygon() function for drawing them by declaring as many points as we need in the function’s arguments.
We will start with a pentagonal-shaped chart with five data categories.
See the Pen [Radar chart (Pentagon) [forked]](https://codepen.io/smashingmag/pen/abMaEyo) by Preethi Sam.
I’m sure you can read the markup and see what’s going on, but we’ve got three parent elements (.wrapper) that each holds one of the main components. The first parent contains the .grids, the second parent contains the .graphs, and the third parent contains the .labels.
Base Styles
We’ll start by setting up a few color variables we can use to fill things in as we go:
Our next order of business is to establish the layout. CSS Grid is a solid approach for this because we can place all three grid items together on the grid in just a couple of lines:
/* Parent container */
.wrapper { display: grid; }
/* Placing elements on the grid */
.wrapper > div {
grid-area: 1 / 1; /* There's only one grid area to cover */
}
Let’s go ahead and set a size on the grid items. I’m using a fixed length value of 300px, but you can use any value you need and variablize it if you plan on using it in other places. And rather than declaring an explicit height, let’s put the burden of calculating a height on CSS using aspect-ratio to form perfect squares.
/* Placing elements on the grid */
.wrapper div {
aspect-ratio: 1 / 1;
grid-area: 1 / 1;
width: 300px;
}
We can’t see anything just yet. We’ll need to color things in:
All combined, it doesn’t look all that great so far. Basically, we have a series of overlapping grids followed by perfectly square graphs stacked right on top of one another. The labels are off in the corner as well. We haven’t drawn anything yet, so this doesn’t bother me for now because we have the HTML elements we need, and CSS is technically establishing a layout that should come together as we start plotting points and drawing polygons.
More specifically:
The .wrapper elements are displayed as CSS Grid containers.
The direct children of the .wrapper elements are divs placed in the exact same grid-area. This is causing them to stack one right on top of the other.
The .polygons are centered (place-self: center).
The child divs in the .polygons take up the full width (width:100%).
Every single div is 300px wide and squared off with a one-to-one aspect-ratio.
We’re explicitly declaring a relative position on the .labels. This way, they can be automatically positioned when we start working in JavaScript.
The rest? Simply apply some colors as backgrounds and drop shadows.
Calculating Plot Coordinates
Don’t worry. We are not getting into a deep dive about polygon geometry. Instead, let’s take a quick look at the equations we’re using to calculate the coordinates of each polygon’s vertices. You don’t have to know these equations to use the code we’re going to write, but it never hurts to peek under the hood to see how it comes together.
x1 = x + cosθ1 = cosθ1 if x=0
y1 = y + sinθ1 = sinθ1 if y=0
x2 = x + cosθ2 = cosθ2 if x=0
y2 = y + sinθ2 = sinθ2 if y=0
etc.
x, y = center of the polygon (assigned (0, 0) in our examples)
x1, x2… = x coordinates of each vertex (vertex 1, 2, and so on)
y1, y2… = y coordinates of each vertex
θ1, θ2… = angle each vertex makes to the x-axis
We can assume that 𝜃 is90deg (i.e., 𝜋/2) since a vertex can always be placed right above or below the center (i.e., Data A in this example). The rest of the angles can be calculated like this:
The number of sides depends on the number of plots we need. We said up-front that this is a pentagonal shape, so we’re working with five sides in this particular example.
Now that the math is accounted for, we have what we need to start working in JavaScript for the sake of plotting the coordinates, connecting them together, and painting in the resulting polygons.
For simplicity’s sake, we will leave the Canvas API out of this and instead use regular HTML elements to draw the chart. You can, however, use the math outlined above and the following logic as the foundation for drawing polygons in whichever language, framework, or API you prefer.
OK, so we have three types of components to work on: grids, graphs, and labels. We start with the grid and work up from there. In each case, I’ll simply drop in the code and explain what’s happening.
Drawing The Grid
// Variables
let sides = 5; // # of data points
let units = 1; // # of graphs + 1
let vertices = (new Array(units)).fill("");
let percents = new Array(units);
percents[0] = (new Array(sides)).fill(100); // for the polygon's grid component
let gradient = "conic-gradient(";
let angle = 360/sides;
// Calculate vertices
with(Math) {
for(i=0, n = 2 * PI; i < sides; i++, n += 2 * PI) {
for(j=0; j < units; j++) {
let x = ( round(cos(-1 * PI/2 + n/sides) * percents[j][i]) + 100 ) / 2;
let y = ( round(sin(-1 * PI/2 + n/sides) * percents[j][i]) + 100 ) / 2;
vertices[j] += `${x}% ${y} ${i == sides - 1 ? '%':'%, '}`;
}
gradient += `white ${
(angle * (i+1)) - 1}deg,
#ddd ${ (angle * (i+1)) - 1 }deg,
#ddd ${ (angle * (i+1)) + 1 }deg,
white ${ (angle * (i+1)) + 1 }deg,
`;}
}
// Draw the grids
document.querySelectorAll('.grids>div').forEach((grid,i) => {
grid.style.clipPath =`polygon(${ vertices[0] })`;
});
document.querySelector('.grids:nth-of-type(1) > div').style.background =`${gradient.slice(0, -1)} )`;
Check it out! We already have a spider web.
See the Pen [Radar chart (Grid) [forked]](https://codepen.io/smashingmag/pen/poYOpOG) by Preethi Sam.
sides is the number of sides of the chart. Again, we’re working with five sides.
vertices is an array that stores the coordinates of each vertex.
Since we are not constructing any graphs yet — only the grid — the number of units is set to 1, and only one item is added to the percents array at percents[0]. For grid polygons, the data values are 100.
gradient is a string to construct the conic-gradient() that establishes the grid lines.
angle is a calculation of 360deg divided by the total number of sides.
From there, we calculate the vertices:
i is an iterator that cycles through the total number of sides (i.e., 5).
j is an iterator that cycles through the total number of units (i.e., 1).
n is a counter that counts in increments of 2*PI (i.e., 2𝜋, 4𝜋, 6𝜋, and so on).
The x and y values of each vertex are calculated as follows, based on the geometric equations we discussed earlier. Note that we multiply 𝜋 by -1 to steer the rotation.
We convert the x and y values into percentages (since that is how the data points are formatted) and then place them on the chart.
let x = (round(cos(-1 * PI/2 + n/sides) * percents[j][i]) + 100) / 2;
let y = (round(sin(-1 * PI/2 + n/sides) * percents[j][i]) + 100) / 2;
We also construct the conic-gradient(), which is part of the grid. Each color stop corresponds to each vertex’s angle — at each of the angle increments, a grey (#ddd) line is drawn.
Now it looks like we’re getting somewhere! For each graph, we add its set of data points to the percents array after incrementing the value of units to match the number of graphs. And that’s all we need to draw graphs on the chart. Let’s turn our attention to the labels for the moment.
The Labels
// Positioning labels
// First label is always set in the top middle
let firstLabel = document.querySelector('.labels:first-of-type');
firstLabel.style.insetInlineStart =`calc(50% - ${firstLabel.offsetWidth / 2}px)`;
// Setting labels for the rest of the vertices (data points).
let v = Array.from(vertices[0].split(' ').splice(0, (2 * sides) - 2), (n)=> parseInt(n));
document.querySelectorAll('.labels:not(:first-of-type)').forEach((label, i) => {
let width = label.offsetWidth / 2;
let height = label.offsetHeight;
label.style.insetInlineStart = `calc( ${ v[i*2] }% + ${ v[i*2] < 50 ? - 3*width : v[i*2] == 50 ? - width: width}px )`;
label.style.insetBlockStart = `calc( ${ v[(i*2) + 1] }% - ${ v[(i * 2) + 1] == 100 ? - height: height / 2 }px )`;
});
The positioning of the labels is determined by three things:
The coordinates of the vertices (i.e., data points) they should be next to,
The width and height of their text, and
Any blank space needed around the labels so they don’t overlap the chart.
All the labels are positioned relative in CSS. By adding the inset-inline-start and inset-block-start values in the script, we can reposition the labels using the values as coordinates. The first label is always set to the top-middle position. The coordinates for the rest of the labels are the same as their respective vertices, plus an offset. The offset is determined like this:
x-axis/horizontal
If the label is at the left (i.e., x is less than 50%), then it’s moved towards the left based on its width. Otherwise, it’s moved towards the right side. As such, the right or left edges of the labels, depending on which side of the chart they are on, are uniformly aligned to their vertices.
y-axis/vertical
The height of each label is fixed. There’s not much offset to add except maybe moving them down half their height. Any label at the bottom (i.e., when y is 100%), however, could use additional space above it for breathing room.
And guess what…
We’re Done!
See the Pen [Radar chart (Pentagon) [forked]](https://codepen.io/smashingmag/pen/XWGPVLJ) by Preethi Sam.
Not too shabby, right? The most complicated part, I think, is the math. But since we have that figured out, we can practically plug it into any other situation where a radar chart is needed. Need a four-point chart instead? Update the number of vertices in the script and account for fewer elements in the markup and styles.
In fact, here are two more examples showing different configurations. In each case, I’m merely increasing or decreasing the number of vertices, which the script uses to produce different sets of coordinates that help position points along the grid.
Need just three sides? All that means is two fewer coordinate sets:
See the Pen [Radar chart (Triangle) [forked]](https://codepen.io/smashingmag/pen/vYPzpqJ) by Preethi Sam.
Selecting the right WordPress themes is crucial for any business aiming to establish a robust online presence. This article showcases 20 exceptional WordPress themes, catering to a diverse range of business needs. Whether you’re a startup, a small business, or a large corporation, you’ll find themes here that are tailored to your unique requirements.
Our curated list includes both free and premium WordPress themes, ensuring that you can find a perfect match regardless of your budget. Each theme is designed with functionality and aesthetics in mind, making it easier for you to create a website that not only looks professional but also resonates with your brand identity.
Let’s explore these themes and find the one that aligns best with your business vision.
Boostup Business transforms the way businesses and consultants build their online presence. It’s a Full Site Editing (FSE) WordPress theme that excels in creating both dynamic business websites and captivating blogs.
With its modern, elegant design, it offers a plethora of customization features. The theme adapts beautifully across various devices, ensuring a seamless experience on any screen size.
Plus, it’s built with SEO and mobile-friendly aspects, giving your site an edge in online performance.
Bosa Business Services, branching from the versatile Bosa, caters to a broad spectrum of websites, ranging from e-commerce to fashion and more. This multipurpose theme melds aesthetics with speed and lightness, ensuring a responsive experience.
It’s highly customizable, compatible with Gutenberg and Elementor page builders, making it simple to materialize your vision. Prioritizing SEO, speed, and user-friendliness, it offers diverse header and footer designs, ready-to-use starter sites, and works seamlessly with key plugins like WooCommerce and Yoast.
Its adaptability and user-friendliness make it an excellent choice for any business-oriented site. You can explore its capabilities in the Bosa Business Services Demo.
Business Chat is a free WordPress theme perfect for a variety of sites, including businesses, online shops, personal blogs, and journalistic outlets. Its minimalist design is both clean and modern, making it a great fit for corporate, fashion, food, travel, and lifestyle sites.
With SEO optimization, it helps your content rank better in search engines. Features like sidebars and widgets are ideal for displaying Adsense, affiliate links, or author information.
This theme is not only lightweight and customizable but also works smoothly with page builders like Elementor and Divi Builder. Its compatibility with WooCommerce adds e-commerce functionality, making it suitable for startups, agencies, and portfolios.
The theme is mobile-friendly, translation-ready, and supports schema markup. A key feature is its live chat integration with JoinChat for real-time customer engagement.
Business Conference Theme is a go-to free WordPress theme for events and conferences. Designed specifically for business meetups, technology conferences, and product launches, it’s compatible with WP Event Manager plugin and integrates well with popular page builders.
It’s responsive, supports multiple browsers, and is translation-ready and SEO-optimized. With dedicated customer support, it’s an ideal choice for any event-focused website.
Business FSE is a dynamic Full Site Editing WordPress theme, ideal for a range of business sectors including startups, law firms, and agencies. Leveraging the power of WordPress’s block editor, it enables the creation of eye-catching designs without the need for coding.
This theme offers an array of pre-designed templates and patterns, addressing various business requirements and goals. Known for its rapid loading times, Business FSE enhances both user experience and SEO performance.
It is search engine optimized, featuring clean code and compatibility with major SEO plugins. The interface is user-friendly, facilitating the implementation of SEO best practices. Consistency in responsive browsing across all devices ensures your website looks impeccable on any screen.
Explore more about Business FSE through its demo, and access documentation or support as needed.
Business Growth X is a free WordPress theme, perfect for businesses, bloggers, and content creators in fields like finance, travel, and lifestyle. Its minimalist design suits professional corporate sites, financial analysts, and creatives.
The theme is SEO-optimized, boosting your content’s search engine visibility. It supports popular page builders such as Elementor and Divi Builder, offering design flexibility. With WooCommerce compatibility, it enables e-commerce features and includes schema markup for improved online visibility.
Mobile-friendly and translation-ready, Business Growth X is great for bloggers, startups, and anyone aiming for a professional online look. Explore Business Growth X for a customizable web experience.
Business Guidance Coach is a WordPress theme crafted specifically for business coaches, consultants, and mentors. It provides a polished and complete platform to showcase expertise and offer advice to emerging entrepreneurs and leaders.
The theme’s design is sleek and user-friendly, reflecting the professionalism of business coaches and facilitating easy interaction. It’s responsive across various devices, extending its reach to a broader audience.
Customizable to align with personal branding, it enhances each user’s unique identity. Supporting multimedia integration, it enriches interactions between coaches and their audience, making it an ideal choice for professionals in business coaching.
Cube Business is a WordPress theme based on Elementor, fitting for agencies, businesses, and financial sites. It boasts a modern, responsive layout with excellent typography, prioritizing readability and user experience.
Its compatibility with Elementor Page Builder makes it user-friendly, even for beginners, by removing the need for CSS or HTML skills. Cube Business is ideal for those who want an easy, yet powerful theme for a professional online presence.
FSE Business Blocks delivers a simple yet elegant solution for WordPress website creation. It features a clean design and a comprehensive set of features, including hero sections, portfolio showcases, prominent call-to-action buttons, and client testimonials.
Suitable for business sites, personal brands, or creative projects, FSE Business Blocks is designed for quick and effective website launches. It combines functionality with aesthetic appeal, making it a prime choice for establishing a prominent online presence.
Goldy Business is a WordPress theme that blends a modern aesthetic with user-friendly functionality. It’s adaptable for a variety of websites, featuring an appealing design and numerous features like a featured slider, sections for about, portfolio, team, services, sponsors, and testimonials.
The theme also includes a sticky header, social information, a sidebar, and excerpt options. These features are responsive and easily customizable, allowing Goldy Business to meet your specific requirements, providing an effortless experience for both site owners and visitors.
AhaShop is tailored for small to medium-sized online fashion stores, making it a prime choice for businesses dealing in clothing for all ages, along with shoes, watches, jewelry, handbags, and accessories.
This WordPress theme streamlines the creation of online fashion stores with tools like WPBakery Page Builder, Flexible Slider, compatibility with the latest versions of WooCommerce and WordPress, Bootstrap CSS framework, a shop grid layout, a mega menu, and a mobile-friendly design.
AhaShop is dedicated to facilitating a quick and easy setup for online fashion businesses, offering a swift solution for launching fashion products online.
TB Cena Store is a flexible WooCommerce WordPress Theme, offering a variety of powerful customization options. It’s particularly effective for electronics online stores but versatile enough for various purposes.
The theme excels in SEO, boosting your site’s visibility on search engines. It’s fully responsive, ensuring a seamless shopping experience across all devices. Cena Store provides more than 10 different homepage designs, giving you ample choices to find the ideal match for your needs.
The One-click import feature simplifies the process of importing content, widgets, sliders, menus, and customization settings.
Fildisi is a WordPress theme that serves a wide range of users, from corporations to freelancers, agencies, photographers, designers, and bloggers.
Designed to spark creativity, it allows for unique layouts that break from traditional design norms. Fildisi adapts to your creative demands, offering the freedom to craft distinct and striking layouts for any purpose.
It’s a top choice for those who prioritize design flexibility and aim to make a strong visual statement with their website.
Hermes is a WooCommerce theme that excels in versatility, fitting a wide range of e-commerce websites.
It offers various layouts for home and product pages, providing extensive customization possibilities. Beyond e-commerce, Hermes serves business, creative, news, and corporate sites effectively.
Its features include a responsive layout, mega menu, page builder, Slider Revolution, product quick view, and one-click installation. Designed for ease of use, Hermes allows you to create websites without coding skills, making it perfect for those looking for a professional and flexible WordPress theme.
Krowd is a WordPress theme designed for crowdfunding, charity, nonprofit, NGO, and donation websites, as well as other business and non-profit ventures.
Tailored to meet all aspects of crowdfunding, Krowd includes essential features for successful fundraising campaigns. Fully responsive and optimized for conversion rates, it offers high-resolution graphics and easy customization.
Key features include Elementor Page Builder, Slider Revolution, WooCommerce, MailChimp, and the Events Calendar. With its advanced control panel and use of technologies like Bootstrap 4, SASS, HTML5, CSS3, and Font Awesome, Krowd is ideal for creating impactful crowdfunding or charity websites.
NowaDays is a multi-purpose WordPress theme suitable for creative agencies, portfolios, blogs, and showcases, whether as a multi-page or a one-page layout.
It features the Unyson drag-and-drop Page Builder and a comprehensive Theme Options panel, making site building accessible without programming skills. The theme offers a range of Page Builder elements to make your site unique.
NowaDays is designed to effectively showcase products or services, making it a great choice for those seeking a user-friendly, standout WordPress theme for their creative or business projects.
Okab is a multipurpose WordPress theme noted for its excellent performance. Responsive, user-friendly, and fast-loading, it’s adaptable for a variety of websites including business, finance, consulting, personal blogs, shops, photography, and events.
The theme boasts over 275 stylish elements and numerous features, all customizable with an advanced visual builder that doesn’t require coding skills. Okab’s modern design and adaptability make it a top choice for creating a professional and diverse online presence.
Pheromone is a modern, minimalist WordPress theme, perfect for crafting a simple, fast-loading business or personal site.
Tailored for developers, designers, bloggers, and creatives, it offers an easy-to-use and efficient platform. With a focus on simplicity and speed, combined with aesthetic appeal, Pheromone is ideal for those looking for a clean and effective online presence.
Restly is a professional WordPress theme specifically designed for IT Solutions & Technology businesses, startups, and digital agencies. It features a high-quality, fully responsive design that achieves a site speed of 95+ even without optimization plugins.
Key attributes include RTL and WPML support, and a responsive mega menu. Built using Bootstrap 5 and Elementor, along with other current technologies, Restly is ideal for presenting the story and services of IT companies, consultants, and corporate agencies.
Its focus on IT solutions and technology sectors makes it a prime choice for digital industry businesses aiming to create a robust online presence.
Tunis is a personal portfolio template developed with React + NextJS, targeting professionals such as designers, developers, writers, instructors, photographers, freelancers, and software engineers. Its design is creative, minimal, and clean, making it perfect for digitally showcasing professional projects and services.
Being 100% responsive and ultra-fast, courtesy of React v18 + NextJS 13, Tunis stands out as a superb option for specialists seeking a contemporary, efficient, and visually captivating online portfolio.
Mastering date formats is essential for websites with a global audience. Different regions prefer distinct date formats, and aligning with these preferences is key to user engagement and international success. This guide dives into the effective use of JavaScript’s Internationalization API, as defined by ECMA, for customizing date displays in various languages and cultural norms. Learn how to handle different date formats, currencies, and time zones with ease.
Our focus: leveraging the Internationalization API for seamless and efficient date formatting across different languages and regions.
We come across them dates and time… well, every day. When it comes to the Web, you can… Read more
Determining the User’s Locale
To display the date in the user’s preferred local format, it’s important to first identify their locale. The most straightforward method is to allow users to choose their language and regional preferences on your webpage.
If direct user selection isn’t viable, other approaches include interpreting the Accept-Language header from user requests or utilizing the navigator.language (for Chrome and Firefox) or navigator.browserLanguage (for Internet Explorer) properties in JavaScript.
However, it’s important to note that these methods may not always accurately reflect the user’s browser UI language preference.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "en";
// returns language tags like 'en-GB'
Verifying Internationalization API Support
To determine if a browser supports the Internationalization API, we can check for the presence of the global Intl object.
if(window.hasOwnProperty("Intl") && typeof Intl === "object"){
// The Internationalization API is available for use
}
Exploring the Intl Object
The Intl object in JavaScript serves as a gateway to the Internationalization API. It contains three constructor properties: Collator for string comparison, NumberFormat for number formatting, and DateTimeFormat for date and time formatting. Our focus will be on DateTimeFormat, which is instrumental in adapting date and time presentation to different languages.
Capabilities of the DateTimeFormat Object
The DateTimeFormat constructor in JavaScript takes two optional arguments:
locales – This can be a string or an array of strings indicating language tags, such as “de” for German or “en-GB” for English as used in the United Kingdom. In the absence of a specific language tag, the default locale of the runtime environment is used.
options – An object whose properties allow customization of the date formatter. It includes properties such as:
Property
Description
Possible values
day
Day of the month
“2-digit”, “numeric”
era
Era in which the date falls, e.g., AD or BC
“narrow”, “short”, “long”
formatMatcher
Algorithm used for format matching
“basic”, “best fit” [Default]
hour
Hour of the day
“2-digit”, “numeric”
hour12
Whether to use 12-hour format (true) or 24-hour format (false)
true, false
localeMatcher
Algorithm used for matching locales
“lookup”, “best fit” [Default]
minute
Minute of the hour
“2-digit”, “numeric”
month
Month of the year
“2-digit”, “numeric”, “narrow”, “short”, “long”
second
Second of the minute
“2-digit”, “numeric”
timeZone
Time zone to use for formatting
“UTC”, default to the runtime’s time zone
timeZoneName
Name of the time zone
“short”, “long”
weekday
Day of the week
“narrow”, “short”, “long”
year
Year
“2-digit”, “numeric”
Example:
var formatter = new Intl.DateTimeFormat('en-GB');
// Returns a formatter for UK English date format
var options = {weekday: 'short'};
var formatter = new Intl.DateTimeFormat('en-GB', options);
// Returns a formatter for UK English date format with weekday
Utilizing the format Function
The DateTimeFormat object includes a property accessor named format. This function is designed to format a Date object according to the specified locales and options within the DateTimeFormat instance.
It accepts either a Date object or undefined as an optional argument, returning a formatted date string.
Note: If no argument is provided, or if it’s undefined, the function defaults to formatting the current date using Date.now().
Here’s how it works:
new Intl.DateTimeFormat().format()
// Returns the current date in the format specific to the runtime's locale
Let’s explore some simple date formatting examples:
As an alternative to the formatter approach, you can use Date.prototype.toLocaleDateString for similar functionality. This method also utilizes the locales and options arguments. While it’s similar to using the DateTimeFormat object, the latter is recommended for applications handling a large number of dates.
var mydate = new Date('2015/04/22');
var options = {
weekday: "short",
year: "numeric",
month: "long",
day: "numeric"
};
console.log(mydate.toLocaleDateString('en-GB', options));
// Outputs "Wed, 22 April 2015"
Checking Supported locales
To determine which locales are supported, the DateTimeFormat object’s supportedLocalesOf method can be used. This method returns an array of all supported locales or an empty array if none are supported. For example, to test, we can include a fictitious locale “blah” among the locales being checked.
