Fixing CSS classes with PHP

Question

I have created a CTA in WordPress where the HTML looks like,

<p>
<a class="cta" href="...">CTA Button</a>
</p>

Further, I've styled the class cta. But now, the CSS is not looking great whenever the text wraps. Only now, I'm realizing that for a better looking CTA the CSS class should have been used in the <p> and not in the <a> tag.

Since I've followed this huge number of elements, changing them manually is nearly impossible. I'm sure this can also be achieved using JS, but I'm using AMP which makes such implementation really difficult.

Hence, I'd like to if this can be achieved using PHP or CSS?

Is all of this stored in a WYSIWYG, done through a shortcode, or some other way? — Chris Haas, Jun 24 '21 at 17:48
Loop through all `` tags and if you find one with a `cta` class, remove that class and add it to its parent: `document.querySelectorAll("a").forEach(a => { if(a.classList.contains("cta") { a.classList.remove("cta"); e.parentElement.classList.add("cta"); } });` — Wais Kamal, Jun 24 '21 at 17:53
The “can this be achieved using CSS” part of the question should be answered by [Is there a CSS parent selector?](https://stackoverflow.com/q/1014861/1427878) — CBroe, Jun 25 '21 at 07:38
@ChrisHaas It is stored in the WordPress classic editor. No shortcode involved. — Nirmal Kumar, Jun 25 '21 at 17:25
@WaisKamal can the same be done through PHP? As I'm using AMP, running this JS seems difficult. — Nirmal Kumar, Jun 25 '21 at 17:26
@CBroe It seems like browsers don't support `:has()` pseudo class to implement this with CSS. — Nirmal Kumar, Jun 25 '21 at 17:31
Why not add a class to the parent `p` and then use css to select down to the `a.cat`? — Jared Farrish, Jun 25 '21 at 19:39
@NirmalKumar you can use the answer below, or alternatively `echo` a ` — Wais Kamal, Jun 25 '21 at 20:37

Kinglish · Answer 1 · 2021-06-25T18:52:05.137

PHP solution:

<?php
// example code

$html=<<<EOT
<p>
<a class="cta" href="...">CTA Button</a>
</p>
<p>
<a class="dontreplaceme" href="...">CTA Button</a>
</p>
<p><a class="cta" href="...">
CTA Button</a>
</p><p><a class="cta" href="...">CTA Button</a></p>
<p><a class="cta" href="...">CTA Button</a></p>
EOT;
$delim = 'class="cta"';
// remove white spaces between tags
$html = explode($delim, preg_replace('/\>\s+\</m', '><', $html));
$new = [];
foreach($html as $seg) {
    // check end of segment for a match
    if(strcmp(substr($seg, -6), '<p><a')>0) {
        $seg = substr($seg,0,-6).'<p ' . $delim . '><a';
    }
    $new[]= $seg;
}
$new = implode("",$new);
print_r($new);

Example: https://www.tehplayground.com/XPVv3i8kRxXI0mJ7

Javascript solution (archived) since you want a PHP one

This will run after the page has rendered and will remove 'cta' from the 'a' tags and place it in the closest 'p' parent

window.addEventListener('load', () => { 
   document.querySelectorAll('a.cta')
   .forEach(e=>{ 
      e.classList.remove('cta');
      e.closest('p').classList.add('cta');
   }); 
})

Which compresses down to a tidy one-liner

window.addEventListener('load', () => { document.querySelectorAll('a.cta').forEach(e=>{e.classList.remove('cta');e.closest('p').classList.add('cta');}); })

I won't be able to run this code inside an AMP framework as they have their own restrictions in running JS. — Nirmal Kumar, Jun 25 '21 at 17:24
@NirmalKumar - updated with a PHP solution - and just edited to be more precise — Kinglish, Jun 25 '21 at 18:52

Fixing CSS classes with PHP

1 Answers1