How to show both the site title and logo?

How do I show the the site title and logo at the same time with Beans?

Hello Paal,

You can leverage the Beans HTML API. For example, let's say you want the site title to be inside of the <a> link and after the logo's image. You want to find the logo's Beans ID and then add the '_after_markup' suffix to it.

Step 1: Find the Logo's ID

You can look in the source code and find it. Or do this:

1. Go to Plugins > Add New and Install the Beans Visual Hook Guide.
2. Activate the plugin.
3. Turn on Developer Mode by going to Appearance > Settings and then clicking the "Select to active development mode" checkbox. Then save.
4. Go to the front-end of your site.
5. Click on the "Enable Beans Visual Hook Guide" menu item in the Admin toolbar.
6. Navigate to Beans Visual Hook Guide > All HTML API Hooks List > beans_logo_image. Click on it to turn it on.

Notice that it's added the hooks around the logo. To put it before the logo but within the link, you use beans_logo_image_before_markup. To put it after, you use beans_logo_image_after_markup.

Looking at the pattern, the logo's ID is beans_logo_image. Notice that you can target _before_markup and _after_markup.

Step 2: Add the code

Using this information, let's go into your child theme and add the code:

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

You can also explore Beans' sourcode by going here in the lib/templates/fragments/header.php file.

Give it a try.

Cheers, Tonya

Hi Tonya

Thank you so much for the tutorial!

I do have a question. How would I add a new class to the site title so that I can add some CSS to only affect it?

I am looking at moving the site title below the site logo. Being able to adjust the CSS of both seperatly.

Thank you.

Hey Tonya

Here is the code that I used:

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

Then the CSS:

.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;
}

Here is the tutorial: http://wpbeansframework.com/2018/07/11/how-to-show-both-the-site-title-and-image-logo/

Thank you very much for helping me figure this one out Tonya!