wordpress article heading
Wordpress

How to Customize Your WordPress custom heading style

Headings not only play a great role in the betterment of look and feel but also help in SEO point of view.

In HTML we have heading from H1-H6 and we can use them for the different purpose and at the different place. 

WordPress custom heading style

1. H1 heading

In WordPress we generally use H1 heading for blog title which we can see in the header portion of the page. If you want to add something in the header then you need to update header.php file in the template folder.

Suppose you need to give heading tag then search <?php bloginfo(‘name’) ;?> and use tag along of this line as below:

<h1><?php bloginfo(‘name’) ;?></h1>

Now you can update in style.cs  (you can find this file in wp-content–> themes–> your_theme_name –> style.css) and change style of heading as below.

h1 

{

font-size:200%;

color:blue;   

font-family:algerian;  

}

Please add it with parent tags like title tag or other so it would not reflect with all H1 tag. Below are the result after  I made changes.
wordpress blog heading style

2. H2 heading

This heading we generally use for the post title, the comment title and sidebar title so when we apply any style on H2 then it affects all three.

You can change in style.css to change all places but if you want only change in one place then please use the particular tag with H2 like “.title  h2” for the change only title.

h2

{

font-size:120%;

color:red;

font-family:ravie;

font-weight:bold;

}

I have applied same in my blog and you can see below result.

wordpress H2 heading

If you want to use same style or any other place like comment then please mention comment word first like below

#comment h2

{

font-size:120%;

color:red;

font-family:ravie;

font-weight:bold;

}

so it affect only comment H2 section.

3. Change widget style

If you want to change widget color, font-family, font-weight, background and many other style which give your blog more professional look.

Above method can also do same but that affect all H2 and when you specify for particular class than it does not affect all. Here I am showing you way to change only widget style.

In style.css  you can add .widget-title class like below.

.widget-title

{

color:blue;

font-family: lucida handwriting;

font-weight:bold;

}

Below you can see result once you put this code in style.css.

wordpress widget style

4. H3-H4 heading

We can use these tags for post headings that help in separation of one point from another so you do not need to specify any character or space when other topic start in same blog.

If it is not specify in your blog then you can add in editor section of text like below.

wordpress p[ost heading style

Once you update this then it look like below in your blog.

post header style

5. H5-H6 heading

Similar to above you can use these in sub-heading part of blog post which specify sub-point of your main heading.

Note: Please take backup of style.css or any file which you want to change so it would be recover when something wrong happen by mistake.

Conclusion:

Use above technique to make changes in any style of your blog and make your blog more professional and beautiful.

 

An IT engineer by profession and blogger by passion. Very keen to explore new things online and Help people by sharing many legitimate ways of making money online.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.