• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Add Custom Class to the Site Title in Genesis

Last Updated on July 11, 2018 Favorited: 1 times

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.

Related Posts

  • Featured Post Widgets in Columns
  • Site Inner with container background in Genesis Sample
  • Add Logo Between Site Title Area in Genesis
  • Expanding Search Box in Genesis
  • Show Logo Before Site Title in Genesis

Categories: Free Content, Genesis Tutorials Tags: CSS, site title

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service