How to implement shoutbox as a WordPress page? (Due to spam I removed shoutbox from my frontpage, temporarily, I hope) Generally you should do two things. First: Make page template for shoutbox and create page (through wordpress admin side). Second: Make some tuning for shoutbox css file.

Detailed Instructions:

• Copy page.php file to Chat.php (or something). This file will be Shoutbox template file
• To make Wordpress recognize Chat.php as a template, you should put inside it (very first lines) code like this

  <?php
  /*
  Template Name: Chat
  */
  ?>
  

• Now put inside this chat page template call to shoutbox (like you do on a sidebar). Put it inside the loop and after call for content - the_content() - so that you will be able to add some text (description etc.,) on top of shoutbox (and you do this simply editing your page through admin side)
• Go “New page” creation dialog in wordpress admin and choose use template -> Chat. Create new page.

Now you should have a page with shoutbox on it. But shoutbox looks exactly like the one on your sidebar. But we want it to be bigger wider higher , but to keep original sidebar shoutbox settings. Here comes the CSS power.

Open shoutbox CSS file and make copies of classes which control width, height and any other settings you want to be different. Prefix these copied instances with the class name or id of a div box in which you wrapped your call to shoutbox on a page. Since it is a main content area then it is something like maincontent or content.

For a example:

Class for page: .main-content #chatoutput {bla bla bla}
Class for sidebar: .sidebar #chatoutput {ya ya ya }

Hope this will help. If you still have questions, ask.

This entry was posted by Tash on April 4, 2006 and is filed under Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.