SFL Code Box

SFL Code Box, a plugin for displaying source code in its own display box with line numbers and scroll bars within a page.

Download Version 0.5



  • The SFL Code Box plugin provides a method for displaying source code whether it is PHP, HTML, or just text in its own box includes line numbers and scroll bars.  SFL Code Box uses a two step system to embed source code in a page.  The first part is to create a Code Container to hold the source code and a shortcode to display it.

    The Code Container post types are used to allow the source code to be inputted, usually by cut and paste, without the WordPress built in content editor from modifying it by collapsing white spaces and replacing blank lines with HTML paragraph tags.  Code Containers are identified by their title so make sure that it is short.


    [code_box container="code container title"]


    [code_box]source code[/code_box]

    The second form is not recommended because your source code may be altered by built-in editors in WordPress before the source code is stored.

  • Installation

    • Download the sfl-code-box.zip.
    • Extract the contents of the zip file into your wp-contents/plugins directory.
      • This creates a new directory named sfl-code-box.
    • In Dashboard, go to the Installed Plugins page.
    • Activate SFL Code Box

    Creating a Code Box

    • From Admin Menu, select Add New Code Container.
    • Enter a unique title for your code container.
      • The title will be used in a code box shortcode to insert the code box into a page or post.
    • Cut and paste your source code into Source Code textarea.
    • Save/Update the code box.
    • Edit the page or post and insert the following shortcode where you want your code box to appear:
      • [code_box container="container title"]
        • Substitute the title of your code container for container title.

    Alternately, you can copy your source code directly into your post by placing it within the code box shortcode as follows:

    • [code_box]source code[/code_box]

  • Frequently Asked Questions

    • Why should I use a Code Container instead of just placing the source code between the code box shortcode tags?

    The reason that the Code Container custom post type is provided with this plugin is that the editor used to input content on a page or post does not save the content as written.  It will collapse whitespace and turn empty lines into <p>.  This will change the appearance of the source code, usually in an undesirable way.  The Code Container provides a simple textarea for inputting the source code and does not modify whitespace, thus allowing the source code to be displayed as intended.

    Also, your page source will look cleaner having a single one line shortcode instead of all the source code in it.

    • Can I change the size of the Code Box?

    Not with the current version of SFL Code Box.  That is a feature planned for future versions.

    • Can I copy the source code out of a Code Box?

    You can but what you get with a copy and paste will not be usable.  SFL Code Box modifies the source code just before it is displayed.  Special characters that would be interrupted as HTML is replaced with code entities.  For example, angled brackets ‘<>’ are replaced with ‘&lt;&gt;’.  It is recommended to provide a separate link to the source code file that is can be downloaded without anything being changed.

  • An example of a page using SFL Code Box, see Hierarchical Taxonomy Query Example from this website.

Comments are closed.