Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

add a span in each title WordPress

  • SOLVED

in the content of my posts i have some title like that

<h1 style="color:red;font-size:15px;">example of title</h1>

in this case i want to remove the "style" to have

<h1>example of title</h1>

same thing with h1, h2, h3, h4, h5, h6


<strong>AND </strong>

i want to add a span in every h-tag (h1->h6) like that

<h1><span>example of title</span></h1>


i have write this function but that doesn't work
where is the mistake ?


function replace_title($content) {
$pattern1 = "`(<h[1-6])`";
$pattern2 = "`(<h[1-6])([a-zA-Z0-9\"\'=;:_ -]{1,})>`";
$pattern3 = "`(<h[1-6])>([^.$]*)(<\/h[1-6]>)`";


if (preg_match($pattern3, $content)) {//no style inline
$content = preg_replace($pattern3, '$1><span>$2</span>$3', $content);//add a span
}

elseif (preg_match($pattern2, $content)) {//with a style inline
$content = preg_replace($pattern2, '$1>', $content);//remove the style
$content = preg_replace($pattern3, '$1><span>$2</span>$3', $content);//add a span
}

return $content;
}

add_filter('the_title', 'replace_title',1); //Remplacer les titres dans le titre
add_filter('the_content', 'replace_title',1); //Remplacer les titres dans le contenu



------------------------------------------------------------------------
edit 1 :

<strong>TWO THINGS</strong> :
1-remove the style in H-tag if there is a style
2-add a span in each H-tag (h1->h6)

and just modify my function
------------------------------------------------------------------------

Answers (5)

2012-07-26

Martin Pham answers:

try this
add_filter('the_title', 'replace_title',1);
function replace_title($title) {
return '<h1><span>'.$title.'</span></h1>';
}


Sébastien | French WordpressDesigner comments:

have you read my question ?


Sébastien | French WordpressDesigner comments:

i have add in my question :

edit 1 :

<strong>TWO THINGS</strong> :
1-remove the style in H-tag if there is a style
2-add a span in each H-tag (h1->h6)

and just modify my function


Martin Pham comments:


add_filter('the_content', 'replace_content',1);
function replace_content($content) {
$content = preg_replace( '/<h(\d{1,6})(.*?)>(.*?)<\/h(\d{1,6}).*?>/', '<h$1 $2><span>$3</span></h$4>', $content );
return $content;
}


Sébastien | French WordpressDesigner comments:

Just a little little problem
with this code the inline-style is removed, but the class or the id are removed too


Martin Pham comments:

Edit :)

add_filter('the_content', 'replace_content',1);
function replace_content($content) {

$content = preg_replace( '/<h(\d{1,6})(.*?)>(.*?)<\/h(\d{1,6}).*?>/', '<h$1><span>$3</span></h$4>', $content );

return $content;

}


Rules:
<h1>This is h1</h1> ====> <h1><span>This is h1</span></h1>

<h1 class="my_class">This is h1</h1> ====> <h1><span>This is h1</span></h1>

<h1 style="color:red;">This is h1</h1> ====> <h1><span>This is h1</span></h1>


Sébastien | French WordpressDesigner comments:

yes that's what i say
with your code, results are :

<h1>This is h1</h1> ====> <h1><span>This is h1</span></h1>
<h1 class="my_class">This is h1</h1> ====> <h1><span>This is h1</span></h1>
<h1 style="color:red;">This is h1</h1> ====> <h1><span>This is h1</span></h1>


but resultats must be :
<h1>This is h1</h1> ====> <h1><span>This is h1</span></h1>
<h1 class="my_class">This is h1</h1> ====> <h1 class="my_class"><span>This is h1</span></h1>
<h1 style="color:red;">This is h1</h1> ====> <h1><span>This is h1</span></h1>


Sébastien | French WordpressDesigner comments:

class and id must not be removed


Martin Pham comments:

Full code :)

add_filter('the_content', 'replace_content',1);
function replace_content($content) {
$content = preg_replace( '/<h(\d{1,6})(.*?)>(.*?)<\/h(\d{1,6}).*?>/', '<h$1 $2><span>$3</span></h$4>', $content );
$content = custom_strip_attr($content, array('h1', 'h2', 'h3', 'h4', 'h5', 'h6'), array('style'));
return $content;
}

function custom_strip_attr( $text, $elements, $attributes, $two_passes = true ) {
$elements_pattern = implode( '|', (array) $elements );

/** Build patterns */
$patterns = array();
foreach ( (array) $attributes as $attribute ) {
/** Opening tags */
$patterns[] = sprintf( '~(<(?:%s)[^>]*)\s+%s=[\\\'"][^\\\'"]+[\\\'"]([^>]*[^>]*>)~', $elements_pattern, $attribute );

/** Self closing tags */
$patterns[] = sprintf( '~(<(?:%s)[^>]*)\s+%s=[\\\'"][^\\\'"]+[\\\'"]([^>]*[^/]+/>)~', $elements_pattern, $attribute );
}

/** First pass */
$text = preg_replace( $patterns, '$1$2', $text );

if ( $two_passes ) /** Second pass */
$text = preg_replace( $patterns, '$1$2', $text );
return $text;

}


Martin Pham comments:

for example: [[LINK href="https://gist.github.com/3182845"]]https://gist.github.com/3182845[[/LINK]]


Sébastien | French WordpressDesigner comments:

that seems to be perfect !

2012-07-26

Michael Caputo answers:

I would do it with Jquery:


$('h1,h2,h3,h4,h5,h6').removeAttr('style');
$('h1,h2,h3,h4,h5,h6').wrapInner('<span />');


Sébastien | French WordpressDesigner comments:

thx
but i want a php function


Sébastien | French WordpressDesigner comments:

i have add in my question :

edit 1 :

<strong>TWO THINGS</strong> :
1-remove the style in H-tag if there is a style
2-add a span in each H-tag (h1->h6)

and just modify my function


Michael Caputo comments:

I've updated mine, incase you change your mind :D

2012-07-26

Dbranes answers:

you could try this approach:


function replace_title($content) {
$from=array("<h1>","<h2>","<h3>","</h1>","</h2>","</h3>",);
$to=array("<h1><span>","<h2><span>","<h3><span>","</span></h1>","</span></h2>","</span></h3>");
$content=str_replace($from,$to,$content);
return $content;
}


ps: I updated the function (I switched $to and $from) ;-)


Sébastien | French WordpressDesigner comments:

have you read my question ?


Sébastien | French WordpressDesigner comments:

i have add in my question :

edit 1 :

<strong>TWO THINGS</strong> :
1-remove the style in H-tag if there is a style
2-add a span in each H-tag (h1->h6)

and just modify my function


Dbranes comments:

You could try this


function replace_title($content) {

$pattern = "/(<h[1-6])(.*)>([^.$]*)(<\/h[1-6]>)/smU";
$content = preg_replace($pattern, '$1><span>$3</span>$4', $content);//add a span

return $content;
}


This seems to give me the right output.


Dbranes comments:


I have in my post_content:


<h1 style="color:red;font-size:15px;">example of title</h1>
<h2 style="color:red;font-size:15px;">example of title</h2>
<h3 style="color:red;font-size:15px;">example of title</h3>



and the output is

<h1><span>example of title</span></h1>
<h2><span>example of title</span></h2>
<h3><span>example of title</span></h3>



Sébastien | French WordpressDesigner comments:

yes ! that's quasi perfect.
Just a little little problem
with this code the inline-style is removed, but the class or the id are removed too


Dbranes comments:

Here is another try ;-)


function replace_title($content) {

//remove style="..."
$pattern = "/(<h[1-6]) style\=\"([^\"]*)\"(.*)>(.*)/ismU";
$content = preg_replace($pattern, '$1$3>$4', $content);

//add span
$pattern = "/(<h[1-6])(.*)\">([^.$]*)(<\/h[1-6]>)/ismU";
$content = preg_replace($pattern, '$1$2><span>$3</span>$4', $content);

return $content;
}


<h1 style="color:red;font-size:15px;" id="abc" class="bbb">example of title</h1>
<h1 style="color:red;font-size:15px;" class="bbb">example of title</h1>
<h2 style="color:red;font-size:15px;">example of title</h2>

becomes:

<h1 id="abc" class="bbb><span>example of title</span></h1>
<h1 class="bbb><span>example of title</span></h1>
<h2>example of title</h2>


Sébastien | French WordpressDesigner comments:

this code doesn't work :-/

2012-07-26

paul de wouters answers:

how about:
<?php the_title( '<h1><span>', '</span></h1>' ); ?>


Sébastien | French WordpressDesigner comments:

read my question please


Sébastien | French WordpressDesigner comments:

i have add in my question :

edit 1 :

<strong>TWO THINGS</strong> :
1-remove the style in H-tag if there is a style
2-add a span in each H-tag (h1->h6)

and just modify my function

2012-07-26

Jatin Soni answers:

If you are okay with jQuery than use below code.. Below code will remove inline styling and add span tags. Place this script after all javascripts so it will load last and if any javascript adding inline style than it will override and remove that too.


This is tested and working completely fine.

If you want to use jQuery no conflict than change $ to jQuery


Sébastien | French WordpressDesigner comments:

no thanks
no jquery


Jatin Soni comments:

Okays no problem.. Let me try with php