How to Edit WordPress Site

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

Siteefy content is free. When you purchase through our links, we may earn an affiliate commission.

Siteefy content is free. When you purchase through our links, we may earn an affiliate commission.

Over the years, WordPress has evolved from a blogging platform to a complete content management system — now used by around 42% 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 WordPress 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:

  • The WordPress website admin URL (Example: yourwebsite.com/wp-admin/)
  • Login credentials of the admin area
  • Gutenber (or WordPress Classic Editor) installed and available
  • Page builder (e.g. Divi or Elementor) if you want to edit codeless on front-end

Once you have all these, open the admin URL and log in to your WordPress dashboard.

How to log into WordPress:

  • Go to your WordPress login page (usually at yourwebsite.com/wp-admin/)
  • Use your username or email address and password to log in
  • Sometimes you can also log in directly from your WordPress hosting dashboard without using login credentials
WordPress login page
This is how a standard WordPress login page looks like.

Once successfully logged in, you land in your WordPress dashboard.

WordPress dashboard is the place where WordPress editing happens if you are not using a front-end page builder.

WordPress Dashboard
This is how a default WordPress Dashboard looks like.

Once you have successfully logged in to your Dashboard, you can start editing your WordPress website.

⚠️ Make sure you backup your site before editing as wrong edits can cause unexpected issues. It’s always a good idea to have a backup that you can restore if anything goes wrong.

Most quality web hosting companies (like Kinsta) provide automated backups. If this is not the case with your hosting provider, you can use a backup plugin like UpdraftPlus.


Edit Your WordPress Site Code-Free With Divi

WordPress Editing Basics

In this section, we’ll discuss the basic WordPress elements that you will most likely deal with when editing your WordPress website.

These elements are:

  • Posts & Pages
  • Theme
  • Editor

📄 Posts & Pages

There are two forms of content on WordPress:

  • Posts
  • Pages
WordPress Posts and Pages
WordPress Posts and Pages

WordPress posts are for dynamic and time-sensitive content. These are usually blog articles. However, if you want you can use them also for other time-sensitive content like events.

The posts are displayed in reverse-chronological order – the newest ones are displayed first. Posts usually have RSS feed and comment section connected to them.

In contrast, WordPress pages are for static content.

Homepage, contact us, about us, privacy policy, and other types of static pages are usually uploaded as WordPress pages.

So, when you edit WordPress you edit one of these two things – posts or pages.

You can also make edits in WordPress dashboard, but those edits are usually of technical nature.

🎨 Theme

WordPress theme is a framework that controls the overall design of a WP website and in some cases adds additional functionality to the website.

This additional functionality may vary from none to impressively rich toolsets.

In a standard case, WordPress comes with default WP themes pre-installed.

These themes are usually given years instead of names, such as “Twenty-Twenty-One”:

Twenty Twenty One WordPress Theme
WordPress Default Theme Twenty Twenty-One

✏️ Editor

The current default WordPress editor is Gutenberg (also known as WordPress Block Editor).

Gutenberg was introduced in 2018 with WordPress 5.0 version. It replaced the previous WordPress editor which is now called “classic” WP editor (aka TinyMCE).

Default WordPress Editor - Gutenberg
This is how editing a WordPress site with Gutenberg looks like.

Generally, Gutenberg is quite intuitive. It’s based on blocks and every block is a piece of content.

Currently, there are the following Gutenberg blocks available:

General BlocksFormatting BlocksLayout Blocks
ParagraphTableSeparator
HeadingCodeSpacer
ListCustom HTMLPage Break
QuotePreformattedButtons
ImageVerseColumns
GalleryPullquoteMore
AudioClassicMedia and Text
VideoGroup
FileReusable block
Cover

This is how some of these blocks work:

  • Paragraph block
Using paragraph block in Gutenberg (WordPress)
This is how to edit text in WordPress
  • Buttons block
How to add a button to WordPress (Gutenberg)
This is how to create a button in WordPress

So, yes, everything is extremely user-friendly and intuitive.


How to edit pages in WordPress

Editing pages in WordPress is extremely easy.

To add and start editing new content on WordPress using Gutenberg:

1. Go to posts/pages in your WordPress Dashboard (or simply hover over it)

Adding new post on WordPress

2. Click “Add New”

3. Gutenberg editor will load

