I need custom HTML CSS code
WordPress plugins help expand the functionality of your website and do advanced digital work with minimal effort. However, knowing how to edit HTML in WordPress, as well as your website's other source code, comes in handy in a variety of situations.
Let's say your website is attacked with malicious malware or you update a plugin and it crashes your website. Maybe you just want to make only some advanced adjustments. In any of these cases, coding in WordPress can be the next step. Fortunately, there are many ways you can go about it.
In this post, we'll walk you through the different ways you can access and edit the source code of your WordPress website, and how you can change your WordPress theme without coding. Let's get started!
Also read: Editing WordPress Footer - Step-by-Step Instructions
Why it is important to know how to edit your WordPress source code 👈🏻
By default, WordPress is an extremely intuitive and easy-to-use platform. Thanks to themes and plugins, there are many ways to customize and change your website without touching a line of code.
Technically, you don't need to access any of your website files or code to have a fully functional and well-designed website. The WordPress dashboard, plugins, and themes make customizing and personalizing your website quick and easy.
However, there are times when you want to implement more control and make advanced customizations. Perhaps the change you want to make is not an option for the design or the plugins you use.
Another possibility is your website crashing or some other error preventing you from accessing your admin dashboard. Chances are you'll need to edit your WordPress source code to fix the problem.
How to edit HTML in WordPress 💻
First things first, let's discuss how to access your HTML code in WordPress. Be aware that making changes to your website's code always involves some risk. Editing your HTML is relatively safe compared to other techniques we'll discuss in this post, but it's still wise to proceed with caution and back up first.
How to edit HTML in the WordPress Classic Editor
If you want to add or edit the HTML of a WordPress page or post, you don't really need access to your website's source code. In the classic editor, you only have to switch from the visual editor to the text editor on the backend. This shows you how the HTML works behind the scenes:
From the text editor, you can access, change, and update the HTML code of any page or post with just a few clicks. You can view your changes at any time by switching back to the visual editor. When you're done, make sure to save your post or page.
Also read: OptimizePress 3 Test & Experience
How to edit HTML in the WordPress block editor (Gutenberg)
If you're using the block editor (Gutenberg), switching from the visual editor to the text editor (or code editor) requires a few more steps. However, you also have several options for editing your HTML, including changes to the entire page or post, or to individual blocks.
To edit the HTML of the entire page or post, click the three vertical dots in the top right corner of the editor, then select Code Editor:
This WordPress HTML editor opens. To switch from the visual editor to the text editor within a certain block, click the three vertical dots in the block toolbar and then select Edit as HTML.
Another way to add HTML to a page or post is to use a custom HTML block:
You can write your HTML code right in the block and then click Preview to see how it will look on the front end.
When you're done, save your changes to your post or page.
How to edit HTML for your homepage in WordPress
How about editing the HTML on your homepage? There are topics for which the homepage functions as a separate page. It is therefore the same process of editing HTML as described above. Simply select the appropriate page from the list on your dashboard:
You can also click Edit Page in the top management bar on your home page to go to the Classic or Block Editor.
If neither of these two options work for editing the HTML on your homepage, you might be using a page builder or a theme with a built-in homepage editor. If so, you can refer to the documentation for the relevant tool.
Also read: Create WordPress line break [manually with HTML]
How to edit HTML in a WordPress widget
Finally, you might want to add HTML to your WordPress sidebar or footer. Many WordPress themes also use the widget section to control the content on your website's homepage.
You can make these adjustments to the homepage, header and footer using a custom HTML widget:
Just navigate to Appearance> Widgets, add the Custom HTML widget to your sidebar or footer, and edit it however you want. Click the blue Save button to publish it on your website.
Get started editing the source code of your WordPress theme 🏁
If you want to edit these components (or the default template in WordPress) there are two main ways to access the theme files:
- Via the WordPress Theme Editor, which allows you to edit WordPress source code files directly in your dashboard with any web browser.
- Via the File Transfer Protocol (FTP), where you edit WordPress source code files locally and then upload your changes to your WordPress hosting environment.
We'll walk you through each of these methods in a nutshell, starting with the WordPress Theme Editor. However, there are two steps we recommend before you get started.
The first is to make a backup of your website. This will ensure that you have an updated version of your content and settings that you can refer to in case something goes wrong while editing your source code.
The second is to create a sub-topic. Whenever you modify your WordPress theme, it is best to make your changes on a sub-theme. Otherwise, your changes will be overwritten the next time you update your topic.
Once you have completed these steps, you are ready to start working. First, let's see how to edit your WordPress theme right from your dashboard.
How to edit your WordPress source code using the theme editor 🎯
If your WordPress site is still up and running and you can access the backend, you can find the source code of your site under Appearance> Theme Editor:
This editing area is where you can make any changes to the design and structure of your topic that you think fit.
If you have multiple themes installed or are using an adult / child theme combination, you can switch between themes in the upper right corner of the editor.
To select certain topic files for editing, you can choose from the list to the right of the editor.
The exact files available here will depend on your subject, but at least you should see them:
- style.css: This is your stylesheet, which includes many design-related features like the fonts and color scheme of your theme.
- functions.php: The functions.php file of your topic contains PHP code that modifies the standard WordPress functions.
When you're done editing your WordPress source code in the theme editor, make sure to save your changes. To do this, simply click the Update file button at the bottom of the screen.
WordPress will stop you from saving your changes if it finds that there are bugs in the code. This is part of what makes using the theme editor a little more secure than editing your WordPress code via FTP, which we will get into later.
Also read: WordPress Customizer loads and doesn't work
What to do if your theme editor is missing
If the theme editor doesn't appear under Appearance, your theme might work a little differently. This does not necessarily mean that you cannot edit the topic files directly. You just have to know where to look.
Check to see if your website is using a WordPress themed code editor that is somewhere else on your dashboard. Alternatively, the use of the theme editor may have been disabled for your site. For example, some security plugins hide this option to “harden” WordPress and make it harder for attackers to compromise your website.
There could also be other reasons why your WordPress theme editor is missing or inaccessible. We recommend reaching out to other members of the WordPress community, especially those who have access to the themes or plugins you are using, to find out if there is anything unique in your environment that hides this feature.
Many third-party tools require you to put code in the header of your website. In a nutshell, this means that you are working with the header.php file (which should be listed to the right of your topic editor), specifically the area enclosed by the tags:
The day can be hard to find. It can be difficult to find it. If you're having trouble finding it, press Command (or Control) + F after clicking in Notepad. It can then be found simply by typing "head" in the search bar.
You can edit the footer in the same way - just select your footer.php file instead of header.php.
After you've saved your changes, the last step is to double-check that your code has been added. To do this, go to your homepage and look at the source code.
Again, you can use the keyboard shortcut Command + F to find the tag and then see right away to see if your code was added successfully. You may need to clear your browser's cache for everything to show up correctly.
Also read: What are Trackbacks and Pingbacks?
How to add header and footer scripts with a plugin
Adding header and footer scripts manually is not your only option. There are plugins to help you with these tasks, and some themes and frameworks come with such features.
For example, if you are using the Genesis Framework, adding header and footer scripts is easy via the integrated editor. However, you can use the same functionality for each theme via a plugin.
This method is beneficial because WordPress will usually overwrite your header.php file when it updates. If you use a plugin (or some external functionality that mimics such plugins) you guarantee yourself less work. You can update the WordPress core without worrying about manually re-adding your code.
If this solution sounds appealing, we recommend the Insert Headers and Footers plug-in.
It provides a free way to easily add simple code to the header or footer of your WordPress site. Whether you're trying to add Google Analytics scripts, Adsense code, or third-party integration code, this plugin can do it all with just a few clicks.
There will be text boxes where you can add scripts to the header, body and footer of your website. When you're done, click the Save button.
- Access the file from your post or page
At the bottom of the Options menu under Advanced Areas, check the box next to Custom Fields.
Below your post editor you will now see an area where you can add custom fields:
How to edit the CSS of your WordPress site 🖋️
- Edit your CSS files in the theme editor.
- Use the built-in CSS editor of your theme within the WordPress Customizer
- Add CSS with a plugin
Which method works best for you depends on how extensive the editing you plan to do and how often you want to make changes.
How to edit your WordPress CSS via the theme editor
All of the CSS files used for the theme of your WordPress site can be found in the Theme Editor (Appearance> Theme Editor). In the list on the right, look for the files with the extension .css:
You can make your changes within the editor. When you're done, click Update File to save your changes.
How to edit your WordPress CSS using the WordPress Customizer
In addition to the WordPress Theme Editor, you can also modify your CSS with the WordPress Customizer. It can be accessed via the WordPress dashboard under Appearance> Customize:
Then click Additional CSS in the left navigation bar at the bottom:
A code editor will open where you can add custom CSS.
As you can see, this editor is quite small and mostly intended for minor modifications rather than extensive rewriting of the style of your website. It will likely be easier to make large changes in the theme editor or with a plugin.
When you're done adding custom CSS to the customizer, click the Publish button to save your changes.
How to edit your WordPress CSS with a plugin
If you want to customize the look of your website without editing your theme files directly, you can also use a plugin. This method is especially useful if you have limited knowledge of CSS. It's also ideal if you plan to make regular changes to the style of your website as it makes it easier to organize your additions.
For example, CSS Hero is an intuitive tool that allows you to edit all aspects of the design and style of your website without changing your theme files:
It's a live editor for WordPress themes that allows you to save snapshots of your changes, including different versions, and broadcast them live. It creates an additional CSS stylesheet that overwrites the original stylesheet that came with your theme. Hence, you don't have to worry about permanent damage by editing your CSS files directly.
The CSS Hero features include:
- Pre-made, editable style snippets
- Integration and support of Google Fonts and TypeKit
- A visual front-end editor to preview your changes as you make them
To get started, you can try a live demo. When you're ready to buy CSS Hero, you have several pricing plans to choose from.
After you've downloaded the plugin, you can upload it and install it on your WordPress site like you would otherwise. All you need to do is enter your license key that you received when you purchase your plan.
How to edit your WordPress source code via FTP 📥
As you may recall earlier in this post, using the WordPress theme editor is just one method of accessing and modifying your website's source code. Another is to use an FTP client like FileZilla. These types of tools allow you to connect to your website's server to access the files stored there.
With this approach, you make changes to your file locally and then upload the changed files again to your WordPress hosting environment. This is key when you can't access your website's backend or when you're doing PSD> WordPress work.
Here's how to get started with FTP in four easy steps.
Also read: The 6 best slider plugins for WordPress
Step 1: Find or create FTP access data
To connect to your server via FTP, you first need your FTP access information, including a username, password and host name. You should find these listed in your hosting account.
If not, you can create your username and password in the cPanel under Files> FTP accounts:
Click this icon and then select Add FTP Account:
On the Add FTP Account page, do the following:
- Add a unique identifier for your FTP username. Your FTP username will be [email protected], so copy / paste it somewhere safe.
- Create a strong password. We recommend using the password generator to create a password that will receive a 100/100 strength rating. It will be your FTP password, so copy / paste it to a safe place as well.
- Always use public_html for the directory extension.
- Your quota should always be unlimited.
Click Create FTP Account and you're done! If you're having trouble creating the FTP credentials, you can google "[your hosting provider] FTP".
If you can't find support documentation, you can always contact your hosting provider directly for help.
Step 2: Load an FTP client like FileZilla
Once you've got your FTP login credentials in order, the next step is to download an FTP client like FileZilla.
This is a free FTP solution that allows you to transfer files back and forth between your computer and your website's server. However, there are other FTP clients out there too, so don't hesitate to use the one that best suits your needs.
Step 3: Log into your web hosting environment via FileZilla
After FileZilla finishes downloading, open it and enter your FTP host name, username and password. You should have gathered all of this information in Step 1:
If your cPanel lists an IP address, you can use that as a host too. After you have entered these login data, click the Quickconnect button:
It should connect you to your server within a few seconds.
Step 4: edit your files
Once logged in, you'll have access to your WordPress source files and be able to do HTML, CSS, PHP, and JS edits as you see fit. Just right click on any file and choose View / Edit:
When you've made your changes (again, make sure your website doesn't appear with a white screen), you're ready to save the file. Then FileZilla will automatically upload them again and replace the old version.
How to edit your WordPress theme without coding 🚫
WordPress is an open source platform, which makes it extremely flexible and powerful. However, we understand that coding WordPress can be daunting for some. Fortunately, if you are comfortable manipulating your website's source code, you can still make extensive changes.
While you won't be able to change as much as you would with custom code, there is still a lot you can do with the WordPress Customizer. You can also find this under Design> Customizer.
In this section you will see instructions on how to customize the WordPress theme you have chosen. You can start with high-level items under Site Identity - which allows you to change your website's name, tagline, and icon - and then change your website's colors, menus, home page, and so on.
However, if you want to do more than what the customizer provides, you can also use additional plugins. Let's take a look at some of the most helpful plugins out there.
Also read: Edit WordPress Headers
Plugins for editing your WordPress theme without coding
If you're looking for a visual style editor, a powerful freemium option is the YellowPencil plugin:
With this WordPress CSS style editor plugin, you can customize the design of your website quickly and easily. You can make changes to any page or topic without programming. You can also preview the changes in real time. There are free and premium versions available.
Another option to consider is the Microthemer WordPress CSS editor:
This plugin is a live CSS editor for WordPress that has design-oriented grids and point-and-click editing features that allow you to precisely and easily customize your website. This is a solid option if you're using a page builder like Elementor or Beaver Builder as it comes with built-in integration.
If you want to do more than just change the style and look of your website, you can use Ultimate Tweaker:
This premium plugin includes an HTML minifier tool, drag-and-drop interface, custom icons, and more. To get a better idea of the features and functionality, we recommend exploring the plugin demo.
Also read: Thrive Architect review & experience report
WordPress plugins allow you to do a lot of things on your website. However, there are some instances when it may be necessary to access and edit your website's source code.
- How can I build my home studio
- Should we peel peaches before eating
- Where can I find a sex partner
- Which is tough JEE or NEET
- What do Python functions return?
- How much does Infusionsoft
- Why is 12 such a significant number?
- What is the use of a thermometer
- What's bad about bread
- What do and mean in Python
- Can science answer all questions
- What if ancient Rome survived?
- Can gaming PCs be used as workstations?
- Poisoned Livia Augustus
- Are there really prisons for the rich?
- Google Stadia is getting better
- Does the electromagnetic field affect our brain
- What is 5NF in DBMS
- Why did Quora delete my answer 1
- When did chess start?
- What is cross entropy
- How do American students see Chinese professors?
- Make eating fast food slow
- What happens when you eat cannabis plants