Scroll to top
USA
651 N Broad St, Suite 206,
MiddleTown, New Castle,
Delaware - 19709
Canada
635 Ashprior Avenue,
Mississauga, Ontario,
Canada - L5R3N6
India
34, Shiwanshu Bunglows
Vadodara, Gujarat - 390007

How to edit WordPress code? (CSS,HTML): A Guide for Beginners

81 / 100

While WordPress comes with pre-existing amazing features, meaning your website can look beautiful and be perfectly functional at the same time without writing one line of code.

WordPress offers a huge collection of themes and plugins for websites which makes it easy for non-coders in building their dream site.   

With easy access to themes and plugins, WordPress allows users to customize the appearance of their site or install a new plugin from the WordPress directory. In addition to adding more functionality to your website, installing plugins could be one of the best solutions.

How to edit WordPress code?(CSS,HTML): A Guide for Beginners

In short, edits to the WordPress source code can be avoided in most conditions.

However, there are times when you want to add additional themes and effects on your post. 

This guide will illustrate how to safely edit code in the WordPress editor.

What You WIll Go Through?

How You Can Edit WordPress Code:

To manage how your WordPress web page appears and functions, you may edit your WordPress code to personalize specific areas:

  • The new block editor and the classic editor permits you to edit HTML code for individual posts or pages.
  • Use a child theme if you want to edit your WordPress theme code.
  • If you simply need to feature custom CSS, you may use an additional CSS area in the WordPress Customizer or a plugin like “Simple CSS”.

How to Edit HTML in WordPress

The simplest way to edit WordPress HTML is by accessing the source code for individual WordPress posts, pages, or other post types.

img 5f50cd12824c3

You can do this easily by either the new WordPress block editor (Gutenberg), as well as the older TinyMCE editor.

In the classic editor, you can easily switch between the TinyMCE editor to the HTML editor. Now, let’s see how to edit with both of them.

How to Edit WordPress HTML in Block Editor (Gutenberg)

If you want to add HTML code to your content, we suggest not to edit the entire code at once. This makes the process unnecessarily complicated and even a simple error in your code can do more harm than good.

To directly edit the HTML of a different block, you’ll need to edit the HTML of that block.

img 5f50cd1509931

Click on the options for an individual block, choose EDIT as an option. This lets you edit the HTML for a particular block.

Or, if you want to edit the HTML code for the entire post, simply go to Code Editor > Tools & Options from the dropdown menu or, an easy shortcut is – Ctrl + Shift + Alt + M.

How to Edit the Source Code in WordPress Theme

You might need to change a certain location of your text or the logo on your screen. Now, this is a dangerous zone to step into, why may you ask?

img 5f50cd1671987

Editing source code in a WordPress theme has not only become difficult, it leads to open doors for bigger issues and might even break your site.

If you are a non-coder, making a mistake here can leave your site untraceable.

Let’s look at some tips before editing code in WordPress themes.

Use a Child Theme for Any Direct Code Edits

  • If you need to edit code in theme files, use a child theme rather than making edits to the parent theme. Any code changes in a parent theme you make will directly override when you update your theme.
  • A child theme allows you to promptly update the parent theme without losing any changes in either of them.

Consider Using a Plugin Instead of Editing Code in Child Theme

What about site owners who want to add features like adding a tracking script to the head section of their site? These little tricky yet interesting features are better off done with a plugin.

However, if you want to edit code in WordPress for a different reason – like adding a tracking script to thesection of your site or adding a snippet to your theme’s functions.php file – you might be better off using a plugin instead.

For example, the Head, Footer, and Post Injections make it smooth to inject code snippets where needed. And due to the fact those code snippets are all segregated into the plugin’s interface, it’s simpler to manage them afterward.

Similarly, if you’re adding a code snippet that could go in your child theme’s functions.php file, the free Code Snippets plugin makes a great option.

In summary, if you want to edit code in WordPress to add snippets to your theme’s…

  • section
  • Functions.php file

…then you should use a plugin instead of directing editing your theme’s files, as it will make it easier to manage and ensure that they don’t get overwritten upon theme update.

If you need to make other edits, let’s dig into how to edit the source code for your theme.

Use the In-Dashboard WordPress Code Editor

We always suggest our users to backup their site before planning to edit their theme code. 

Next, you can access the in-dashboard theme code editor by going to Appearance → Theme Editor.

img 5f50cd1e87714

Here, WordPress will first give you a warning to backup your site in case you didn’t.

Then, use the sidebar on the right to navigate between different theme files and the code editor itself to make edits.

Another way to edit code in WordPress is by adding custom CSS. Let’s understand this.

How to Add Custom CSS to WordPress

Unlike editing HTML or PHP code in WordPress, you don’t need to use an in-dashboard code editor to customize CSS in WordPress.

An easier way is to use the WordPress Customizer. Beyond being a simpler option, another benefit of this approach is that you’ll be able to preview your changes before applying them.

Step 1:  Go to Appearance → Customize in your WordPress dashboard

Step 2: Look for the Additional CSS option in the WordPress Customizer

That opens a code editor where you add your CSS.

Also, you can edit CSS while creating a post by clicking on a particular block and then add the custom CSS for that particular block.

img 5f50cd20bb8eb

An alternative is to use the Simple CSS plugin  – It allows you to add custom CSS to individual posts or pages. 

That said, if you want to add hundreds or thousands of lines of custom CSS – another option is to create your custom CSS stylesheet and use wp_enqueue_scripts to add it to your theme.

Conclusion

While Editing code in WordPress can be done with both, the classic editor and the new block editor,  there are few things to consider before editing the WordPress theme code. 

  • Always use a child theme before making any edits/updates.
  • Use a plugin to simplify the process. These plugins offer a safe and manageable process.

In addition to custom, CSS requires no edits to the theme code, besides just use additional CSS in the WordPress Customizer or you can use plugins like Simple CSS.

We hope this article helps you edit your website code easily.

If you liked this article, let us know in the comments section below. Make sure you follow WP Uber for more informative guides.

WP Uber offers detailed site health reports and customized security solutions for WordPress websites.

Author avatar
Tim Michaels
I am into WordPress and web development for the last 10 years. I use my experience to help people just starting with WordPress. Follow my blog at WP Uber for everything related to WordPress.
We use cookies to give you the best experience.
Do NOT follow this link or you will be banned from the site!