contacts

(+359) 88 339 4445

Buy All 39 Premium WordPress Themes for $54.99

Display Both Header Logo and Site Title

Display Both Header Logo and Site Title

By default you can display a header image or Site title and slug on the header of our themes.

In case that you want to display both the logo and the site title, here you can find all of the necessary steps:

1. Navigate to Admin Panel -> Left Menu -> Appearance -> Theme Editor

2. Open theme/inc/utilities.php

3. Find this code (usually about line 120):

if ( !empty($headerImage) ) {

echo '<a href="'.home_url('/').'" title="'.get_bloginfo('name').'">';
echo "<img src='$headerImage' alt='$siteTitle' title='$siteTitle' />";
echo '</a>';

} else {
echo '<a href="'.home_url('/').'" title="'.$siteTitle.'">';
echo '<h1>'.get_bloginfo('name').'</h1>';
echo '</a>';
echo '<strong>'.get_bloginfo('description').'</strong>';
}

Then REPLACE it with:

if ( !empty($headerImage) ) {

echo '<div id="header-logo-img">';
echo '<a href="'.home_url('/').'" title="'.get_bloginfo('name').'">';
echo "<img src='$headerImage' alt='$siteTitle' title='$siteTitle' />";
echo '</a>';
echo '</div>';

}
echo '<div id="header-slug">';
echo '<a href="'.home_url('/').'" title="'.$siteTitle.'">';
echo '<h1>'.get_bloginfo('name').'</h1>';
echo '</a>';
echo '<strong>'.get_bloginfo('description').'</strong>';
echo '</div>';

4. Save changes by clicking on ‘Update File’ button

5. open theme/style.css file

6. Insert the following code (i.e. in the end of the file):

#header-logo-img, #header-slug {
float: left;
}

9. Save changes by clicking on ‘Update File’ button

That’s all. Now, in your website header, there will be displayed both the header logo and the website title and slug.

Here is screenshot of the change applied to the tPhotography theme:

header logo and title

 

 

Leave a Reply