4. And here you can start adding new content

5. Once you are done editing you can either save the post as a draft or publish it:


To edit existing content on your WordPress website:

1. Go to posts/pages in your WordPress Dashboard

2. Click on the name of the post or hover over and click “Edit”

3. Gutenberg editor will load

4. Click on anything you want to edit and look for the options that pop up:

5. If you want to add a new element (block) click the plus icon (or type /) and choose what you want to add:

6. Most of the blocks have further customization options in the right sidebar:

7. Customize things until you get the final output you want

So, this was the basic overview of editing on WordPress. Now let’s get into the details.


How to Edit WordPress Site Using the Block Editor (Gutenberg)

To edit any post or page in the WordPress site using the new Gutenberg Block Editor, navigate to Posts/Pages > Add New in the WordPress dashboard.

Adding new post on WordPress

You can also open any existing post/page from Posts/Pages to edit.

Editing existing post on WordPress

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

WordPress html editor

First, click on the Add title block and enter the page title you want. For existing content, you can edit the title the same exact way – by clicking on it.

how to edit wordpress site

Next, click enter (takes you to the first line after the title) and start typing to add the content you want.

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

how to edit pages in wordpress

Additional customization settings (for example typography settings like font size, drop cap, and font color for paragraph block) are available by default for all blocks.

To add an image to 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 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.

🔔 Note

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

Alternatively, you can use the Gutenberg block called Classic. It’s the same classic TinyMCE editor but in the form of a block.

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

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:

  • 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 the design and behavior of the page and its elements.

The classic WordPress editor is designed to keep everything simple and for basic things only. In contrast, Gutenberg and 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 the 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 sophisticated landing pages out of the box.

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

WordPress 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.

WYSIWYG mode makes editing WordPress blogs and pages a breeze!

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.

Editing WordPress with Elementor

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

You can also get Elementor for free here.

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 sidebar style tab.

Elementor Styling settings

You can add as many content widgets as 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 later.

Elementor Publish

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


Elementor Showcase
See the real websites created with Elementor

🔔 Check also:

Elementor Review 2021
Elementor Free vs Pro
Gutenberg vs Elementor

Divi Builder

Divi is another super 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.

Divi-WordPress

Unlike Elementor, Divi is a premium-only page builder. There is no free version of Divi Builder available. But Divi provides a free in-browser live demo which can be accessed here.

To edit your website with Divi Builder, go to the 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 comes for free with Divi Builder.

After that, you can click on the plus icon to add any row, column, or content element you want and start editing.

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 the Save button on the right.

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


Live Divi Demo
Take Divi To Test Drive

🔔 Check also:

Divi Review 2021
Divi vs Elementor
Elegant Themes Review
Complete list of WordPress Page Builders


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

This is 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 editing code in WordPress. If you’re not sure how to edit the code, it’s better to hire a WordPress expert as any mistake here can easily break your WordPress site.


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.

How to set front page 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 Customizer, you can click on the pencil icon to edit any element you want, and all WordPress home page edits will be in the live preview, in this case, so you can see how everything looks before publishing the page.

Once the homepage is final, click on 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 exactly 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).

To learn more about how to edit homepage on WordPress check our article here. (Yes, we have a whole article on that 😎).


How To Edit Header in WordPress

Editing WordPress header will predominantly depend on what customization options your theme (or page builder) provides.

Premium themes usually provide a user-friendly way to make your heading look exactly the way you want it.

So, the first option would be to check if your current theme has an in-built way of editing the WordPress header.

For example, Divi theme provides a tool called Theme Builder which allows building tons of different things including custom-designed WordPress headers in a code-free manner:

Elementor offers a Theme Builder capable of customizing WordPress headers too:

So, using a theme builder is probably the most beginner-friendly (and user-friendly) way of editing WordPress header at the moment.

Without something like a theme builder (or alternative built-in functionality), you will most likely have to deal with code.

Other ways of making edits to WordPress header are:

  • Using a standalone plugin (may require coding)
  • Editing your theme’s header.php file in WordPress Theme Editor (requires coding)

Editing WordPress footer is a little easier than editing the header. This is mostly because the footer is a standard widgets place on WordPress websites and there are some easy-to-use built-in instruments to edit the footer in WordPress.

Here is how to customize WordPress footer:

  • By going to Appearance > Customize > Widgets:
