CODEWITHSUNDEEP
jqueryhtmlcsswordpress
user3550879
user3550879

Reputation: 3469

targeting last word of post title

I am using Wordpress which I bring in a post's title using 

<?php the_title( '<h1>', '</h1>' ); ?>

I want to target the last word in the title to apply different css to it. The Wordpress admin doesn't let me css the title or apply span classes.

Upvotes: 1

Views: 1237

Answers (4)

Kofi Sammie
Kofi Sammie

Reputation: 3627

Working with Php scripting language and requirement like set menu link active base on current loading page than 1st task is you have to identify which page loaded and based on that you able to assign active or similar any other class to Menu link which make menu different (active).

$current_page = basename(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH));

Upvotes: 0

tempranova
tempranova

Reputation: 937

Here it is using the original WP stuff, basically I think what you're asking for in the most simple format:

<?php 
$post_title = get_the_title();
$title_as_array = explode(' ', $post_title);
$last_word = array_pop($title_as_array);
$last_word_with_span = '<span class="whatever">' . $last_word . '</span>';
array_push($title_as_array,$last_word_with_span);
$modified_title = implode(' ', $title_as_array);
echo $modified_title;
?>

Try out this in this PHP sandbox. You can see where I substituted a string of words ("here is my title") for the title in the sandbox - it should work like that with get_the_title() too.

Here is what happens after you press "Execute Code", in case you don't see that.

PS: For an explanation, basically this: 1) gets the title as string, 2) turns that into an array, 3) gets the last item in the array, 4) adds the span html, 5) puts that back onto the end of the title array, 6) turns array into string again, 7) prints it out.

enter image description here

Upvotes: 3

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Do split you text and take the last word by using split, and must replace the text with span around that. Use .html(function()) like so :

var text = $('h1').text().split(' ');
var lstWord = text.pop();
// find the h1 with above word
$("h1:contains('" + lstWord + "')").html(function( i, old) {
   // replace the old content(specified words)
   // with span tag around that
   return old.replace(lstWord, '<span class="myColor">'+lstWord+'</span>');
});

DEMO

Upvotes: 1

guradio
guradio

Reputation: 15555

var sliced = $('h1').text().split(' ');
var lastword = sliced.pop();
console.log(lastword)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Im the Last Word</h1>

Try this way.. split() the H1 then get last word using pop()

Upvotes: 1

Related Questions