How To Customize Your Site Title & Description

Some themes include design options which enable you to style your sites title and description (tag line).

Others don’t which is why i worked out these solutions which include:

  • Styling your title and description
  • Repositioning them before your header
  • And making your description into a hyperlink

Styling your title and description

Simply paste this code at the end of your child theme’s style.css file and modify the code according to your own preferences.

Here’s the code for your sites main title

#title a, #title a:hover {
color: #d54e21;
font-family: Georgia,Times,'Times New Roman',serif;
font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.625), 20px);
text-shadow: 1px 1px #000000;
text-transform: uppercase;
text-decoration: none;
}

Here’s the code for your sites description or tag line.

#description {
color: #21759b;
font-family: Oswald,Times,'Times New Roman',serif;
font-size: 20px;
text-shadow: 1px 1px #000000;
text-transform: uppercase;
}

Reposition Genesis Site Title & Description

You can also change the position your site title and description display by using a custom function in your child themes functions.php file and some CSS for styling in your style sheet:

On top of this, you can also use custom fonts and make your site description into a clickable link.

You may also like to use Google custom web fonts for your title and description.

Related Code Snippets

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.