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
- WordPress Editing Basics
- How to Edit WordPress Site Using the Block Editor (Gutenberg)
- How to Edit WordPress Site Using the Old Classic Editor
- How to Edit WordPress Site with Page Builders
- How to edit WordPress Code
- How to Edit WordPress Home Page
- How To Edit Header in WordPress
- How To Edit Footer in WordPress
- How To Edit Permalink in WordPress
- How To Edit Menu in WordPress
- How To Change WordPress Site Title
- How To Edit Mobile Version of WordPress Site
- Useful WordPress Shortcuts & Tips
- Editing WordPress – Summary
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
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.
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.
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
📄 Posts & Pages
There are two forms of content on WordPress:
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.
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.
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”:
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).
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 Blocks||Formatting Blocks||Layout Blocks|
|List||Custom HTML||Page Break|
|Audio||Classic||Media and Text|
This is how some of these blocks work:
- Paragraph block
- Buttons block
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)
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.
You can also open any existing post/page from Posts/Pages to edit.
Now on the page editing screen, you can start adding (or editing) content.
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.
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.
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.
You can also add other content elements by clicking on the plus icon and using the left sidebar’s search field.
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
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.
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
- 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!
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.
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.
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.
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.
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.
Watch this video to learn more about Elementor and what you can do with this powerful page 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.
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.
To edit the content of any widget, you can select it and then edit everything in the settings popup.
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…
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.
To edit the HTML of the entire page, click on the menu icon on the right sidebar and then select Code Editor.
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.
Simply click on I understand and then select the file you want to edit from the right side.
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:
- Go to Settings > Reading in the WordPress dashboard.
- Then click on “A static page” option and select the page that you want to set as your homepage from the drop-down list.
- Click on “Save Changes”, and you’re done!
Now to edit the homepage, navigate to Appearance > Customize.
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.
🔔 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)
How To Edit Footer in WordPress
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:
- By going directly to Widgets:
- 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.
How To Edit Permalink in WordPress
Permalinks are simply the permanent URLs of your WordPress posts and pages.
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:
- Choose the permalink structure you want and click Save Changes:
To change a permalink of an individual post/page look at the right sidebar options on Gutenberg:
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:
- Make all the changes you want and click Save Changes:
How To Change WordPress Site Title
You can change your WordPress site title in two places:
Let’s look at each option.
How to change your WordPress site title in Customizer:
- Go to Appearance > Customize
- Next click Site Identity
- Make your edits and click Publish
How to change your WordPress site title in Settings:
- Go to Settings > General
- 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
- Look at the options at the bottom of the sidebar:
- 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:
- Most of other WordPress page builders also offer responsive editing.
Useful WordPress Shortcuts & Tips
|See the full list of all shortcut||Shift + Alt +H||Ctrl + Option + H|
|Save changes||Ctrl + S||Cmd + S|
|Copy a block||Ctrl + Shift +D||Cmd + Shift + D|
|Delete a block||Alt + Shift + Z||Ctrl + Option + Z|
|Insert a link||Ctrl + K||Cmd + K|
|Copy a block/text||Ctrl + C||Cmd + C|
|Paste a block/text||Ctrl + V||Cmd + V|
|Move down without line break||Shift + Enter||Shift + 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):
- 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.
- 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.