How to Make a Scroll Box in a WordPress Post

Written by warren davies
  • Share
  • Tweet
  • Share
  • Email

Using the HTML overflow property, a scroll box can be added to any WordPress post on your blog. This could be used to add additional comments about the post, as a contents area containing links to different sections of the post, or to add large amounts of text to themes with a fixed height. Once the code for the scroll box has been added to the WordPress theme, it can also be added to pages, the sidebar or any other part of the site.

Skill level:


  1. 1

    Log in to your WordPress admin area. Click "Appearance," then "Editor." This brings up the Theme Editor, which allows you to modify your blog's HTML code.

  2. 2

    Click "Stylesheet," located near the bottom of the list of files on the right side of the screen. The stylesheet governs the positioning and formatting of different aspects of the blog -- here you will add the parameters for your scroll box.

  3. 3

    Scroll to the bottom of the file, and start a new line. Copy and paste the following code:

    scrollbox {





    Change the width and height figures to whatever size you want the scroll box to be. This does not have to be perfect on the first attempt. You can always return and make any adjustments after you see how it looks in your post. Add any other styling you want, such as a background colour, image, or border. See for the available properties. Click "Update File" when done.

  4. 4

    Click "Posts" and load up the post in which you want to insert the scroll box. Click the "HTML" tab at the top-right of the editing window.

  5. 5

    Copy and paste the following code into the post, at the point you want to scroll box to go:

    <div id="scrollbox">


  6. 6

    Type whatever text you want to appear within the opening and closing <div> tags. Click "Update Post" when you're done, or "Publish" if you started a new post. The scroll box will now appear on the post.

Tips and warnings

  • The scrollbar will only appear if the content is too large for the size of the box.
  • If you want to place the scrollbar on a different section of your site, such as a sidebar or the footer, paste the above code into the relevant file in the Theme Editor. If your blog uses widgets, you will have to create a text widget by clicking "Appearance," "Widgets," and then dragging a text box to the sidebar at the point you want it to go. Then, simply paste the code into it and add your text.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.