Back to Index

Modify WordPress Theme

Customization of Theme design

In most cases, you only need to know basic information to change the appearance of your website. The appearance and layout of your website is controlled by Cascading Style Sheets or CSS. You can find the lines of CSS in the main stylesheet file of the theme: style.css.

CSS works by specifying selectors and applying properties. The HTML provides indicators, called ID’s and classes, that allow it to target all kinds of different parts of your website.

.hero {
  color: red;
  height: 450px;
  font-size: 36px;
}

You can learn a lot more about CSS from this reputable source.

Since WordPress 4.7, users can now add custom CSS directly from WordPress Customizer. Now you can get a new way of editing CSS without plugins through the new feature of the Customizer. Now there’s a new section of the Customizer called Additional CSS. By using this way, you get an easy way of editing CSS theme’s stylesheet.

To add custom CSS lines, navigate in the WP Dashboard to Appearance > Customize. Scroll down to Additional CSS panel. Enter (or copy & paste) your custom CSS code for the target element and press Save button.

Child themes

If you need to change theme templates, add new features or new templates then child themes are the recommended way to modify a theme. 

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.

If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme folder.

You can also include files in the child theme that are not included in the parent theme.

Learn More: WordPress Codex – Child Themes And Template Hierarchy

Source Code Editor in WP Admin

To edit the original template code, you can use the editor built into WordPress. This is a fast and easy way to make a few minor changes.

To edit your theme inside WP Admin, first, make sure your theme is active. Next, log in to your admin area and go to Appearance > Theme Editor.

You should see your theme stylesheet in the editor. If you don’t see it, click Stylesheet (style.css) in the right-hand column.