Learning the basics of HTML (Hypertext Markup Language) or any programming language can be a daunting task. Especially when you’re being bombarded with jargon you don’t understand. Luckily, you can use simple HTML basics to customize a WordPress website with comparative ease.
WordPress was developed with ease-of-use in mind, catering for seasoned professionals and complete beginners alike. Fortunately HTML and CSS code was designed with that premise in mind, too! Let’s take a look at the basics of how beginners could add simple HTML and CSS to tweak and modify their WordPress websites a little bit, without having to touch a single line of complex code.
Adding code to your WordPress website
To customize and tweak your WordPress website, there are several different places where you can add your CSS, PHP or JavaScript code. Which option you choose greatly depends on the kind of customization you plan to make. Simple CSS customizations with a few lines of CSS don’t call for a child theme for example, but can be done by using suitable plugins. Larger customizations should usually be made via child themes. Let’s see what the options are in detail.
Using a child theme for modifications
Typically, you should make all theme modifications via the use of child themes. That’s not only easier when modifying lengthy chunks of code, but it also allows you to freely update the theme you’re using at some point in the future without fear of losing your custom code. For our CSS code, we shall be using an empty child theme of the current default WordPress theme, Twenty Sixteen.
Installing a CSS plugin for customizations
An alternative to using a child theme, for adding simple and minor CSS code, is to make use of a Custom CSS plugin, such as Simple Custom CSS. This allows you to quickly add any custom CSS code to your WordPress theme, via the familiar Customizer or a standard options page, which may be a less daunting experience for beginners than diving into the world of child themes.
Using the Additional CSS of WordPress’ Theme Customizer
Another alternative to using a child theme is the Additional CSS that is made available to WordPress’ Theme Customizer since WordPress 4.7. Users can now add custom CSS directly from the WordPress admin area. This is super-easy, and you would be able to see your changes with a live preview instantly.
To add CSS to WordPress, you just need to:
- Navigate to Appearance > Customize in your WordPress dashboard to open the WordPress Customizer
- Select the Additional CSS option from the menu on the left in the WordPress Customizer interface.
Applying custom code via WordPress Text Widgets
In this tutorial, we will be adding all HTML code via the use of one of the default widgets that comes supplied with WordPress, the Text Widget. Using this widget, you’re able to quickly add any amount of text or HTML code to any of the widgetized areas within the WordPress theme you’re using.
A widgetized area is typically referred to as sidebar, but isn’t necessarily always located to-the-side. As WordPress themes get more advanced and complex in their structure and design, sidebars can appear anywhere within a theme. This gives you a great deal of flexibility with what you can add, in the location(s) made available to you by the theme, e.g. header, footer, widgetized front page or else.
Are you using a WordPress theme by MH Themes? Some of our WordPress themes (e.g. MH Magazine) offer a built-in custom CSS field within the customizer. This feature allows you to apply minor CSS changes to your WordPress website that wouldn’t justify the creation of a custom child theme. The CSS code you add in this field won’t be lost after theme updates.
Back to HTML basics – links & images
How to create a simple link with HTML? The first thing we shall look at is how to create a link. A link also is referred to as a Hyperlink and it’s the backbone of the World Wide Web, without hyperlinks the internet wouldn’t be what it is today. Using a default Text Widget, placed into any of your current themes widget areas / sidebars, please add:
This is a standard text <a href="https://mhthemes.com/">link</a>.
This is a hyperlink in its simplest form. Note how we created the link using a href, followed by the URL the hyperlink is going to lead to, in this case, to our website mhthemes.com.
Before we close the hyperlink we have a single word that will be the clickable part of the text we added to the widget. So whatever is being wrapped by the hyperlink will become the clickable element, in this case it is the word “link”. The hyperlink is then closed using
1 | </a> |
.
Open links in a new window / browser tab
Notice how when you clicked the link you left your own website, effectively closing it for the user? Sometimes you may not want to do this, especially if you’re linking to an external website that you don’t own. You can force a hyperlink to open in a new window / browser tab by making one small addition to the code above, like so:
This is a standard text <a href="https://mhthemes.com/" target="_blank">link</a>.
We’re now making use of the target attribute of a hyperlink, there are several other target options you can use but primarily you will want to stick with the above example or have no target at all, which would simply open the link in the current window or browser tab.
Display image within Text Widget
Let us now add an image below this text, add the following code to another Text Widget and place it below the widget you already have within your widget area / sidebar.
<img src="https://pixabay.com/static/uploads/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg" alt="logo" />
This will display a WordPress logo within your widget, you can replace the URL in the above code to any image URL and it will display that image instead. It is good practice and beneficial for SEO to give each image a unique identifier or name, we do this by using the alt attribute, like
1 | alt="logo" |
.
Taking care of CSS customizations
Add a custom CSS class: First we shall add a custom CSS class to the image calling it logo. That allows us to manipulate how this image, and any other image with the same class, is to be displayed:
<img src="https://pixabay.com/static/uploads/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg" alt="logo" class="logo" />
Tweaking the image via custom CSS
Control the width of the image: We can now use basic CSS as well as the logo custom CSS class we just added to style this image how we want, like so:
.logo {
width: 100%;
max-width: 240px;
}
You can control the width of the image by declaring a max-width value as shown above if you wanted to, and to ensure the image will expand and shrink accordingly when being viewed on mobile devices we have added a width value of 100% too.
Background, padding and further customizations: Let us now make things prettier to look at by centralizing the image, adding a background color and adding some spacing around the image, which is referred to as padding. We can do this by firstly wrapping the image within a container that has a CSS class assigned to it. In this example we shall call the container my-image:
<div class="my-image">
<img src="https://pixabay.com/static/uploads/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg" alt="logo" class="logo" />
</div>
We can now manipulate the container and the image within it by using CSS again:
.my-image {
text-align: center;
}
The above code will centralize the contents of the my-image container, we can apply additional attributes to the same class, like so:
.my-image {
padding: 10px;
background-color: #eee;
text-align: center;
}
The end result is a centralized image on top of a colored background with spacing surrounding the image, that is suitable for viewing at all mobile widths. If you want the image to fill the container it is within, just change (or remove) the max-width value we declared earlier, like so:
.logo {
width: 100%;
max-width: none;
}
Making the image clickable: Centralizing the image and applying some space around it will make the padding surrounding the image nice and even on all sides of the image. If we combine both the hyperlink and image examples from above, we can create a clickable image.
<div class="my-image">
<a href="https://mhthemes.com/" target="_blank">
<img src="https://pixabay.com/static/uploads/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg" alt="logo" class="logo" />
</a>
</div>
As you can see, we haven’t changed any code, we’ve simply wrapped the image within the hyperlink we created earlier, making the image clickable. To ensure the clickable image is presented correctly on all browsers, we need to remove any borders that may appear around the image, which we can do by adding a value of 0 to the image’s border attribute, like so:
.logo {
width: 100%;
max-width: none;
border: 0;
}
You can use the above explained method to add any advertisement banner or image (and also text) to any of your theme’s sidebars and make it clickable, all with the standard Text Widget.
Changing colors for background, text and links
Not everything needs to be in black and white, we can use CSS to spice things up a bit by introducing some color. In this example we will create a sample promotional area using color and hyperlinks. Add another Text Widget to your chosen widget area / sidebar and start by creating a container div, giving it the my-promotion custom CSS class, like so:
<div class="my-promotion"></div>
Adding a background color
Using the custom class we just created and some simple CSS, we can now add color to this div-container and prepare it for contents by adding some padding around the edges, like so:
.my-promotion {
background: #1e8cbe;
padding: 20px;
}
The simplest way of using colors in CSS is to use a color’s 6-character HEX code, which is preceded by a hashtag #. There are many ways you can obtain HEX codes for any color you wish, here is an easy-to-use color picker that will help you find the code you need to use.
For this example, we shall be using a cool shade of blue, but you can use any color you wish. If we return to the HTML code in the widget, we can add a paragraph of text that could be used as the promotional text, you can use any text you like.
<div class="my-promotion">This is some super-awesome custom promotional text that we will be using for this example.</div>
Tweaking the text: color & link
If you refresh your site and view the widget so far, you will see the blue container with black, left-aligned text within it. By declaring additional styles to the my-promotion class, we can improve the appearance of this promotional text, like so:
.my-promotion {
background: #1e8cbe;
padding: 20px;
color: #ffffff;
text-align: center;
}
We have added color and text-align attributes to the class. If you return back to your site and refresh the site in your browser, the promotional text will now be white, and centralized neatly within the colored container. And if we now make use of the hyperlink example we worked on earlier, you can easily add a clickable link within your text, like so:
<div class="my-promotion">This is some super-awesome custom <a href="https://mhthemes.com/" target="_blank">promotional text</a> that we will be using for this example.</div>
Changing hyperlink color
All text that is wrapped within the hyperlink will now be clickable, but upon refreshing your site to see the widget in action, you will notice the link is colored differently from all other text. We can change this color by targeting the hyperlink directly by adding this to your CSS:
.my-promotion a {
color: #ffff00;
}
Your hyperlink should now be colored yellow because we have assigned that color to all hyperlinks within the my-promotion div using the HEX code for yellow.
Responsive video embedding
We’ll now take a peek at how you could add a video into one of our sidebars. Some WordPress themes by MH Themes, have the MH YouTube Video widget included, which lets you display YouTube videos simply by entering the video ID of the particular YouTube video. And apart from the WordPress oEmbed feature, you can of course use the embed code provided by the various video hosting services available, such as YouTube or Vimeo, like so:
<iframe width="560" height="315" src="https://www.youtube.com/embed/AvOTBFM_3RQ" frameborder="0" allowfullscreen>
Multiple video formats
Perhaps you have your video stored on your web server or at another online location? You can embed any other video using the Text Widget as well. You should first have your video saved in multiple different formats, MP4, WEBM, and OGG should be sufficient. This ensures full compatibility with all of the major web browsers, and of course, their mobile variants. Add the below code into another Text Widget and place it within your chosen sidebar.
<video width="800px" height="450px" poster="video_fallback.jpg" controls>
<source src="../videos/my-video.mp4" type="video/mp4">
<source src="../videos/my-video.webm" type="video/webm">
<source src="../videos/my-video.ogg" type="video/ogg">
</video>
The code above would embed a video file titled my-video, from the videos folder on your server. If your chosen video is stored at an external location then you can simply replace each of the video locations with URL’s instead, like so:
<video width="800px" height="450px" poster="video_fallback.jpg" controls>
<source src="https://somedomain.com/my-video.mp4" type="video/mp4">
<source src="https://somedomain.com/my-video.webm" type="video/webm">
<source src="https://somedomain.com/my-video.ogg" type="video/ogg">
</video>
Using HTML, you can add an image fallback via the poster attribute of the video element. If the video fails to load, or is being viewed using an unsupported browser, the video_fallback.jpg image will be displayed instead, which again, can also be declared with a URL.
Dimensions and aspect ratio
It is highly recommended to always define the dimensions of the video you wish to embed, this helps with the video being the correct size across all of the major supported browsers. You can use tools such as this 16:9 Calculator to ensure your videos are embedded using the correct aspect ratio.
Making the video responsive
By default, the video dimensions will stay at the dimensions we declared within the code. If the video is being viewed on a small mobile device, or in case users resize their desktop browsers, the video will always be displayed at the dimensions we set, which is not a good user experience.
Let us take better control over the video by wrapping it within a container, just like we did earlier with the hyperlink and image examples, like so:
<div class="my-video">
<video width="800px" height="450px" poster="video_fallback.jpg" controls>
<source src="../videos/my-video.mp4" type="video/mp4">
<source src="../videos/my-video.webm" type="video/webm">
<source src="../videos/my-video.ogg" type="video/ogg">
</video>
</div>
As you can see, the video is now within a div container, we have added the my-video class to it so we can now use CSS to apply certain styles to the container, and of course, the video itself.
.my-video {
position: relative;
padding-bottom: 57.5%;
height: 0;
overflow: hidden;
}
.my-video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
The above code will force the video’s width and height to automatically adjust to size of the container it is within. This is particularly useful if you wish the video to be viewable on mobile devices. Try resizing your browser when viewing the video to see it adjust its width and height accordingly, the video is now responsive and perfectly mobile-friendly.
Simple HTML basics in conclusion
Using the simplest of tools, regardless of experience or knowledge, anyone can write simple HTML and CSS code to customize and enhance WordPress websites. If you’re eager to learn more about HTML, looking for a basic CSS tutorial to tweak you website or want to learn a particular programming language, you’ll find plenty of great and extensive free and paid sources online.