WordPress is the most popular tool to create a website. According to many sources — including this one from Kinsta –, WordPress is powering about 40 percent of all websites on the internet. The major reason many people use WordPress to create a website is that it is fully customizable and has an open ecosystem, allowing developers to develop plugins to extend the features and functionality of WordPress. Even if you are not a developer (meaning you have no coding skills), you still be able to create a professional website with WordPress.
The WordPress ecosystem has entered the page builder era. Today, most WordPress users use a page builder plugin to create a website. A page builder plugin offers a visual editor whereby everything is drag and drop. You can use a page builder plugin to create the stunning, professional-looking core pages of your website. From the homepage, the about page, the contact page, and other pages according to your need. Most page builder plugins also offer a theme builder feature to allow you to go beyond. You can use a theme builder to customize every single part of your website without coding.
Creating a Fully Customized Website Without Coding with WordPress
As we mentioned in the intro section. WordPress is the most popular tool to create a website. Far beyond its competitors like Wix, Squarespace, Drupal, and Joomla. If you are new to WordPress and want to learn more, you have Google as your assistant. There are tons of articles you can find on Google to help you create a website with WordPress. Not to mention videos on YouTube. However, most articles and YouTube videos only show the basic steps such as buying a domain name+hosting and installing WordPress on web hosting. This article will skip these steps. Instead, we will show you the key components of WordPress and how to customize them. Also, we will show you how to create the core pages of your website. But first, we will cover theme builder a bit further.
Get to Know WordPress Theme Builder
Theme is a required component of WordPress. You can’t create a WordPress site without a theme. A theme controls the appearance of your overall website. From the header, footer, 404 page, search results page, single post, single page, and so on. Every WordPress theme has template files that control the layouts of the mentioned parts. For instance, the header.php (the template file of the header) controls the layout of the header of your website, while the footer.php controls the layout of the footer of your website. You can find all template files of your theme by going to Appearance -> Theme Editor on your WordPress dashboard.
Since WordPress is written in PHP, you also need to understand PHP to edit the template files of your theme with the aim to customize the site parts (header, footer, and so on). Well, you can customize your site parts from theme customizer (Appearance -> Customize), but the customization options available on theme customizer are limited, depending on the theme you use. On the other hand, a theme builder offers unlimited customization options. Literally unlimited!
You can use a theme builder to create custom templates to replace the default template files of your theme. For instance, you can create a custom header template to replace the default header template (header.php) of your theme. The custom header template can be created using the visual editor of the associated theme builder. Two popular theme builder plugins for WordPress are Elementor Pro and Divi Builder. Both Elementor Pro and Divi Builder allow you to create custom templates for the following site parts:
- Single Post
- Single Page
- Search Results Page
- 404 Error Page
- Archive Pages (Category Pages, Tag Pages, Author Archive Pages, and so on)
Most theme builder plugins (including Elementor Pro and Divi Builder) also allow you to create custom templates for custom post types (will be covered further later).
Creating the Core Pages
Once you understand what a theme builder is, it’s time to go to the next step: creating the core pages of your website. Most websites have at least the following core pages:
- Contact page
- About page
In WordPress, you can create a new page by going to Pages -> Add New on your WordPress dashboard. While WordPress has a default editor (Gutenberg) that you can use to create the page, but we strongly recommend you use a page builder plugin to ease your job. Plus, most page builder plugins offer ready-made page templates to streamline your workflow. Two page builder plugins we recommend are Elementor (freemium) and Divi Builder (premium). The two come with a theme builder feature which you can use to create custom templates as we have mentioned above.
Homepage is the front page of your website, which will be visible when visitors type your website address (e.g., yourwebsite.com) on web browser. Homepage is the most crucial page of your website. Visitors will easily judge the professionality of your website (and your business in general) by viewing the site homepage. Again, we suggest you use Elementor or Divi Builder to create the homepage of your website. Be it Elementor or Divi Builder offers a bunch of ready-made professional homepage templates to streamline your workflow.
Once you are done creating the homepage, go to Settings -> Reading on your WordPress dashboard. On Your homepage displays section, select the A static page option and select the homepage you have just created from the Homepage dropdown menu.
If you decided to use Elementor, you can read our previous article to learn more about how to create the homepage of your website using it.
# Contact Page
The next crucial page you need to create is the contact page. If your website has no contact page, people will have doubt about your business. To make it easy for your visitors or aspiring clients to reach your out, you can add a contact form to your contact page as well as other necessary elements such as map, FAQ, and so on.
Both Elementor and Divi Builder come with a design element to add a contact form, map, and FAQ (read: How to Create a Contact Form in Elementor and How to Create a Contact form in Divi). Both Elementor and Divi Builder also offer ready-made contact page templates.
Here are some examples of contact pages:
# About Page
About page allows your visitors to learn more about your business. You can use this page to display things like a brief intro about your business, team members, business achievements, and so on.
Elementor and Divi Builder offer a bunch of ready-made about page templates to save you time in creating the about page.
Here are some examples of about pages:
# Other Pages
The number of pages on each website are varied, depending on the website type. On some websites, you might find other pages like Services page, Projects page, and so on.
Once your pages are done, you can move to next step below.
Using Theme Builder to Customize Site Parts
On the previous section above, you have learned about theme builder which you can use to create custom templates for your site parts to give limitless customization options. In addition to the visual editor to create the custom templates, another main advantage of using a theme builder is that you can set where a certain custom template to be applied to. For instance, when creating a custom header template, you can assign it to specific post(s), specific page(s), posts under categories, posts under certain tags, posts by an author, or entire website.
Once again, Elementor Pro and Divi Builder are two of the theme builder plugins we recommend. The two are by far the best options for theme builder (read: Elementor vs Divi).
Header is one of the most visible parts of your website. Each WordPress theme comes with a header which you can customize from theme customizer. But again, the customization options offered by each theme for the header area varied. Some themes even don’t allow you to customize the header.
With a theme builder, you can create a custom header template with your own design. You can use your own colors, typography, and so on. Also, you can add any element to your liking. You can even set certain header behaviors like shrink on scroll down, hide on scroll down and show on scroll up, and so on. In Divi Builder, you can even show/hide the header for logged in/logged out users thanks to its brand new advanced Display Conditions feature.
Two key elements you need to add to your header are:
- Site logo
- Navigation menu
You can read our articles below to learn the technical instructions to create a custom header with Elementor and Divi Builder.
Footer is a site part that lies on the bottom side of your website. This part is usually used to place the links of the website, social media icons, and so on. In WordPress, the layout of the footer is controlled by the footer.php file of your theme. You can customize the footer of your WordPress site from theme customizer. Again, the customization options available on theme customizer depend on the theme you use. Using theme builder is the best option to create a footer with your down design.
You can read the following articles for the technical instructions on how to create a custom footer in WordPress without coding:
- How to Create a Custom Footer in WordPress Using Elementor
- How to Create a Custom Footer in WordPress Using Divi Builder
# 404 Error Page
404 Error Page is a page that shows up when visitors try to access a certain URL, but it contains no page (page not found). Each WordPress theme has a template file (commonly named 404.php) to handle the error. You can simply edit the 404.php file to edit the default error message. Or you can also use the easier solution: using a theme builder.
Not only you can edit the error message, using a theme builder also allows you to create a custom design of the 404 page. If you use Elementor (Pro), you can create a custom 404 Error Page from a ready-made template. Divi offers no ready-made template for the 404 Error Page so that you have to create one yourself.
Here are some examples of the 404 Error Pages:
You can read the following articles for the technical instructions on how to create the custom 404 Error Page in WordPress:
- How to Create a Custom 404 Error Page in WordPress Using Elementor
- How to Create a Custom 404 Error Page in WordPress Using Divi Builder
# Search Results Page
WordPress has a default search feature. You can make use of this feature to make it easier for your site visitors to find the content they need. This feature is necessary if you want to create a website in which the content is regularly updated such as blog and online magazine. The layout of the search results page is controlled by a template file of your theme called search.php (or the similar name). A theme builder, including Elementor Pro and Divi Builder, allows you to create a custom template for the search results page in a visual way.
Here are two examples of the custom search results pages:
If you decided to use Elementor, you can read our previous article for the technical instructions on how to create a custom search results page in WordPress.
# Archive Pages
An archive page is a page that consists of a list of blog posts based on certain criteria. From category, tag, author, and so on. For instance, if you go to https://www.wppagebuilders.com/category/elementor/, you will see a list of blog posts under the “Elementor” category. Similarly, if you go to https://www.wppagebuilders.com/tag/accordion/, you will see a list of blog posts with the tag of “accordion”. Or, if you go to https://www.wppagebuilders.com/author/aliko/, you will see a list of blog posts written by the author named “Aliko”. All these pages are called archive pages.
Each WordPress theme has a template file to control the layout of archive pages (commonly called archive.php). The theme builder feature of Elementor Pro and Divi Builder allow you to create custom templates for archive pages on your WordPress site. You can create a custom archive page with the following parameters:
- Post categories
- Post tags
- Post authors
You can read the following articles for the technical instructions on how to create custom archive pages in WordPress:
- How to Create a Custom Category Page Using Divi
- How to Create a Custom Category Page Using Elementor
- How to Create a Custom Author Archive Page Using Divi
- How to Create a Custom Author Archive Page Using Elementor
# Single Post
Single Post refers to content you create using the default editor of WordPress. Single post is also known as blog post. Blog post is one of the default content types of WordPress. The layout of blog post is controlled by a template file of your theme. Commonly, the file has a name “single.php“. You can use the theme builder feature of Elementor Pro and Divi Builder to create a custom template for blog post. You can even create different layouts for blog posts based on their attributes. Such as post category, post tag, and post author.
For technical instructions on how to create custom template for blog post, you can read the articles below:
- How to Create a Custom Single Post Template Using Elementor
- How to Create a Custom Single Post Template Using Divi Builder
Until here, your website is done and ready to release.
Essential Plugins to Install
While you can install plugins to extend the functionality and features of your WordPress site, we strongly recommend you to only install a plugin when you really need it. Installing too many plugins play a role in slowing down your site as each plugin consumes your server resources. For a better site performance, we recommend you use a managed WordPress hosting. A managed WordPress hosting is a hosting service optimized for WordPress. Our recommendations of managed WordPress hosting providers are Kinsta, WP Engine, and SiteGround.
Here are the essential plugins you need to install on your WordPress site, other than page builder:
# Security Plugin: Wordfence
Wordfence is the most popular WordPress security plugin with over 4 million active installations. It takes no advanced cyber security knowledge to use the plugin. It requires minimum setup to work. Wordfence comes with features like web firewall and malware scanner. The latter is especially crucial for a website. You can use Wordfence for free.
# Backup Pugin: UpdraftPlus
Your website is your asset. You don’t want to lose your asset. Don’t you? Regularly backing up your website can prevent you from losing your website when something bad happens. Such as server crash, your site gets hacked, and other bad scenarios. You can simply restore your website from the backup files you have.
You can use UpdraftPlus to assist you to regularly backup your website. You can set UpdraftPlus to back up your website whether daily, weekly, or monthly. You can save the backup files to cloud storage services like Dropbox, Google Drive, Amazon S3, and so on.
# SEO Plugin: Yoast
SEO (stands for Search Engine Optimization) is an attempt to generate organic traffic from search engines. Yoast can help you to get your website on the front page of the search results page of search engines. It helps you optimize your site content (blog posts, pages, and so on) before you publish it.
Recommended WordPress Themes
As we said earlier above, you can’t have a WordPress site without a theme as it is a required component of the WordPress system. When creating a WordPress site using a page builder plugin and a theme builder, the theme you use doesn’t really matter as you can customize every site part by creating custom templates as we have explained above.
Here are three theme recommendations you can use. The following themes are extremely lightweight and one hundred percent compatible with Elementor and Divi Builder.
A little note if you want to use Divi Builder instead of Elementor. Divi Builder is available in two versions: a standalone plugin and as an integral part of the Divi theme. If you prefer to use Divi Builder on Divi theme, you don’t need to install the Divi Builder plugin as it’s already available as a built-in feature.
Bonus: Custom Fields and Custom Post Types
Being an open-source software, WordPress is fully customizable. While its default functionality is great to create standard websites, you can go further with custom fields and custom post types. What are they?
When you publish an article in WordPress, you will see elements like featured image, post meta (date, category, tag, author, and so on), post title, and so on (read: The Anatomy of the Single Post Template in WordPress). These elements are the default elements (fields) in WordPress. What if you want to add additional fields that are not available in WordPress? You can create custom fields. Custom fields are a set of fields to store additional data of WordPress content.
Let’s take an example.
You want to create a movie database website like IMDb in which on each movie item, you want to add detailed information like:
- Release date
Since WordPress has no default fields to accommodate the additional data above, you can create custom fields. For more details above WordPress custom fields, you can read our previous article.
Four plugins you can use to create custom fields are:
Custom Post Types
Let’s back to movie database site example above.
By default, there are two content types you can create in WordPress: blog post and page. What about the movie items? Should you add them as blog posts or pages? None of them. Instead, you can create a custom post type to accommodate the movie items. You can then incorporate the custom fields you have created above with the custom post type for the movie items. You can read our previous article for detailed explanation about custom post types as well as how to create one.
You can use the following plugins to create custom post types in WordPress:
- Custom Post Type UI
The theme builder feature of Elementor Pro and Divi Builder allows you to create custom template for custom post types so that you can set the layout and stylings (typographies, colors, and so on) without coding. They also allow you to display the data of the custom fields on your custom templates for custom post types.
The Bottom Line
Using WordPress to build your website is a great option if you have no coding skills. It is an open-source tool thus fully customizable. WordPress also have a vibrant community around the globe, allowing you to get help more easily when you face a problem. Before the page builder and theme builder era, WordPress users had to depend on what’s offered by the theme they use. They had to install additional plugins only to add elements like accordion, slider, and contact form to a page.
Today, in the page builder era and theme builder era, you only need a single plugin to achieve more. You no longer depend on what’s offered by your theme. You can customize every single part of your website with your down design in a visual way using a theme builder. You have more freedom to customize your website. You can combine the power of theme builder and custom fields and custom post types to step further with WordPress. Your creativity is the limit.
6 thoughts on “How to Create a Professional Website Without Coding with WordPress”
Just found out that Elementor Pro has the capability of displaying custom fields data. Does it support ACF?
Yes it does. Elementor supports ACF, Pods, Meta Box, Toolset, and JetEngine
You are right. Elementor and Divi are the best options of page builder despite many other options available out there. Especially for Elementor, it is by far the best option when it comes to editing experience. Its editor is second to none
I am a photographer and plan to create a portfolio website to promote my service. Which should I use? Elementor or Divi?
Both Elementor and Divi are great to create a photography portfolio site. They come with necessary elements you need, including gallery which we think is crucial in a photography site.
On the recommended theme section, you should also mention Kava.