Add border around text in page

In my page text or visual editor, how can I draw or place a border around texts? For example the word "appointment" how can I have a border box around the word?
Thanks

  • Rupok

    Hi CHAD,

    Thanks for asking. It can be done by creating a MU Plugin with little CSS. For creating a MU Plugin, create a folder named "mu-plugins" inside your "wp-content" folder. Then inside that "mu-plugins" folder, create a file with any name and with a .php extension. Now paste the code inside that file and save.

    <?php
    add_action( 'wp_footer', 'create_border_around_word' );
    function create_border_around_word() {
        ?>
        <script type="text/javascript">
          jQuery(document).ready(function() {
    		jQuery('.site-content').each(function() {
    		    var html = jQuery(this).html();
    		    jQuery(this).html(html.replace( / appointment /g, ' <span class="border"> appointment </span> '));
    		});
          });
        </script>
        <?php
    }

    For getting more idea on mu plugins, you can go through this article: http://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    After that, add the following custom CSS code in your site:

    .border {
      border: 1px solid #d7d7d7;
      padding: 2px 5px;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    That will create a border around every "appointment" word in your site.

    I've used the "site-content" wrapper according to Twenty Twelve theme. If this doesn't work on your site, can you please provide the link of the page where you want this to happen? Then I can find the proper wrapper class for your site.

    I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi CHAD,

    Thanks for the clarification. Well, in that case, there is an easier solution. Just install this plugin and activate: https://wordpress.org/plugins/richtexteditor/

    After activating it, it will replace the default WordPress WYSIWYG editor and you can easily highlight or underline a word, but I'm afraid, it won't provide any option to create border around the text. Please check attached screenshots for reference.

    But if you exactly need the border, then I'll suggest you to add the following custom CSS code first:

    .border {
      border: 1px solid #d7d7d7;
      padding: 2px 5px;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    And then, in your *TEXT* editor, just wrap the word in the following code:
    <span class="border"> example </span>
    So you should add this before your target word:
    <span class="border">
    And this after the word:
    </span>
    That will create border around that word in the front-end. Please check attached screenshots for reference.

    I believe, these will serve your purpose. Please let us know if you have any confusion or any further query. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Toni Hoskin

    If you want a box around more than a couple of words, like a paragraph, using the same CSS as above in the CSS style sheet in the Customizer:

    .border {
    border: 1px solid #d7d7d7;
    padding: 2px 5px;
    }

    .....try this in the TEXT editor...I got it from Louis in a Support Chat:
    Louis: if you want to have more paragraphs inside the box
    you can wrap it into a div
    like:

    <div class="border">

    <p>paragraph 1</p>
    <p>paragraph 2</p>
    </div>

    It works perfectly! Boxed in text.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.