How to build a custom WordPress site with no code

In this post, you will learn how to build a custom WordPress site without coding by leveraging the WordPress full-site editor.

This beginner-focused tutorial will teach you how to build a custom WordPress website without code. You’ll learn how to use the new WordPress full-site editing interface to give your site a unique layout and style that’s all your own.

Setup WordPress

There are several ways to set up WordPress, but I prefer the two options below.

Local is an excellent option if you want to run WordPress on your local computer for testing, following tutorials, or developing themes and plugins. Go to, click “Download,” Choose your platform, fill in their form, and launch the installer once it’s downloaded. That’s it!

If you want to run a production version of WordPress that is available to the world, I recommend a VPS droplet on DigitalOcean. I wrote an article detailing how to setup WordPress on DigitalOcean in detail here.

Log in to WordPress

Once WordPress is running, log in using the URL domain followed by “wp-login.php,” I.e., “” If you are using Local, it will provide a link on the console screen you can use to open the login screen. After you log in successfully, you should see the WordPress dashboard.

Create Some Posts

Before you start customizing the look and feel of your WordPress site, it helps to create at least six filler posts with featured (cover) images. These posts will help you see how your home page looks as you customize it. You can use some filler text generated by ChatGPT or

To create a new post, from the top of the WordPress dashboard, click “+ New” and then “Post.”

Give your new post a title, add your filler text, a featured image, and an excerpt. The new WordPress default theme, Twenty Twenty-Three, will use all four items when it lists each post on your home page. is an excellent resource of free-to-use photos for your post’s featured image. The lowest resolution option on Unsplash will look great on a web page. Depending on your final design, it is usually a good idea to decide if you will use landscape or portrait images and stick with one or the other. Unsplash allows you to filter on either orientation. To upload your image, drag it from the folder where you downloaded it to the gray box under “Featured image.”

Add a page

In addition to adding a few posts, it is a good idea to add at least one page, such as an “about” page. The main difference between a post and a page is that a page is attached to the navigation menu. Adding a page will allow you to see how pages and the navigation menu look in your design.

The Twenty Twenty-Three theme

Now it’s time to customize your WordPress site using the new site editor. For this how-to, we will use the WordPress Twenty-Three theme. It is the default theme for new WordPress installations at the time of this writing. It may seem a bit barebones at first, but it loads fast, aligns with best practices, and is highly customizable.

From the dashboard, click “Appearance” and then “Themes.”

Launch the WordPress Full-Site Editor

To access the WordPress full-site editor, log into the dashboard and click “Appearance” on the left-hand menu. As of this writing, the full-site editor is still in beta, but the beta flag may be removed when WordPress 6.2 is released.

How-to launch the WordPress full-site editor

By default, the editor will open your site homepage in the editor. Let’s cover a few basics before making changes.

Templates and Template Parts

Click the WordPress logo in the upper left corner of the editor to display the templates. The editor provides a template for each page type in WordPress. Here are the more important ones, including descriptions from the editor:

  • Single – “The default template for displaying any single post or attachment.”
  • Page – “Displays a single page.”
  • Home – “Displays posts on the homepage or the Posts page if a static homepage is set.”
WordPress Block Theme Templates

In addition to templates, WordPress allows you to define “Template Parts.” These template parts can be used inside of page templates so you can include and modify common elements across your entire site in one place. For example, the “Header” will be used across all the different page types and will likely contain your site logo and navigation menu.

WordPress Block Theme Template Parts

Once you’re done looking at the templates, click “Home” on the templates menu or 🏠”Site” to return to the home page view in the editor.

List View

The editor allows you to select and modify different elements in each template. It can be challenging to tell which item you have selected when they are nested inside each other. The list view lets you easily see the hierarchy and choose the element you need. Click “List View” icon to open it up.

Global Styles

Styles allow you to change style combinations, colors, typography, and layout across your WordPress site. To launch Styles, click the half-moon icon in the upper right corner of the editor.

The Styles menu

The WordPress Twenty Twenty-Three theme provides a number of preset styles you can try out. Click “Browse styles” and select a few of the different preset styles to see how they change the look of your site.

If you don’t like any of the preset styles, you can customize your own using the Typography, Colors, and Layout options.

Groups, Rows, and Column(s)

The WordPress editor allows you to organize your content into groups, columns, and rows. The list view feature is really helpful when editing these layout elements. As you examine the Twenty Twenty-Three theme, you’ll notice groups are used for the top-level elements that contain rows or columns.

Time to make some changes

Add a site logo

Start by replacing the site title with your a logo. Open the list view and select the row holding the site title. Click the plus in the lower right-hand corner of the row to insert a block. Search for “logo” to locate the “Site Logo” block and click it. Select an image from your media library or upload a new one.

Once your logo is added, click the site title, the ellipsis, and “Remove Site Title.”

Remove site title

You can increase the size of the logo by grabbing one of the frame bubbles and dragging it out.

Remove the “Mindblown” heading and add a tagline

Add a tagline by clicking the “+” and adding a Group, Row, and Tagline, and then set the row to “Wide width.” See the screenshot below.

Delete the “Mindblow: a blog about philosophy.” heading by selecting the heading in the list view and then clicking “Remove Heading.”

Set the overlay opacity on the page template feature image to zero

In the site editor, click the logo in the upper left-hand corner, then “Templates” and the “Single” template. Select the post featured image at the top and set the overlay opacity to zero. Save your changes and open up one of the posts in a separate browser window to see your changes.

Further Customizations

WordPress provides a way to add your own custom CSS if the full site editor doesn’t provide access to a CSS property you want. In the site editor, click the block you want to add a class to in the list view, click the ellipsis, and then “Show more settings.”

This should open the block settings pane on the right. Scroll to the bottom of the settings pane and click “Advanced.” Enter any CSS class names you like separate by spaces under “Additional CSS Class(es)” and save your changes.

Open a new browser tab and enter “https://your-domain/wp-admin/customize.php” but replace “your-domain” with your actual domain. This should open a customization menu.

Click “Additional CSS” to open a text input box where you can enter any additional CSS you like.

Click the “Publish” button at the top of the page to publish your custom CSS.

The Create Block Theme Plugin

The WordPress site editor allows you to customize almost everything, but if you want to create your own theme, you can install the “Create Block Theme” plugin to create it from scratch. It also allows you to export your current theme, create child themes, overwrite the current theme, etc.


The WordPress site editor is a game changer. It gives you much more control over the look and feel of your website without editing your HTML and CSS manually. It will be interesting to see how this relatively new feature evolves over the next year.







2 responses to “How to build a custom WordPress site with no code”

  1. Cecil D'Souza Avatar

    I am going to try this out. I just feel that the Astra theme which comes free was a better theme to demonstrate the customization. Anyway, it’s a good start. I hope you could post this on
    Thank you for your help.

    1. Mark Foster Avatar

      Astra is a nice theme, but the WordPress full site editor is now built into WordPress and provides many of the same features. Here’s an analogy: I used to carry around a separate camera and phone, but now I have a great camera built into my phone, so I don’t need a separate camera. I wrote an article regarding page builder versus the new WordPress full site editing features here:

Leave a Reply

Your email address will not be published. Required fields are marked *