How to Add Code Box in WordPress website/Blog

If you are publish blogging related post in your WordPress blog, then this post may be helpful for you. Because today I am going to tell you how to add code box in WordPress Blog. If such posts are shared on your blog in which some codes are provided for your readers then you have to put a code box in your WordPress blog, from which readers can easily copy that code.

Well, there are many plugins available for applying a code box on the WordPress site, with the help of which this kind of box can be easily applied to the website. But we all know that installing more plugins on blogs causes a loading speed problem and also increases security risk. That’s why we should avoid using more plugins on our website So I will tell you about how to add a code box without the plugin.

The special thing about this code box is that it is made up of CSS coding, which is displayed very quickly in any post.

How to add Code Box in WordPress Without Plugin?

If you want to add code box on your WordPress site, then follow the steps mentioned below –

Step – 1

First, open your WordPress Dashboard.

  • Go to Appearance.
  • Now click on Editor.

Step – 2

Now the style.CSS file of your WordPress theme will be opened in front of you.

  • Please paste the code below into the CSS file as the last one.


 code,pre{-webkit-user-select:text;overflow:auto; font-size:smaller;font-family:monospace;color:#333} pre{resize:auto;padding:1em!important; white-space:pre-wrap;word-wrap:break-word; border:1px solid #d47300; border-left:5px solid #d47300; font-style:italic!important}
  • After this, save the coding by clicking the Update file button.

Your code box is now successfully added to your blog. But it will not show in your posts right now.

How to Show the Code Box in WordPress posts

When you write a post and want to show the code box in it, you will have to use a small shortcode. When you write a post, go to the HTML view and paste the shortcode given below, where you want to show the code box in your post –

<pre> your code here </pre>


I hope now you can add the code box to your WordPress blog. If you still have any problems, then you can ask it by commenting, And if you want to receive similar posts free on your email then subscribe to this website.

In addition to being a computer science engineering student, he is a Passionate blogger and founder of my blogging guide, loves to write about digital marketing, SEO, Blogging related stuff.

Leave a Reply