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: