Using Blog Title and Tagline instead of a Logo

By default PRiNZ Pro Themes use a graphical logo to display in the header of the blog or website. There might be reasons to use the blog title and tagline that are defined in the WordPress admin settings under Settings > General instead of a logo image and this tutorial shows you how easy this can be done. This tutorial is only for themes versions prior to 5.1 because in this version you can make these settings on the optionspage.

Some little Code Tweaks

Currently there is no setting in the optionspage to switch between logo and text-header. This might be integrated in future updates. So meanwhile we need to edit some lines of code. Don´t worry. It´s no rocket science. I suggest to start with deleting the logo image (make it invisible).

Make the Logo Image invisible

Open the file style.css which is the main CSS file. and look up line 248 (in BranfordMagazine). Either delete or set in comments to make it invisible (put /* before and */ after the line)

#branding {/*where the logo sits*/
	/*background:url(images/backgrounds/bg_branding.png) no-repeat;*/

Make the Blog title and Tag Line visible

First you have to set a title and tagline in the WordPress admin under Settings > General. Then you open the file header.php and lookup line 82 and 85 (in BranfordMagazine).

Remove the double slashes (//) in front of bloginfo('name'); and bloginfo('description'); to uncomment the php code and make it visible. It should look like this:

Of course you need to save the changed files and upload it to your server again. That´s all. Now your site displays the title of the blog and the tagline instead of an image in the header. The line numbers might be different if you use Wyntonmagazine or any other theme in the future but the code is pretty much the same.

Styling the Header

If you like to style the header text just open style.css again and change the folowing lines for the blog title:

.blogtitle, .blogtitle a {
	color: #000;
	font-size: 1.8em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: regular;
	padding: 20px 0px 10px 0px;

And for the description / tagline:

.description {
	font-size: 1.3em;
	font-weight: bold; 

Further reading