Best Practice Displaying SourceCode Into WP Blog Post

Who do WP blog or usually do writing online mostly via WordPress, I believe they already know about the techniques how to show code on a post. WordPress made this thing very easy by just putting a tag starting and ending of the code content. The tag also do support multiple code language like HTML, CSS, PHP, JS etc. what’s not!

Again I am saying, this is an old topic but someone recently asked me how people do this, so I thought to write a details post and share them the link. So please expert WordPressians are requested to ignore this 🙂

Process / Tag:

The tag name is [code] and with a “language” class as well as some other attributes for an extend use like highlight a specific number of line or tag or class etc.

Simply just put your SourceCode element into [code] tag.


If you want to show few lines as a code in post, you have to write those like-


If you use same tag or techniques on your post, your SourceCode will be displayed as we write them on a text editor like:

<h2 align="center">Best Practice Displaying SourceCode Into WP Blog Post</h2>

The code tag will support a lot of other coding languages. Here the few name:

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

There is a wide supported configuration parameters that shortcode will support.


  • autolinks (true/false) — Makes all URLs in your posted code clickable. Defaults to true.
  • collapse (true/false) — If true, the code box will be collapsed when the page loads, requiring the visitor to click to expand it. Good for large code posts. Defaults to false.
  • firstline (number) — Use this to change what number the line numbering starts at. It defaults to 1.
  • gutter (true/false) — If false, the line numbering on the left side will be hidden. Defaults to true.
  • highlight (comma-seperated list of numbers) — You can list the line numbers you want to be highlighted. For example “4,7,19”.
  • htmlscript (true/false) — If true, any HTML/XML in your code will be highlighted. This is useful when you are mixing code into HTML, such as PHP inside of HTML. Defaults to false and will only work with certain code languages.
  • light (true/false) — If true, the gutter (line numbering) and toolbar (see below) will be hidden. This is helpful when posting only one or two lines of code. Defaults to false.
  • padlinenumbers (true/false/integer) — Allows you to control the line number padding. true will result in automatic padding, false will result in no padding, and entering a number will force a specific amount of padding.
  • title (string) — Set a label for your code block. Can be useful when combined with the collapse parameter.

Hope this information will help you out to post SourceCode on WP post. Any issue or imperfection, please comments below.

Original Source:



How to get a simple Quick Navigation footer or sidebar widget on WordPress

My Grammarly browser add-on marking the word “Widget” as a wrong spelling underline but if we check it with WP, it’s a common name and feature of WordPress that most of the user use even its a default feature comes with every intake theme like Twenty Sixteen.

Using Widget option, a WordPress WebPage would not only just look good, it also get a life to make a visitors able to do or find a thing quick. Let’s see how we can use Widget to make a simple quick navigation menu with Link that will help to lift to other important page or post.

Actually, I was working on a project where I was in need of adding a quick navigation on footer area that looks like Quick Menu. But the theme I was working with did not allow me to add any custom text menu and link on that related built in(with that theme I was working with) widgets. The only option was to select menu from Top, Main, and Footer and if I select one of them, the full set of menu seeing-up. So I planned to do it another way that really works for me. Let’s see how I did it using “WordPress built-in Text Widget”


You need to have installed WordPress with a default text widget(you can check it from Appearance -> Widget) with necessary CSS and other files so when we will place some HTML code into that widget, that works.

Necessary Steps:

  1. Go to Appearance -> Widget and seek the Text widget to your blog or website’s pre-assigned sidebar or footer area. You will see a Title field as well as Text field.
  2. Write the title as “Quick Navigation” or something else you want your visitors mean those are some quick menu or navigation by.
  3. Place those code below instead of simple text. So we can get a navigation look.
    <ul style="list-style-type:none">
    	<li style="margin-bottom: 7px;"><a href="#"><strong>Our Service</strong></a></li>
    	<li style="margin-bottom: 7px;"><a href="#"><strong>How It Works</strong></a></li>
    	<li style="margin-bottom: 7px;"><a href="#"><strong>File Upload</strong></a></li>
    	<li style="margin-bottom: 7px;"><a href="#"><strong>Payment Policy</strong></a></li>
    	<li style="margin-bottom: 7px;"><a href="#"><strong>Submit Free Trial</strong></a></li>
    	<li style="margin-bottom: 7px;"><a href="#"><strong>Ask for Quote</strong></a></li>
    	<li style="margin-bottom: 7px;"><a href="#"><strong>Partner Program</strong></a></li>


  4. You could custom the title of every list element, or you can un-strong the element by removing the strong(both starting and ending). You can also modify the line marking space changing the 7px to your choice.
  5. If you did everything in same way, you may get the results like below screenshot:


    Eg: Background color and title results will depend on your theme SourceCode. You can change or modify them from Style file. This is what I was coded in my style file.

Hope this note helps you out. If any question, or issue- just comment below. Have FUN, and HAPPY CODING 🙂