How to copy shortcodes and code snippets properly in wordpress

April 15, 2019 5026

I found that many clients don’t realize that visual mode of wordpress is working not as plain mode. So, when you copy something from other sites and paste snippets in content, you can get not expected results. Let me explain

For example, I will copy shortcode of S2member from their docs.

I copied shortcode in visual editor in wordpress and what I got? Nothing. It’s because I copied just html code of codebox from their site instead of plain code.

Once you click on Edit as Html, you can see real code of page. I have next

As you see, I have <span class… which is not what I need. Sometimes you can have <pre > tags, <strong >, etc This is because visual editor, by default, renders also html code which you copied from other sites.

What is the proper way to insert copied shortcodes?

WordPress Text editor has good button “Paste as text”. It’s available in text editor or in classic editor of Gutenberg

This is what you need to use for proper inserting shortcodes and any other text from other sites. Other way – Use Shortcode Module in Gutenberg blocks