How to Edit WordPress Code – HTML, CSS, PHP
While WordPress makes it simple for non-coders to administer a website, you’ll definitely want to change code in WordPress at some point to have greater control over how your site appears or operates.
This post will explain you how to change code in WordPress securely in a few different methods:
- Editing HTML for Individual Posts or Pages
- Editing Your Theme’s PHP Code
- Adding Custom CSS to Your Website
How you can edit WordPress code:
You could change your WordPress code to tweak several sections to have greater control over how your WordPress site appears and functions:
- You may change HTML code for individual posts or pages using the new block editor or the old editor.
- Use a child theme to change the source code of your WordPress theme. Consider utilizing a plugin to keep track of code snippets you add to your theme’s or functions.php file.
- Use the Additional CSS area in the WordPress Customizer or a plugin like “Simple CSS” if you only want to add custom CSS.
Editing HTML for Individual Posts or Pages
Let’s begin by accessing the source code for individual WordPress posts, pages, or other post types, which is the simplest method to modify WordPress HTML.
Edit WordPress HTML in Gutenberg
In Gutenberg, there are a number of different ways to work with HTML. To begin, if you only want to add your own HTML code to a piece of content, I would advise against editing the full source code of your article, since this would only confuse things more. Alternatively, you may use the dedicated Custom HTML block to paste the HTML you wish to use.
However, there may be times when you need to change the HTML of a separate block directly. To add a nofollow tag to a link in the block editor, for example, you’ll need to change the HTML of that block.
You may use the Code Editor from the main Tools & Options menu if you wish to alter the HTML for your entire article. You may also use the keyboard shortcut Ctrl + Shift + Alt + M to switch between code and visual editing.
Edit WordPress HTML in Classic Editor or TinyMCE
You can modify HTML for your whole article in the Text tab if you’re still using the Classic WordPress editor (TinyMCE).
Editing Your Theme’s PHP Code
Let’s move on to the more important topic of how to change code in your WordPress theme. Because the stakes are a little greater, we’ll need to answer a few questions first before diving into the how-to.
What makes the stakes so high? Simply put, it’s because if you make a mistake here, you risk breaking your site!
WordPress has made it far more difficult to do this by accident in recent editions, but changing your site’s source code is always going to open the door to problems, so be sure you do it securely.
- Use a child theme for any direct code edits
- If you wish to modify code in WordPress for a different purpose, such as adding a tracking script to the head> section of your site or adding a snippet to your theme’s functions.php file, consider using a plugin instead of changing code in your child theme.
- Use the In-Dashboard WordPress code editor
- Use SFTP to edit code in WordPress
Adding Custom CSS to Your Website
You don’t need to use the in-dashboard code editor or SFTP techniques if all you want to do is add custom CSS to WordPress rather than modify the HTML or PHP code.
You may use the WordPress Customizer instead. This technique has the added benefit of allowing you to preview your changes in real time, in addition to being a simpler alternative.
Go to Appearance → Customize in your WordPress dashboard to get started. After that, look for the Additional CSS option in the WordPress Customizer. This will bring up a code editor where you can enter your CSS. As you make changes to CSS, the live preview of your site will refresh immediately to reflect those changes.
Both the new block editor and the traditional editor provide direct HTML editing capabilities if you wish to alter code in a single WordPress post or page.
If you wish to modify the source code of your WordPress theme, however, there are a few things to keep in mind:
- Instead of editing the parent theme’s code directly, always use a child theme.
- Consider adding a plugin to handle snippets added to the or functions.php file, since these plugins can provide a more straightforward and controllable solution.
If you still need to make direct code modifications following those considerations, go to Appearance → Theme Editor in your WordPress dashboard and modify your child theme’s source code. You may also use SFTP to connect to your site and edit code that way.
you might like
How to Create a Custom Widget in Elementor
Elementor is a versatile page builder for WordPress with a lot of widgets straight out of the box.read more