Split Dynamic Content headlines into two colours within WordPress

A site I'm designing in WP has a running theme for the headers, where the first half of the heading one colour and then the second half with an accent, with static headlines this is easy to do with a span tag i.e.

HTML:

<h1>This Is <span>My Headline</span></h1>

CSS:

h1 {color:#1f7b76;}
span {color:#75b482}

But with Title's that are dynamic I'm not sure how I can make this work inside of the WordPress frame work.

I looked at this answer but I don't think this would work with WordPress the way it's required Color effect for headlines

Answers:

Answer

I have come up with the following which seems to do what you need:

$title = "My absolutely amazing WordPress post!";

$title_array = explode( " ", $title );

function addSpanToTitle( $t ) {

    $word_count = count( $t );

    if ( $word_count % 2 == 0 ) {

        $half = $word_count / 2;

    } else {

        $half = ceil( $word_count / 2 );

    }

    $result = "";

    for ( $i = 0; $i < $word_count; $i++ ) {

        if ( $i < $half ) {

            $result .= $t[ $i ] . " ";

        } elseif ( $i == $half ) {


            $result .= "<span>" . $t[ $i ] . " ";

        } elseif ( $i > $half ) {

            if ( $i == $word_count - 1 ) {

                $result .= $t[ $i ] . "</span>";

            } else {


                $result .= $t[ $i ] . " ";

            }
        }

    }

    return $result;

}

echo "<h1>" . addSpanToTitle( $title_array ) . "</h1>";

To use this in WordPress, you can define the function in your themes functions.php and do something like this in your templates:

<?php $the_title = explode( " ", get_the_title() ); ?>

<h1><?= addSpanToTitle( $the_title ); ?></h1>

This is the result

Essentially what this function does is takes in an array - your title that has been exploded - and then figures out the halfway point, then adds an opening <span> before the word at the halfway point (rounded up) - if your title is 6 words long, the last 3 words will be inside the span, if your title is 5 words long, the span will enclose the last two words.

At the end of the title, the span is closed. This is returned from the function as a string. The function is all you need from this script, the rest of the code has been added so you can copy and paste and see how it works with various strings.

This can definitely be improved upon and written more concisely, but this seems to do what you need, albeit not perfectly.


Here's a revised version of the function that takes the title as a string:

function addSpan( $title ) {

    $title = explode( " ", $title );

    $half = count( $title ) % 2 == 0 ? count( $title ) / 2 : ceil(count( $title ) / 2 );

    $result = "";

    for ( $i = 0; $i < count( $title ); $i++ ) {

        if ( $i == $half ) {

            $result .= "<span>" . $title[ $i ] . " ";

        } elseif ( $i == count( $title ) - 1 ) {

            $result .= $title[ $i ] . "</span>";

        } else {

            $result .= $title[ $i ] . " ";

        }

    }

    return $result;

}

Usage:

<h1><?= addSpan( get_the_title() ); ?></h1>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.