CODEWITHSUNDEEP
phphtmlwordpressfunctionplugins
Lolo
Lolo

Reputation: 135

How to replace character from WordPress titles printed by plugin?

I would like to replace special characters of my Wordpress's titles, to make linebreak + italic.

But, my issue is special because I am using the Wordpress plugin "Posts per Cat" which is showing up my posts' titles per categories. So, I can't solve my issue by doing str_replace in conjunction with get_title function, because the plugin already gets the titles. How can I replace the character " | " by <br>, and <i> by italic in my titles, according to the HTML code below?

Is there a way I can do that in PHP, or CSS?

Here is the HTML code : the titles are gotten in the <a> tag

<div id="ppc-box">

  <div class="ppc-box one">
    <div class="ppc">
      <h3>CURRENTLY</h3>
      <ul>
        <li>
          <a href="http://temporarygallery.org/do-not-remove-this-folder/nouvelle-exposition-2/" class="ppc-post-title" title="Article BOOK LAUNCH &amp; KÜNSTLERGESPRÄCH published at 18 juillet 2017 10 h 57 min">BOOK LAUNCH &amp; KÜNSTLERGESPRÄCH</a></li>
        <li>
          <a href="http://temporarygallery.org/do-not-remove-this-folder/alleinanspruch/" class="ppc-post-title" title="Article PARKFIELD STUDIES | Marianna Christofides | &lt;i&gt;27 August – 30 August 2017&lt;/i&gt; published at 18 juillet 2017 10 h 59 min">PARKFIELD STUDIES | Marianna Christofides | &lt;i&gt;27 August – 30 August 2017&lt;/i&gt;</a></li>
        <li>
          <a href="http://temporarygallery.org/do-not-remove-this-folder/fourth-post-test/" class="ppc-post-title" title="Article ALLEINANSPRUCH | Arne Schmitt, Nico Joana Weber | &lt;i&gt;4 Februar – 30 April 2017&lt;/i&gt; published at 20 juillet 2017 17 h 52 min">ALLEINANSPRUCH | Arne Schmitt, Nico Joana Weber | &lt;i&gt;4 Februar – 30 April 2017&lt;/i&gt;</a></li>
      </ul>

    </div>
  </div>
  <div class="clear"></div>
  <div class="ppc-box one">
    <div class="ppc">
      <h3>PREVIEW</h3>
      <ul>
        <li>
          <a href="http://temporarygallery.org/do-not-remove-this-folder/second-post-test/" class="ppc-post-title" title="Article RESPAWN | Eloïse Bonneviot, Anne de Boer | &lt;i&gt;4 July – 30 July 2017&lt;/i&gt; published at 20 juillet 2017 17 h 50 min">RESPAWN | Eloïse Bonneviot, Anne de Boer | &lt;i&gt;4 July – 30 July 2017&lt;/i&gt;</a></li>
        <li>
          <a href="http://temporarygallery.org/do-not-remove-this-folder/third-post-test/" class="ppc-post-title" title="Article THE COMMON TOAD | Victoria Adam | &lt;i&gt;27 Mai – 30 Juli 2017&lt;/i&gt; published at 20 juillet 2017 17 h 51 min">THE COMMON TOAD | Victoria Adam | &lt;i&gt;27 Mai – 30 Juli 2017&lt;/i&gt;</a></li>
      </ul>

    </div>
  </div>
  <div class="clear"></div>
  <div class="clear"></div>
</div>

Upvotes: 1

Views: 445

Answers (1)

Bilal Hussain
Bilal Hussain

Reputation: 1011

You can achieve using some custom jQuery hack. Have a look.

jQuery(document).ready(function($){
  $('li a').each(function(){
    var title = $(this).text()
    title = title.replace("<i>","")
    title = title.replace("</i>","")
    title = title.replace(/\|/g,"")
    title = $(this).html(title)
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ppc-box">

  <div class="ppc-box one">
    <div class="ppc">
      <h3>CURRENTLY</h3>
      <ul>
        <li>
          <a href="http://temporarygallery.org/do-not-remove-this-folder/nouvelle-exposition-2/" class="ppc-post-title" title="Article BOOK LAUNCH &amp; KÜNSTLERGESPRÄCH published at 18 juillet 2017 10 h 57 min">BOOK LAUNCH &amp; KÜNSTLERGESPRÄCH</a></li>
        <li>
          <a href="http://temporarygallery.org/do-not-remove-this-folder/alleinanspruch/" class="ppc-post-title" title="Article PARKFIELD STUDIES | Marianna Christofides | &lt;i&gt;27 August – 30 August 2017&lt;/i&gt; published at 18 juillet 2017 10 h 59 min">PARKFIELD STUDIES | Marianna Christofides | &lt;i&gt;27 August – 30 August 2017&lt;/i&gt;</a></li>
        <li>
          <a href="http://temporarygallery.org/do-not-remove-this-folder/fourth-post-test/" class="ppc-post-title" title="Article ALLEINANSPRUCH | Arne Schmitt, Nico Joana Weber | &lt;i&gt;4 Februar – 30 April 2017&lt;/i&gt; published at 20 juillet 2017 17 h 52 min">ALLEINANSPRUCH | Arne Schmitt, Nico Joana Weber | &lt;i&gt;4 Februar – 30 April 2017&lt;/i&gt;</a></li>
      </ul>

    </div>
  </div>
  <div class="clear"></div>
  <div class="ppc-box one">
    <div class="ppc">
      <h3>PREVIEW</h3>
      <ul>
        <li>
          <a href="http://temporarygallery.org/do-not-remove-this-folder/second-post-test/" class="ppc-post-title" title="Article RESPAWN | Eloïse Bonneviot, Anne de Boer | &lt;i&gt;4 July – 30 July 2017&lt;/i&gt; published at 20 juillet 2017 17 h 50 min">RESPAWN | Eloïse Bonneviot, Anne de Boer | &lt;i&gt;4 July – 30 July 2017&lt;/i&gt;</a></li>
        <li>
          <a href="http://temporarygallery.org/do-not-remove-this-folder/third-post-test/" class="ppc-post-title" title="Article THE COMMON TOAD | Victoria Adam | &lt;i&gt;27 Mai – 30 Juli 2017&lt;/i&gt; published at 20 juillet 2017 17 h 51 min">THE COMMON TOAD | Victoria Adam | &lt;i&gt;27 Mai – 30 Juli 2017&lt;/i&gt;</a></li>
      </ul>

    </div>
  </div>
  <div class="clear"></div>
  <div class="clear"></div>
</div>

I gave you an idea, you can replace whatever you want using jQuery replace function. Let me know if you want any more assistance. Thanks

Upvotes: 1

Related Questions