Add Custom Class to the Site Title in Genesis

This tutorial provides the options to add a custom class to the site title and customize it.

The easiest way would be to use the attribute selector or ::first-word and ::last-word selector. Unfortunately, There is no pseudo-element in CSS like this. We’ll have to wrap the first word or last word in an extra element and then select that.

So there are two ways to do it.

1. Using JS
2. Using PHP

Before Going with any option. Add this in style.css to check quickly if it is working or not.

.site-title {
    color:  red;
}
.title-first {
    color: #2196F3;
}
.title-last {
    color: #00c108;
}

TYPE 1

We will use a jquery function to add a custom class to the first or last word of .site-title and then we will give some CSS for that class or id.

So we have following jquery codes from https://codepen.io/mel/pen/jLEKH

a) for target first word

	$(".site-title").html(function () {
		var text = $(this).text().trim().split(" ");
		var first = text.shift();
		return (text.length > 0 ? "<span class='title-first'>" + first + "</span> " : first) + text.join(" ");
	});

b) for target last word

	$(".site-title").html(function () {
		var text = $(this).text().trim().split(" ");
		var last = text.pop();
		return text.join(" ") + (text.length > 0 ? " <span class='title-last'>" + last + "</span>" : last);
	});

How to use this?

You have the following options.

OPTION 1.

Adding this javascript in the HEADER or FOOTER section.

<script type="text/javascript">
jQuery(function($){
"use strict";
//jQuery snippet here
});
</script>

OPTION 2

Adding the jQuery snippet in .js file.

You can include the snippet in your theme .js file which would be common like genesis-sample.js or global.js or custom.js

Open that file and put the snippet after the jquery opening. Paste the snippet like after jQuery(function($){
"use strict";

or after

( function ( $ ) {
'use strict';
// Place your custom scripts here.

Example:- Take a look at genesis-sample/js/genesis-sample.js here the file is starting from
var genesisSample = (function ($) {
'use strict';
//HERE

after this line, we will put our code.

OPTION 3

We will create a new .js file and will enqueue it.

Create a file name site-title.js under /js/ folder and paste this

jQuery(function ($) {
    "use strict";
    $(".site-title").html(function () {
        var text = $(this).text().trim().split(" ");
        var first = text.shift();
        return (text.length > 0 ? "<span class='title-first'>" + first + "</span> " : first) + text.join(" ");
    });

    $(".site-title").html(function () {
        var text = $(this).text().trim().split(" ");
        var last = text.pop();
        return text.join(" ") + (text.length > 0 ? " <span class='title-last'>" + last + "</span>" : last);
    });
});

Enqueue this file using this in functions.php

// Enqueue site-title JS script
add_action( 'wp_enqueue_scripts', 'enqueue_site_title_script' );
function enqueue_site_title_script() {
wp_enqueue_script( 'site-title', get_stylesheet_directory_uri() . '/js/site-title.js', array( 'jquery' ), CHILD_THEME_VERSION );
}

 

TYPE 2

This is the snippet from Carrie Dils who have written this a few years ago and working great.

// Filter the title with a custom function
add_filter('genesis_seo_title', 'wap_site_title' );
// Add additional custom style to site header
function wap_site_title( $title ) {
 // Change $custom_title text as you wish
 $custom_title = '<span class="title-first">Genesis</span>Framework';
 // Don't change the rest of this on down
 // If we're on the front page or home page, use `h1` heading, otherwise us a `p` tag
 $tag = ( is_home() || is_front_page() ) ? 'h1' : 'p';
 // Compose link with title
 $inside = sprintf( '<a href="%s" title="%s">%s</a>', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), $custom_title );
 // Wrap link and title in semantic markup
 $title = sprintf ( '<%s class="site-title" itemprop="headline">%s</%s>', $tag, $inside, $tag );
 return $title;
}

CREDITS: https://carriedils.com/custom-site-title-genesis/

By doing this, we’re replacing the site title with our own text. That means whatever site title you have under Settings > General will not display in the header of your site.

Customization:

You can start Your work from this CSS

.site-title {
    color:  red;
}
.title-first {
    color: #2196F3;
}
.title-last {
    color: #00c108;
}

Quick Tip: This will help you to add some Text before or after site title which might will be useful in a few cases.

.site-title:before {
color: red;
content: "Genesis ";
}
.site-title:after {
color: red;
content: "Framework ";
}

Thanks.