How to Change H1, H2 & H3 Header Tags in WordPress
WordPress is one of the most popular tools for creating blogs on the Internet, but that is also part of the problem. With millions of new blogs published each year, how can you hope to stand out in the search results? One way to do this is to change the header content of your blog, tagged as H1, H2, H3, etc. in HTML and, by extension, WordPress. Headers also have a style function in WordPress, with H1 headers used for blog titles and various subheaders, such as H2, used for post titles or sidebars.
Other People Are Reading
Instructions
-
-
1
Alter the style of each header in your Cascading Style Sheet (CSS) file, often labeled as "style.css." Open this file in your text editor to alter its contents. The header or subheader will appear as "h1 {attributes}" or "#header h1{attributes}." The "#" feature allows you to customize sub-headings within the same H1 tag. For instance, you may assign a font type for all H2 entries, but change the font color in specialized subheadings:
h2 {font-family: Arial, sans-serif; font-size: 110%; color: green; font-weight: bold; }
#sidebar h2 {font-size: 150%; color: blue; font-weight: bold; }
-
2
Assign attributes to your headers and subheaders. Some common attributes for headers include "font-family," "font-size," "color" and "font-weight." Use these attributes to vary the display of your subheadings. For instance, you may design your headers to display identical font colors and weight, but change the size of the type displayed.
h1 {font-family: Verdana, sans-serif; font-size: 150%; color: green; font-weight: bold; }
h2 {font-family: Verdana, sans-serif; font-size: 130%; color: green; font-weight: bold; }
#sidebar h2 {font-family: Helvetica, sans-serif; font-size: 130%; color: black; font-weight: bold; }
h3 {font-family: Verdana, sans-serif; font-size: 110%; color: green; font-weight: bold; }
-
-
3
Upload your new "style.css" file to your WordPress database.
-
1
Tips & Warnings
If you do not assign attributes to your "#subheader" elements, they will revert to the attributes of the parent header.
If you wish to embed information in your headers for search engine optimization (SEO), enter the following code into the "attributes" section: "display: none." For example:
h1 {display: none; font-size: 150%; color: white....}
