This article is part 1 of 1 in the series Wordpress: Integrating Other Scripts.
BellaBuzz is a very simple script that is easy to install, configure, and style with no MySQL database required.
If you have any experience with Wordpress, then you're probably aware that getting "outside" scripts like this to work, without developing a plugin, takes some manipulation. I am happy to walkthrough this process as this script is so easy to work with it really only takes a few lines of code here and there.
A couple steps are from the included README file, the rest are for Wordpress:
- Download BellaBuzz and unzip to your computer.
- Customise prefs.php - set your username, password and various preferences.
- Open up questions.php and replace these lines:
require('prefs.php'); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>BellaBuzz</title> <style type="text/css"> * { font: 11px/15px Verdana, Sans-Serif; } .question { font-weight: bold; font-size: 12px; } .answer { font-style: italic; } .dates { display: block; text-align: right; font-size: 10px; } </style> </head> <body>With these lines:require('prefs.php'); include('/path/to/root/wp-blog-header.php'); get_header(); ?> - Make sure you replace /path/to/root/ with the absolute path to the root of your site or the folder where Wordpress is installed. If you need help finding your absolute path, check out this code snippet.
- Do NOT rename "wp-blog-header.php" as that is a core file that Wordpress calls to make your entire blog work. This file is what will enable us to call the header and footer files from our theme folder.
- Now find these lines:
</body> </html>
And replace them with:<?php get_footer(); ?>
If you try to include your theme's sidebar above the footer, like on most Wordpress template pages, it may break if you have other plugins, widgets, or scripts running in the file. What I did was create a custom sidebar file to include above the footer so there's still some content there that matches my theme. - To include a custom sidebar, create one (named sidebar.php if you like) and include it above the WP footer function like this:
<?php include('sidebar.php'); ?> <?php get_footer(); ?>Make sure that this file is inside of the directory you have BellaBuzz installed into. - Open ask.php and find these lines:
?> <p>Your question was successfully added thank you! <a href="questions.php">return to questions?</a></p>
Replace them with:include('/path/to/root/wp-blog-header.php'); get_header(); ?> <p>Your question was successfully added thank you! <a href="questions.php">return to questions?</a></p> <?php get_footer(); ?>If you want to include a sidebar, add the code above the footer call. - Add any page elements (like titles, etc) and styling that will match your theme.
- Upload ALL of the files to a directory (like /faq/ for example) on your site.
- CHMOD the .txt files to 666 - this makes them writeable.
- Enjoy your new Wordpress themed FAQ page! :D
For an extra tidbit, would you like to learn how to add a snazzy theme to your BellaBuzz control panel? I even have created a few stylesheets (and graphics) you can download! Keep in mind that this styling will ONLY work if you follow these steps:
- Open up functions.php and replace these lines:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>BellaBuzz Control Panel</title> <style type="text/css"> * { font: 11px/15px Verdana, Sans-Serif; } h1, th { font-weight: bold; } td, th { border: 1px solid #eee; padding: 2px 4px; } table { border-collapse: collapse; width: 500px; } img { border: 0; } </style> </head> <body> <?php } function doAdminFooter() { echo "</body>\r\n</html>";With the following lines:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>BellaBuzz Control Panel</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> </head> <body> <div id="header"><p>BellaBuzz Control Panel</p></div> <div id="content"> <?php } function doAdminFooter() { echo "<br /></div>\r\n"; echo "\r\n<div id=\"footer\"><p><a href=\"questions.php\">View FAQ Page</a></p></div>\r\n"; echo "</body>\r\n</html>";You can add your own HTML or CSS in place of this if you want, this code is primarily for my downloadable stylesheets to work. I also added a link back to the main questions page so it's easy to right away view how it looks. - Download one of these themes:
- Unzip the files and upload them to your BellaBuzz directory. You don't need to create any new folders, the images and style.css should be in the same directory on your site.
- Optional: To change the alternating table colors (the stripes) to match your theme, find this line in functions.php:
$rowColour = ($i % 2) ? ' style="background: #fff;"' : ' style="background: #ffe;"';
Replace the hex color codes with the ones you want. For my two themes above, I change "#ffe" to "#e6f1f8" for the blue and "#efd9d2" for the orange. - View your new admin panel! If you replaced the code above, it should all look correct. If not, please go back and replace the necessary code in functions.php!
Important note: If Jem updates BellaBuzz in the future you will need to overwrite your files most likely. Just follow this walkthrough (for Wordpress or admin theme) to get your FAQ page looking great again. If anything changes that affects anything I've said above, I'll make the necessary updates here as well!
I'll most likely make a couple more themes for the control panel in the future so check back again! If you need any help or clarification on this process (or if you find a bug) please feel free to let me know! Post your code in a comment, if needed, and I will try my best. :)
UPDATE 4:45pm: If you've downloaded either of the themes for the BellaBuzz admin, please re-download them again! I made some adjustments. :) Thanks!
Oh my! *insert gasping here* Thanks so much for this detailed tutorial. :D I’m sure it comes in handy for others as well. :D And it’s great that you added some extra themes. They look awesome. ^_^
Nice! I downloaded BellaBuzz some time ago, and got it to work with my WP theme. I might use your tutorial and play with the admin panel. Thanks for writing it!
Oh my gosh, Melissa. I can not believe you did this. Thank you so very much. I can’t wait until I get this up & going. Thanks Thanks Thanks.
i downloaded it tryed to install it and failed :( for wordperss i need someing on my wordpress site but its cool
Thank you so much for this tutorial. I downloaded Bellabuzz some days ago and I tried some things, but I couldn’t get it to work with Wordpress the way I wanted. I’m sure this tutorial will offer the help I need :)
Wow. what a fantastic tut. I’ve been thinking of using this to spice up my About Me section but I was intimidated by it. This really breaks it down so beautifully. All your tut’s make me want to do them!
You all are quite welcome! If you need any help don’t hesitate to ask. :)
This is definitely something I am going to keep in mind once I do my site’s redesign. Plus I know anything made by Jem is safe and validated, lol!
Thank you for this tutorial! I have just used it for the BellaBuzz script on my website and it works really well!
This tutorial was very helpful! Thanks :)
Glad you all are finding it useful. :D
Is there supposed to be an index page? When I go to my site /ask (what I named it) it comes up with a list of the files that are in the folder … I’ve put all the WordPress coding and stuff on it but nothing’s there when I log in or on my admin bit. Help!
The “index” page is actually the questions.php page. So you would need to go to that file in order to access your Q&A. What I did to combat people who try to go to the directory index is have a link that says “looking for my Q&A?” which takes them to the real page. :)
Oh, thanks! I got it :) Good idea about the index thing! XD
awesome. it works great!! :)
Look it didn’t work for me. HEEELP!
http://strawberry-stars.info/faq/
the errors are:
ERROR: This page must not be accessed directly.
and
require(’prefs.php’); include(’/home/missange/public_html/strawberrystars/wp-blog-header.php’); get_header(); ?>
There are currently
Fatal error: Call to undefined function docount() in /home/missange/public_html/strawberrystars/faq/questions.php on line 8
X_X i followed all the instructions but still. :no:
Start with fresh files of the script and follow the steps once more. It looks like some parts of the code needed to run the script might have been overwritten when you copy and pasted the stuff to get it to work with WP. Make totally sure that you aren’t overwriting necessary lines of code! Good luck!
Oh okay. Thank you! I’ll try it.
Yay thankkkss! It did work for me! look: http://strawberry-stars.info/faq/questions.php thank you very much~! :dance: