This tutorial enables you to add a custom logo on the left, site title image in the middle and the search form on the right, all inline on desktops and stacked perfectly centered on smaller screens including handhelds and mobiles.
This solution enables you to use a image as your site title rather than site title text.
Logo – Site Title (img) – Search Inline on desktops :
Logo – Site Title (img) – Search stacked on mobiles :
Demo Video
Shows the logo on the left. site title in the middle and search form on the right.
Installation & Configuration
Step 1 – Copy & paste the PHP code ( without the opening PHP tag ) to the end of your Essence Pro themes functions file.
Step 2 – Upload your site title image named logo.png to your Essence Pro themes images folder.
Step 3 – Set the width and height for your custom logo image in config > theme supports.php lines 23 and 24.
Step 4 – Copy and paste the CSS from the style.css file to the end of your Essence Pro themes stylesheet and clear caching. You can also modify the height of your images in the custom CSS which is commented.
Note : In this example, the custom logo is 124px X 124px and the site title image is 430px X 97px however, the height for both has been changed to 80px in the CSS as commented.
Was This Tutorial Helpful?