Have you ever started working on your WordPress website to add HTML or CSS and found that you just can’t make it do what you want? Maybe you’re trying to change the color of your headings or add padding to certain images, and no matter how hard you try, you just hit a brick wall?
This is a common experience with WordPress, and despite appearances, it’s not an inherent flaw. Technically, you can customize your website in any way you wish if you know HTML and CSS. The problem is, the platform doesn’t make it easy to make these customizations through a visual editor. That’s because HTML and CSS are controlled by your theme, not the core installation.
If you want to change your design you need to edit your theme either through a visual interface or pure markup. However, not all themes come with a user-friendly visual editor, which makes customizations challenging.
Are you tired of going in circles trying to customize your WordPress website with HTML or CSS? You’ll be happy to know there are ways to get more control over these things.
Related to customizations, there are two main things you’ll need to do when building or editing your WordPress website: add custom HTML/CSS and preserve your HTML formatting. Both of these require different solutions. First, let’s start with adding your own custom HTML markup and CSS to your website.
First things first, before you make any changes – always activate a child theme even if you don’t think it’s necessary. At some point in time, you will wish you had one, and if you don’t start out with a child theme you’ll have regrets.
If you’re not familiar with child themes, it’s not as complicated as it sounds. Say you’re using a theme called “Midnight Blue” and you want to customize your CSS to change the colors. Without a child theme, you will be editing your theme files directly. This won’t be a problem until you need to update your theme. When you download the updated files, it will wipe out all of your customizations. Skipping updates isn’t an option since you need to keep your site secure, so the answer is to use a child theme.
While a standard theme can have hundreds of files, a child theme consists of just a handful of theme files that are commonly edited, like the functions.php and style.css files, for example. These files, sitting in your child theme folder, are designed to override the theme’s default styles. Any customizations you make to your child theme’s files won’t be lost when you update your theme; they are separate files stored in separate folders.
Good themes will usually come with a child theme folder, but not always. If you didn’t get a child theme, use this HubSpot guide to create your own. It’s not hard, but if it’s above your understanding, just hire a developer to do it for you; it shouldn’t cost much.
Once you have a child theme installed and activated, you’re ready to start customizing.
In the visual editor, you can add custom HTML blocks to your site from the menu that appears as you edit a page. It can be a little challenging to use at first, but once you get the hang of it you shouldn’t have any trouble.
Although the block editor lets you add custom HTML to your content, it doesn’t allow you to create custom CSS. You have to edit your stylesheet elsewhere. Once you create new styles, then you can use the block editor to add CSS styles to your content, but you first need to define those styles by customizing your stylesheet.
To change the style of your website, it’s easy enough to copy and paste HTML or CSS snippets. There are plenty of websites that will give you the code for whatever it is you’re trying to achieve. As long as you know exactly where to place these snippets and how to customize them, this is an excellent option.
For example, say you want to completely overhaul your typography. Maybe you want a different typeface, font color, and tighter line and letter spacing. You can use an online CSS typography generator to perfect your desired styles and then copy it to your stylesheet.
Just remember to add your custom CSS to your child theme, use the custom CSS section, or use a custom CSS plugin. Never edit your theme files directly or you risk losing all your changes when you update that theme.
This may not be what you want to hear, but if you’re struggling with formatting your website to your specifications, you may want to consider switching platforms. Although WordPress has a history of being the go-to platform, it’s not the only solution and there are easier options.
If you align best with visual editing, check out Webflow and you’ll see a huge difference right away. Webflow is a lot easier to work with and it’s purely visual, which means you can design a pixel-perfect site exactly as you want. You won’t need to know HTML or CSS to create your ideal design and change the color or position of key page elements.
You have a few options to add custom styles to your website. You can use a plugin, use your theme’s native “custom CSS” feature, or add your styles to your child theme’s stylesheet. All are acceptable methods.
To use a plugin, you just have to find the one you want to use. Just search the plugin directory for “custom CSS” and choose the one you like best.
If your theme comes with a feature to add CSS (it should), navigate to:
Appearance > Customize > Additional CSS
In this area, add your custom styles.
To add new styles to your website directly through your child theme’s stylesheet, find the file through your FTP connection, make your edits, and save it to your server. This option is easier when you’re already familiar with code.
Once you know how and where to add custom HTML and CSS to style your website how you like, it’s time to tackle a common issue you’re bound to run into at some point.
One of the biggest problems with controlling your custom HTML is that switching between the visual and text editors in WordPress will strip certain formatting, like paragraph (P) and line break (BR) tags. This is unfortunate because sometimes it’s necessary to switch between the two editors, especially when you have multiple people editing your website. You might feel comfortable working with pure HTML, but many people don’t.
Depending on your specific circumstances and needs, here are some solutions you can implement to preserve your HTML formatting.
If it’s possible, edit your website only in one type of editor. If you choose to edit in pure HTML, go to your user settings and disable the visual editor for your account so you don’t accidentally click that button. This will work if you are the only person who edits the content. If other people edit the same pages and switch between the visual editor and HTML interface, this can strip some of your custom HTML.
If you prefer the visual editor, you may still struggle to get your line breaks to work the way you want. However, in some cases, using a visual editor helps to maintain custom HTML formatting. If you want to try visual editing, but don’t like the new Block editor, just install the Classic Editor plugin to use the more familiar rich text interface.
Once you create your page content the way you want it, don’t switch to the HTML editor to make sure your customizations don’t get stripped.
Perhaps the best kept secret solution is the plugin called Raw HTML. This plugin has been around for a long time and it’s good. You can prevent WordPress from creating smart quotes and other characters, disable automatic paragraphs, disable graphical emojis, and stop ampersands from being converted into HTML.
You can override some of the custom HTML issues by altering your CSS. For example, blockquotes don’t usually recognize line breaks, and you may find yourself putting paragraph tags around each line or trying to double up on line break tags. However, when you switch back to the visual editor, your HTML will usually be stripped.
If you’re trying to get blockquotes to consistently recognize line breaks, you can define a class for your blockquote paragraphs that styles all <p> elements inside the <blockquote> element with extra padding at the bottom to push the next paragraph down. You can also add a horizontal rule between lines and then style it to be invisible. Or, you can just make each new line a separate blockquote.
These are workarounds, and are just ideas you can use if all other methods fail.
It’s frustrating trying to customize your website when you aren’t a developer. Unless your WordPress theme comes with an absolutely amazing style editor, you really need to know some HTML and CSS to make basic changes to your site.
Instead of wasting your time trying to figure it all out, contact us about our WordPress development services. At Website.design, our team of expert web designers can customize your site to your liking, or we can create a new theme for you from scratch. Whatever you need, we’ve got you covered. Contact us now to learn more!
.svg)
