This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Wrapping a column shortcode in a link

  • Creator
  • #25150
    Mary Makowsky

    Hi Jason,

    I’m having an issue with wrapping columns in an anchor tag. This is valid in HTML5 so it should be possible and I can get it to work when editing in HTML mode. However, when making any subsequent edits to the page, the formatting disappears and needs to be recreated. This issue is present when using shortcode or html tags and with or without the [raw] shortcode.

    Here is the code I want to use:

    After saving, the code changes to this:

    If just use <div class=”col-sm-4″> the a tags disappear completely.

    Is this a WordPress issue? It’s frustrating that I need to go in and fix this anytime my client edits that page.

    Here is the page by the way:

    The academic programs at the bottom are where this is applicable. I needed the entire column/program box to highlight and link.

    Thank you!

    • This topic was modified 5 years, 7 months ago by Mary Makowsky. Reason: wrapped code in tag
Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
  • #25152
    Jason Bobich


    Yes, unfortunately this is a WordPress editor issue. What you’re describing doesn’t have anything to do with what the shortcode is outputting or if the HTML is valid. It’s all happening within the WordPress editor, and not with anything those shortcodes are actually doing from our shortcodes plugin.

    Any time you’re trying to add HTML like this and you’re switching between Visual and Text editor, you’re going to get funky results, as the TinyMCE javascript is trying to tidy up the code, in order for “Visual” mode to work properly. Since the issue happens within the javascript of the TinyMCE editor, it’s nothing to do with how WordPress sanitizes the result, and so there’s not going to be a PHP workaround you can do to modify how WordPress saves the info.

    The only real workaround I can think of to allow exactly the input you’re doing would be to disable the visual editor for your client, under their profile settings. Then, they’ll be forced to see the text mode only when editing. This would solve your problem, but I have a feeling won’t work as a practical solution.

    Generally, in cases like this where you’re developing custom elements, and you want them to work for the client in the editor, you just need to create some sort of shortcode that outputs exactly how you want, and accepts the intended parameters from the user. In this case, the element you’ve constructed looks good and fits in really well with your site (which looks great by the way, very academic!), but it’s not really using those provided shortcode elements, as they’re intended. So, creating some sort of custom shortcode element to represent that HTML, which accepts maybe a URL, title, and paragraph, would be a good solution here.

    In WordPress, creating a shortcode is pretty easy. You can do it from a plugin, or just from your child theme’s functions.php. This is the official article from WordPress codex, but if PHP is newer to you, it’s a super common topic you can find more lamon tutorials around the Internet for. Once you can do this, it’ll open up a lot of possibilities.

    Mary Makowsky

    OK, thanks so much for the detailed explanation. I appreciate your time!

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.