This is like a suicide mission for me.

I have to avoid CSS because I want to build a website that will help me to create HTML templates for email campaigns.

Email readers can't read CSS, so CSS is not a solution for me.

When I put in WP content editor this:

<a target="_blank" href="http://google.com">My Anchor text</a> 

I want to see something like this on the front-end:

<a target="_blank" href="http://google.com"><span style="font-family:Arial,Verdana;font-size:12px;font-weight:12px;color:#337D98;"><strong>My Anchor text</strong></span></a>

Does anybody have an idea how to solve this?

  • Is using a shortcode an option? P.S you are still using CSS, however the difference is this way is using inline CSS. – Matt Royal May 30 '14 at 13:58
  • Sure. Maybe I should try with shortcodes... Inline CSS, that is what I need. my mistake :D – Danijel May 30 '14 at 14:12

If you decided to go that route, this should work. Just add this to your themes functions.php file:

// Add Shortcode
function link_inline_styling( $atts , $content = null ) {

    // Attributes
    extract( shortcode_atts(
            'url' => '',
            'target' => '',
        ), $atts )

    // Code
return '<a href="'.$url.'" target="'.$target.'" ><span style="font-family:Arial,Verdana;font-size:12px;font-weight:12px;color:#337D98;"><strong>'.$content.'</strong></span></a>';
add_shortcode( 'link', 'link_inline_styling' );

and then in your content area you can use the shortcode like this:

[link url="http://google.com" target="_blank"]My Anchor text[/link]

The output will be this:

<a href="http://google.com" target="_blank" ><span style="font-family:Arial,Verdana;font-size:12px;font-weight:12px;color:#337D98;"><strong>My Anchor text</strong></span></a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.