How To Display Code Scripts On WordPress Website in Page/Post?

How To Display Code Scripts On WordPress Website in Page/Post?

In a usual scenario we never need to put a code script in a WordPress post or page. It only consist of plain text/images. But what if you are a Tech-blogger writing about some programming language. You will frequently need to add code scripts in your blog. Adding Code in a WordPress post or page looks easy but if you write it as a plain text, it will not be displayed properly.

WordPress has evolved a lot in recent years to block code injection which may be used to hack your website. It has put up a lot of filter in place to avoid any such mis-happening.  These filter create issue if you try to put a code script as a plain text. You need to tell WordPress clearly that you are putting a code.

In this post you will see how you can easily add and display code scripts on WordPress website. There are several methods to do this, we will see the most effective ones.

Contents

  1. 1st Method
  2. 2nd Method

1st Method – Display Code using default WordPress Post/Page editor:

To use this method you won’t need any additional plugin. It can be done directly via WordPress editor. Follow the given step to display code on your post/page:

1. Open the admin panel

2. Goto New Post or open the existing post in Edit mode.

3. Open the add new block section by clicking on the plus symbol and search for Code block. Add this code block in your post/page.

Webp.net-gifmaker

4. Now add you Code you want to display in this block.

5. Now save the post/page to see the code display. Also you can see the preview. It may look like below :

add-code-block-6

2nd Method – Display Code in WordPress Page/Post Using Plugins :

About the author

I am Ali, a Software Engineer. I love the latest technology as well as Digital Marketing. Also, I Love to Write about the latest and upcoming technologies and Gadgets. I Love to travel around the world and learn new things..

1 thought on “How To Display Code Scripts On WordPress Website in Page/Post?”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.