Show site title and logo


I asked the question “How do I show the the site title and logo at the same time with Beans?”
at the Get Beans forum. Tonya replied.

The below result shows a modified version of the code that Tonya shared.





To understand the code.
1. Turn on Development Mode: WordPress admin -> Appearance -> Settings.

Go to the frontend and right click the site title/logo. Move the cursor over the data-markup-id beans_logo_image.





I decided to add_filter after the beans_logo_image.
Here is the code that I added to the child theme functions.php file.


add_filter( 'beans_logo_image_after_markup', function() {
   echo '<span>';
      beans_output_e( 'beans_site_title_text', get_bloginfo( 'name' ) );
   echo '</span>';
} );

The CSS I used:

.tm-site-branding, .tm-site-branding a {
   font-size: 74px;
   line-height: 24px;
   color: #FFD700;
   font-weight: 800;
   text-decoration: none;
   font-family: times; 
   display: block;
   float: none;
   /* width: 100%; */
   text-align: center;
   font-family: "tangerine";
   text-shadow: 1px 1px 1px #000;
   font-stretch: expanded;

.tm-site-branding, .tm-site-branding a:hover {
   color: greenyellow;

.tm-logo {
   display: block;
   margin: auto;
   padding-bottom: 45px;


Site branding affects image logo and text. I then added a hover. To only affect the image logo I added a display block, margin auto to have it centered, and a padding bottom to give some space to where the site title is located.

Thank you Tonya!
Here is the getbeans forum thread:


Filed under: Learning

No comment yet, add your voice below!

Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *