logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$10
add a span in each title

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


AND

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 :

TWO THINGS :
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
------------------------------------------------------------------------

This question has been answered.

Sébastien | French WordpressDesigner | 07/26/12 at 10:16am Edit

Previous versions of this question: 07/26/12 at 10:40am | 07/26/12 at 10:50am | 07/26/12 at 11:06am

(5) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    07/26/12
    10:52am
    Michael Caputo says:

    I would do it with Jquery:


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

    Previous versions of this answer: 07/26/12 at 10:28am | 07/26/12 at 10:52am

  • avatar
    Last edited:
    07/26/12
    10:26am
    Martin Pham says:

    try this

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

    • 07/26/12 10:36am

      Sébastien | French WordpressDesigner says:

      have you read my question ?

    • 07/26/12 10:40am

      Sébastien | French WordpressDesigner says:

      i have add in my question :

      edit 1 :

      TWO THINGS :
      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

    • 07/26/12 11:14am

      Martin Pham says: 


      
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;
      
}

    • 07/26/12 11:21am

      Sébastien | French WordpressDesigner says:

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

    • 07/26/12 11:24am

      Martin Pham says:

      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>

    • 07/26/12 11:29am

      Sébastien | French WordpressDesigner says:

      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>

    • 07/26/12 11:30am

      Sébastien | French WordpressDesigner says:

      class and id must not be removed

    • 07/26/12 11:47am

      Martin Pham says:

      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;
      

      
}

    • 07/26/12 11:51am

      Martin Pham says:

      for example: https://gist.github.com/3182845

    • 07/26/12 3:19pm

      Sébastien | French WordpressDesigner says:

      that seems to be perfect !

  • avatar
    Last edited:
    07/26/12
    10:37am
    Dbranes says:

    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) ;-)

    Previous versions of this answer: 07/26/12 at 10:37am

    • 07/26/12 10:37am

      Sébastien | French WordpressDesigner says:

      have you read my question ?

    • 07/26/12 10:41am

      Sébastien | French WordpressDesigner says:

      i have add in my question :

      edit 1 :

      TWO THINGS :
      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

    • 07/26/12 11:06am

      Dbranes says:

      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.

    • 07/26/12 11:08am

      Dbranes says:


      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>


    • 07/26/12 11:11am

      Sébastien | French WordpressDesigner says:

      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

    • 07/26/12 11:36am

      Dbranes says:

      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>

    • 07/26/12 3:14pm

      Sébastien | French WordpressDesigner says:

      this code doesn't work :-/

  • avatar
    Last edited:
    07/26/12
    10:34am
    paul de wouters says:

    how about:

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

    Previous versions of this answer: 07/26/12 at 10:34am | 07/26/12 at 10:34am

  • avatar
    Last edited:
    07/26/12
    11:21am
    Jatin Soni says:

    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

    Previous versions of this answer: 07/26/12 at 11:09am | 07/26/12 at 11:21am

This question has expired.



Gabriel Reguly, Sébastien | French WordpressDesigner, Hai Bui, Francisco Javier Carazo Gil, Arnav Joy, Manoj Raj, Daniel Yoen voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.