WordPress Customizer-menu
  • By going directly to Widgets:
Widgets WordPress
  • Using Theme Builder (Divi, Elementor, Beaver Builder)
  • Editing footer.php file (requires coding)

Check our article on editing WordPress footers for more information on this.


Permalinks are simply the permanent URLs of your WordPress posts and pages.

Example: https://siteefy.com/how-to-edit-wordpress-site/

This is the permalink of this post.

Default WordPress permalink structure is based on the page/post name and date when the page/post was published.

But this can be easily altered.

Here is how to change the default permalink structure on WordPress:

  • Go to Setting > Permalinks:
How To Edit Permalink in WordPress
  • Choose the permalink structure you want and click Save Changes:
Permalinks Settings WordPress

To change a permalink of an individual post/page look at the right sidebar options on Gutenberg:

Editing URL Slug on WordPress

In WordPress Classic Editor, this option is right under the page/post title


How To Edit Menu in WordPress

Editing menu in WordPress is easy:

  • Go to Appearance > Menus:
How To Edit Menu in WordPress
  • Make all the changes you want and click Save Changes:
Editing WordPress menu

How To Change WordPress Site Title

You can change your WordPress site title in two places:

  • Customizer
  • Settings

Let’s look at each option.

How to change your WordPress site title in Customizer:

  • Go to Appearance > Customize
Theme Customizer
  • Next click Site Identity
How to change your WordPress site title in Customizer
  • Make your edits and click Publish
Changing WordPress site title

How to change your WordPress site title in Settings:

  • Go to Settings > General
How to change your WordPress site title in Settings
  • Change your site title and click Save Changes.

How To Edit Mobile Version of WordPress Site

There are two beginner-friendly ways of editing the mobile version of your WordPress website:

  • In WordPress Customizer
  • With a page builder

Let’s look at both options.

How to edit the mobile version of your WordPress website with Customizer:

  • Go to Appearance > Customize
Theme Customizer
  • Look at the options at the bottom of the sidebar:
How to edit the mobile version of WordPress website with Customizer
  • Switch between Desktop, Tablet and and Smartphone options to see how your website looks on different devices and make edits.

How to edit the mobile version of your WordPress website with a page builder:

  • Use Divi Responsive Editing:
  • Elementor Responsive Editing:

Useful WordPress Shortcuts & Tips

ShortcutWindowsMac
See the full list of all shortcut Shift + Alt +H Ctrl + Option + H
Save changesCtrl + SCmd + S
Copy a block Ctrl + Shift +D Cmd + Shift + D
Delete a blockAlt + Shift + ZCtrl + Option + Z
Insert a linkCtrl + K Cmd + K
Copy a block/textCtrl + C Cmd + C
Paste a block/textCtrl + VCmd + V
Move down without line breakShift + EnterShift + Enter
Switch to Code Editor (Gutenberg) Ctrl + Shift + Alt + M

Other useful WordPress editing tips:

  • To insert images you can simply drag and drop them from your PC to Gutenberg without using Media Library. Copy and paste works too.
  • To work distraction-free check Gutenberg’s Spotlight and Fullscreen modes (to see these options you need to click the three dots in the top right corner):
Gutenberg Spotlight and Fullscreen modes
  • Document outline function in Gutenberg is quite useful. It shows the number of words, characters, headings, paragraphs and blocks used in the article plus overall document outline.
Document outline in Gutenberg
  • Copying from Google Docs to Gutenberg is a breeze – just copy and paste, and everything will look perfectly neat and clean.

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.


FAQ

Further reading:

Photo of author

Article by:

Saksham Kumar

WordPress developer, SEO, and content manager at Siteefy. Saksham is responsible for conducting deep research and analysis, reviewing WordPress-related products, and writing his own posts.

3 thoughts on “How to Edit WordPress Site? (Easy Step-by-Step Guide)”

  1. Saksham, thank you very much. You have written this article beautifully step by step. And this article will be very effective for newcomers.

    Reply
  2. Hey Saksham,

    Excellent share, so much helpful information on this post.
    I love how to edit WordPress Code and Useful WordPress Shortcuts & Tips.

    I’m going to put this into use sooner. Amazing work!

    Reply

Leave a Comment

BIGGEST DIVI DEAL EVER