How to Edit WordPress Site

How to Edit WordPress Site? (Super Easy Step-by-Step Guide)

How to Edit WordPress Site? (Super Easy Step-by-Step Guide)

Over the years, WordPress has evolved from a blogging platform to a complete content management system — now used by around 53% of all the websites on the Internet.

And while WordPress was designed to be an easy to use platform for anyone to create and publish, basic technical know-how is still required to edit any WordPress website.

In this article, we’re going to show you the different methods of editing WordPress and the ways to add or change things on your website even if you don’t know how to code. We promise to keep things simple and beginner-friendly. 🙂

Let’s get started!

What You Need to Edit WordPress Site

Before we start with this guide, make sure you have the following details with you…

  • The WordPress website admin URL (Example:
  • Login credentials of the admin area

Once you have these details, open the admin URL and login to your WordPress dashboard. Also, take a backup of your site before editing as wrong edits can cause unexpected issues, so it’s always good to have a backup that you can restore if anything happens.

Note: You can either take backup through your web hosting (some hosting companies like SiteGround offer automated backups) or use a backup plugin like Updraft.

How to Edit WordPress Home Page

The homepage is the front page of a website. It’s the first page that opens up when someone visits the website URL.

By default, all the blog posts are displayed in reverse chronological order on every WordPress site’s homepage.

But you can change this and set any custom page as the homepage to show the content you need.

To set a custom homepage on WordPress:

  1. Go to Settings > Reading in the WordPress dashboard.
  2. Then click on “A static page” option and select the page that you want to set as your homepage from the drop-down list.
  3. Click on “Save Changes”, and you’re done!
WordPress custom page

Now to edit the homepage, navigate to Appearance > Customize.

How to Edit WordPress site

In the Theme Customizer, you can click on the pencil icon to edit any element. All the changes are in the live preview so you can see everything before publishing the page.

Once the homepage is final, click on the Publish in the sidebar, and the new homepage will be live.

Editing wordpress themes

Important Note: The ability to edit the homepage in the WordPress theme customizer depends on the theme you’re using. Some premium themes like Divi offer endless customization options, while you won’t get many features in the free themes.

In other words, it’s hard to make your pages look the way you want them with basic WordPress themes/editors and no coding skills (but thankfully it’s super easy to do so with advanced WYSIWYG editors including Divi and Elementor).

For more details on this check our step-by-step tutorial on how to edit homepage on WordPress.

How to Edit WordPress Site Using the Block Editor

To edit any page in the WordPress site using the new Gutenberg Block Editor, navigate to Pages > Add New in the WordPress dashboard. You can also open any existing page from Pages to edit.

Now on the page editing screen, you can start adding content.

WordPress html editor

First, click on the Add title block and enter the page title you want.

how to edit wordpress site

Next, click enter and start typing to add the content you want.

Each paragraph in the Gutenberg is called a block (that’s why the name is “Block Editor”). If you want to edit or customize any block, you can click on it and select the settings from the sidebar.

how to edit pages in wordpress

Typography settings like font size, drop cap, and font color are available by default for all paragraph blocks.

To add an image on the page, click on the plus icon, and select the Image block from the popup.

WordPress block editor

You can also add other content elements by clicking on the plus icon and using the left sidebar’s search field.

Gutenberg blocks

Once you’re happy with the page content, click on the Publish button, and your page will get live instantly.

Note: You can click on the Preview option (in the top bar) to check how the page will look to the site visitors on mobile, tablet and desktop.

How to Edit WordPress Site Using the Old Classic Editor

This Classic WordPress editor is powered by a TinyMCE JavaScript software, which enables the customization options of the editor.

TinyMCE is a web-based editor and an open-source platform built with HTML and JavaScript.

Now to use the editor, you can go to your WordPress dashboard, and add a new post or page.

NB: After the introduction of Gutenberg, if you want to use the Classic editor you need to enable it as a plugin.

WordPress WYSIWYG editor

The WordPress editor is the main focus of the page from where you can control almost all the aspects of how your final published page will look like.

A few things you can customize with the Classic editor are:

  • Heading tags — H1, H2, H3, and so on…
  • Font styles — bold, italics, and strikethrough
  • Lists — bulleted and numbered
  • Alignment of the elements
  • Text and background colors
  • Tables
  • and Media — images, videos, etc.

The classic editor also supports custom styles so you can customize almost anything including design and behavior of the page and its elements.

The default WordPress editor is designed to keep everything simple and for basic things only. In contrast, third-party WordPress editors such as Divi or Elementor take the WordPress page building experience to a whole new level and you can use these to create almost any type of layout you want. 

Plus, with advanced WordPress page builder plugins, you can build right on the page (this is called the front end) in real-time instead of building on WordPress dashboard (back end) and constantly switching between editor and preview.

How to Edit WordPress Site with Page Builders

The new Gutenberg Block Editor that comes with newer versions of WordPress is great for blog posts and basic page layouts. But it’s not designed to build advanced and more complex pages like a professional looking homepage or a landing page.

So for that, you can take advantage of a page builder.

Page Builders are tools that allow you to structure and design WordPress posts and pages in a way you like without any coding knowledge.

Most page builders offer front-end editing that lets you build pages in real-time using the drag and drop content elements.

They are called WYSIWYG (What You See Is What You Get) builders.

The two most popular WYSIWYG WordPress page builders are Elementor and Divi.

Let’s now see how you use these page builders to edit your WordPress website…


Elementor is an insanely popular WordPress page builder with over 5M+ users. You can use Elementor to create pages, edit themes, and build full websites with beautiful design — all without touching a single line of code.

To start editing with Elementor, go to Plugins > Add New in your WordPress dashboard, and search for Elementor in the search bar. Then click Install Now, and Activate.

Elementor Install in WordPress

Then go to Pages and either add a new page or open an existing page. Now click on Edit with Elementor to start editing the page in the page builder.

Edit with Elementor

You can click the plus icon to add a row, and then simply drag and drop any content widget from the left sidebar into the right side.

Elementor content widgets

To modify or add any content, you can click on the text and start typing.

And to stylize it, you can select the different settings in the style tab in the sidebar.

Elementor Styling settings

You can add as many content widgets you want to the page. All widgets support multiple customization options like typography, margin/padding, colors, shadow, border, background color, and animations.

After you’re done editing the page, you can publish it or save it as a draft to publish it later.

Elementor Publish

Watch this video to learn more about Elementor and what you can do with this powerful page builder…

Read full Elementor review here

Divi Builder

Divi is another very popular WordPress builder with a community of over 700,000+ users. It’s a page builder with endless customization options, advanced features, and hundreds of beautiful pre-built layouts.

To edit your website with Divi Builder, go to Elegant Themes website and download the Divi Theme file (which includes the Divi Builder as well).

Now in your WordPress dashboard, navigate to Plugins > Add New and click on Upload Plugin on the top. Select the downloaded Divi zip file and click on Install Now.

After that, you can go to any page and click the Use Divi Builder button to enter the editing screen.

In the next screen, you can either select the option to build the page from scratch or choose any pre-built template that come for free with Divi Builder. After that, you can click on the plus icon to add any row, column, or content element you want.

Divi Editor

To edit the content of any widget, you can select it and then edit everything in the settings popup.

Divi Page Builder

Divi includes multiple options for links, colors, spacing, shadow, filters, animation, and scroll effects.

Once you’re done with all the changes, you can click on the Save button on the right.

Check this video to see how easily you can build pages with Divi Builder…

Read full Divi Builder review here

Learn more about WordPress visual builders here

How to edit WordPress Code

To edit code in your WordPress website, follow the below steps…

Edit WordPress HTML in Gutenberg (Block Editor)

In the Gutenberg editor, you can either add a dedicated HTML block where you can write all your HTML code within the page or edit the HTML of the full page (this can be slightly complicated if you’re not familiar with the basic syntax of HTML).

First, click on the plus icon and look for a custom HTML block. Then write all the HTML in the box, which will be applied to the page’s front end.

WordPress HTML Block

To edit the HTML of the entire page, click on the menu icon on the right sidebar and then select Code Editor.

how to edit code in wordpress

Here you can write or modify all the HTML of the page.

Keep in mind that you will have to write everything with the proper markup for blocks in the code editor. Otherwise, the page will run into issues.

Edit Source Code using the WordPress HTML Editor

If you want to directly edit the theme code, you can access the Theme Editor and make all the modifications in the theme files.

To access the Theme Editor, go to Appearance > Theme Editor.

Here WordPress will give you the warning to make sure you don’t edit any critical theme files.

WordPress how to edit home page

Simply click on I understand and then select the file you want to edit from the right side.

Note: Take a full website backup before making any changes in the Theme Editor. And if you’re not sure how to edit the code, it’s better to hire a WordPress expert as any mistake here can break your WordPress site easily.

Editing WordPress – Summary

As we discussed in this post, you can use the new Gutenberg Block Editor to edit your WordPress website or try the powerful but very easy to use WordPress page builders. You can even edit the HTML of any page with Gutenberg blocks.

Overall, WordPress is a robust content management system with no particular restrictions on how you can edit the pages and the code, allowing for greater control over the website.

By following the steps listed above you should be able to start learning WordPress pretty fast and also be able to make all the initial edits you need to your new WordPress website.

If you have any questions related to this guide (or if you want us to extend it and cover more questions about editing WordPress sites), please let us know in the comments below.

Further reading:

Photo of author

Article by:

Andrea Larson

Leave a Comment

Special Divi Deal!
Divi Builder + Divi Theme + Extra Theme + Monarch + Bloom
We're running a short survey on WordPress and would really appreciate your input.
Please take a minute and help us get to know you better!
Hey There!