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

How to Edit WordPress site

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: yourwebsite.com/wp-admin/)
  • 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 to look 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 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

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:

Subscribe To Our Newsletter

Get updates and learn from the best

Article by:

More To Explore

WordPress Pros and Cons before choosing it
WordPress

WordPress Pros and Cons (Explained)

WordPress had been and still is the leader in the website development industry powering more than 35% of existing websites on the internet (as of

Leave a Comment

Do You Want To Boost Your Website?

drop us a line and keep in touch

Divi black friday sale

Biggest Divi deal EVER!