Add a custom content box to WordPress – how to.

Find out more about...WordPress

What is the easiest way to add a custom content box to WordPress without changing the theme or installing a child theme?

BeginnerCustom CSS for WordPress

This article assumes you know a little about HTML.

What is CSS?

If you are a beginner to WordPress you may be wondering what CSS is. CSS is the code that is used by a browser to style your post or page. The code begins with the target HTML element such as "body" or "h1". and is followed by brackets that enclose the "instructions"  for that element. In the example below the "body" of the page is having a colour applied to it.

Child themes are the preferred way of adding custom styles, but for a basic customised content box, a plugin is the quickest way to style it.

CSS example

Install the plugin

Custom CSS for WordPress can be added simply by using a custom CSS plugin. Child themes will be covered in a different article. Go the plugins page in the Admin section of your site and click on add new, search for the Custom CSS plugin by Chetan Prajapati.

Simple custom CSS

Once installed you will find the custom CSS plugin in the appearance menu, click on the link and you will be able to enter the CSS code, see below,.

Custom classes are then added to any elements you want to style. A CSS class is a way to re-use code, add the specified class to any H1 element, for example, and it will receive the same new style.

CSS custom admin

Style the box

Go to the post you want to add the custom box to and in the text editor, in text mode, add the classes to the elements as shown below. Make sure you don't miss the closing div tag.

Add the custom classes

A fairly simple example is shown here. It has a "div" with an H1 element above it.The H1 element has a background colour and some padding, the text colour is changed to white.

The box itself just has a border and some padding added. Much more can be done! For example background images can be added, gradients,rounded corners and hover animation are possible.

Styled box

If you need to change the actual theme styling it is better to use a child theme rather than mess about with the main theme as any customisations will be lost if the theme is updated. A child theme overrides the main theme and is fairly simple to implement.

Of course if you have a maintenance agreement with us we could do it all for you! Packages start from only £19.99 a month. This gives you peace of mind and an expert only an email away!

Contact me for a quote! or leave a comment and I will get back to you.

Today's fruits are:

  • Apple
  • orange