bavotasan.com » blog

31 Open Source Web Development Scripts

c.bavota — Wed, 14 Oct 2009 15:24:59 +0000

When it comes to Web development, there is a wealth of free information online to help you create a top-notch Web site. A lot of hard work goes in to maintaining these resources, all to help save you time and money. The Open Source community is growing stronger everyday and the scripts are getting more useful and efficient, making it almost impossible to not use a few of them in your project. Here is a list of 31 open source Web development scripts I have either used or read about that would easily help any developer with their next project.

Ad Servers

Open X Ad Server

OpenX is the world’s leading independent ad server. It provides you with the simple tools you need to make money from advertising, whether from direct ad sales, OpenX Market, or third party ad networks (like AdSense).
http://www.openx.org/ad-server

Revsense

RevSense Ad Server makes it easy for you to sell ads on your site. Set the prices you want, and the kinds of ads to sell, then RevSense does the rest. It manages the sign up, ad entry and upload process and collects advertising revenue into your Paypal or Authorize.net account.
http://www.revsense.com/

Blogging Software

WordPress

WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability. WordPress is both free and priceless at the same time. More simply, WordPress is what you use when you want to work with your blogging software, not fight it.
http://wordpress.org

Movable Type

Powerful enough for building blogs, websites or social networks on a single platform. It’s easier than ever to publish and share information with Movable Type. Movable Type makes it simple to start a blog, manage entire websites and build an engaged community of readers and customers.
http://www.movabletype.com

b2evolution

b2evolution is a powerful blog tool you can install on your own website. It includes all the features of traditional blog tools, and extends them with evolved features such as file & photo management, advanced skinning, multiple blogs support as well as detailed user permissions… Not to mention third party plug-ins!
http://b2evolution.net/

Nucleus

Nucleus offers you the building blocks you need to create a web presence. Whether you want to create a personal blog, a family page, or an online business site, Nucleus CMS can help you achieve your goals.
http://nucleuscms.org/

Textpattern

Textpattern is a flexible, elegant and easy-to-use content management system. It is both free and open source.
http://textpattern.com/

Content Management

Drupal

Equipped with a powerful blend of features, Drupal supports a variety of websites ranging from personal weblogs to large community-driven websites.
http://drupal.org/

Pligg

Pligg is an open source Content Management System (CMS) that you can download and use for free. Pligg CMS provides social networking software that encourages visitors to register on your website so that they can submit content and connect with other users.
http://www.pligg.com/

Joomla

Joomla is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available.
http://www.joomla.org

Mambo

Mambo is a full-featured, award-winning content management system that can be used for everything from simple websites to complex corporate applications. It is used all over the world to power government portals, corporate intranets and extranets, ecommerce sites, nonprofit outreach, schools, church, and community sites.
http://mambo-foundation.org/

Customer Service

Help Center Live

Help Center Live is an open-source, community driven live chat & support system. You may easily provide live support on your website just like large companies do with very little work. With Help Center Live, you can provide a real-time, live support or sales person experience.
http://www.helpcenterlive.com/

osTicket

osTicket is a widely-used open source support ticket system. It seamlessly integrates inquiries created via email, phone and web-based forms into a simple easy-to-use multi-user web interface.
http://www.osticket.com

Crafty Syntax

Crafty Syntax Live Help (CSLH) is an open source live support solution that helps customer support with live help functionality that can be proactively pushed to visitors to your site or requested by the consumer.
http://www.craftysyntax.com/

eCommerce

osCommerce

osCommerce Online Merchant is an Open Source online shop e-commerce solution that is available for free under the GNU General Public License. It features a rich set of out-of-the-box online shopping cart functionality that allows store owners to setup, run, and maintain online stores with minimum effort and with no costs, fees, or limitations involved.
http://www.oscommerce.com/

Magento

Magento is the eCommerce software platform for growth that promises to revolutionize the industry. Its modular architecture and unprecedented flexibility means your business is no longer constrained by your eCommerce platform. Magento is total control.
http://www.magentocommerce.com/

Zen Cart

Zen Cart™ truly is the art of e-commerce; free, user-friendly, open source shopping cart software. The ecommerce web site design program is being developed by a group of like-minded shop owners, programmers, designers, and consultants that think ecommerce web design could be and should be done differently.
http://www.zen-cart.com/

Open Cart

OpenCart is an open source PHP-based online shopping cart system. A robust e-commerce solution for Internet merchants with the ability to create their own online business and participate in e-commerce at a minimal cost.
http://www.opencart.com/

Agora Cart

AgoraCart – The powerful “Free” Open Source ecommerce shopping cart software solution offers you a very wide range of features that allow you to setup an online storefront or shop ranging from a simple template based store for novices to the integration of complex web design concepts created by your web designer.
http://www.agoracart.com/

Education

Moodle

Moodle is a Course Management System (CMS), also known as a Learning Management System (LMS) or a Virtual Learning Environment (VLE). It is a Free web application that educators can use to create effective online learning sites.
http://moodle.org/

Forums

phpBB

Since its creation in 2000, phpBB™ has become the most widely used Open Source forum solution. Like its predecessors, phpBB™ 3.0 “Olympus” has an easy to use administration panel and a user friendly installation process, which allows you to have a forum set up in minutes.
http://www.phpbb.com/

BBPress

bbPress is forum software with a twist from the creators of WordPress. bbPress is focused on web standards, ease of use, ease of integration, and speed. We’re keeping things as small and light as possible while still allowing for great add on features through our extensive plugin system.
http://bbpress.org/

PunBB

PunBB is a fast and lightweight PHP-powered discussion board. It is released under the GNU General Public License. Its primary goals are to be faster, smaller and less graphically intensive as compared to other discussion boards.
http://punbb.informer.com/

Simple Machines

Simple Machines Forum — SMF in short — is a free, professional grade software package that allows you to set up your own online community within minutes.
http://www.simplemachines.org/

Mailing Lists

phpList

phplist is an open-source newsletter manager. phplist is free to download, install and use, and is easy to integrate with any website.
http://www.phplist.com/

Dada Mail

Dada Mail is a completely contemporary, mature and intuitive web-based e-mail list management system, which runs on most any Unix-like hosting account that can run custom CGI scripts.
http://dadamailproject.com/

poMMo

poMMo is versatile mass mailing software. It can be used to add a mailing list to your Web site or to organize stand alone mailings. Unique Features such as the ability to mail subsets of your subscribers set it apart from alternatives.
http://pommo.org/

Photo Galleries

Zen Photo

Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. It’s got all the functionality and “features” you need, and nothing you don’t.
http://www.zenphoto.org/

Gallery

Gallery gives you an intuitive way to blend photo management seamlessly into your own website whether you’re running a small personal site or a large community site.
http://gallery.menalto.com/

Pixelpost

Pixelpost is an open-source, standards-compliant, multi-lingual, fully extensible photoblog application for the web.
http://www.pixelpost.org/

Piwigo

Piwigo is a photo gallery software for the web, built by an active community of users and developers. Extensions make Piwigo easily customizable. Icing on the cake, Piwigo is free and opensource.
http://piwigo.org/

Using Bloginfo to Build a Custom Theme for WordPress

c.bavota — Wed, 28 Jan 2009 14:26:26 +0000

When you build a custom theme in WordPress that you would eventually like to share with the WordPress community, you can’t hard code certain elements like the blog’s name or images links. I know most coders use things like or but those might not work properly if your WordPress install is not in the root directory or if you are on a category page.

WordPress has a very useful tag that you might have seen around if you’ve ever taken a look at the source code of any theme. It’s called bloginfo and it solves a lot of problems for programmers. Here are some examples of how you would use it.

This will bring up the name of the blog as entered under the Settings => General page in the admin. This tag should be used when coding the header to display the name of the blog.

This will display the description of the blog as entered under the Settings => General page in the admin. This tag should be used somewhere in the header to display the blog’s description.

This will get you the URL of where WordPress has been installed, no matter if it’s in the root directory or a sub-directory. This is great for linking to certain pages or to link back to the home page.

This tag is a life saver when developing custom themes. It brings back the location of where your custom theme’s folder has been installed. Life became a whole lot easier when I discovered this tag. It’s extremely useful when developing a custom theme if you need to link to a secondary stylesheet or display an image stored in the images directory of your custom theme.

Embed High Def Video from YouTube

c.bavota — Fri, 09 Jan 2009 17:14:29 +0000

If you have a video blog or post videos on your blog, you have most likely embedded something off of YouTube. Last year, YouTube bumped up the quality of the videos but when you embed a video on your site, it still references the low quality version instead of the available higher quality video. Now, you need to realize that most of the videos on YouTube are still of the lower quality persuasion but newer videos will always have a higher quality version available.

Tricking the embed code to search out the high def version of each video is pretty simple.

Here are two examples.

Low quality:

High quality:

The difference is one little bit of code that is added to the embed code.

Here is the original embed code:

<object width="560" height="345" data="http://www.youtube.com/v/zrSWBvNXTuM&hl=en&fs=1" type="application/x-shockwave-flash">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/zrSWBvNXTuM&hl=en&fs=1" /><param name="allowfullscreen" value="true" />
object>

And here is the new code:

<object width="560" height="345" data="http://www.youtube.com/v/zrSWBvNXTuM&ap=%2526fmt%3D22&rel=0" type="application/x-shockwave-flash">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/zrSWBvNXTuM&ap=%2526fmt%3D22&rel=0" />
<param name="allowfullscreen" value="true" />
object>

I have replaced the &hl=en&fs=1 with &ap=%2526fmt%3D22&rel=0. You don’t need to add the &rel=0 part. That only removes the related videos that usually appear at the end.

There is one issue with this hack. The D22 of the code searched for the highest quality version, aka 720p HD. If there is no 720p HD version you will get a “This Video has Been Deleted” message. The only option is to change D22 to D18 so that is searches for the middle quality version, aka 480p SD.

Removing the Smart Quotes from your WordPress Blog

c.bavota — Mon, 17 Nov 2008 18:35:01 +0000

WordPress is great and I pretty much love everything about it. But it does have it’s little idiosyncrasies that can often give you a headache if you don’t really know how to stop it from doing something that you don’t want it to.

When you write a post in the backend of WordPress that includes quotation marks, that same post will appear on the front end with your quotation marks changed into “Smart Quotes”.

That is all fine and dandy, but when it comes to coding, smart quotes ruin everything. I didn’t realize that WordPress did this until I noticed a link back coming into my site and they mentioned that people using one of my tidbits needed to be careful of the smart quotes if they copied and pasted from my site. We can’t have that can we? So here is my simple solution to solving the plain text quotes vs. smart quotes issue.

First we need to open up wp-includes/default-filters.php and look for line 100.

// Display filters
//add_filter('the_title', 'wptexturize');
add_filter('the_title', 'convert_chars');
add_filter('the_title', 'trim');
 
//add_filter('the_content', 'wptexturize');
add_filter('the_content', 'convert_smilies');
add_filter('the_content', 'convert_chars');
add_filter('the_content', 'wpautop');
add_filter('the_content', 'prepend_attachment');
 
//add_filter('the_excerpt', 'wptexturize');
add_filter('the_excerpt', 'convert_smilies');
add_filter('the_excerpt', 'convert_chars');
add_filter('the_excerpt', 'wpautop');
add_filter('get_the_excerpt', 'wp_trim_excerpt');
 
//add_filter('comment_text', 'wptexturize');
add_filter('comment_text', 'convert_chars');
add_filter('comment_text', 'make_clickable', 9);
add_filter('comment_text', 'force_balance_tags', 25);
add_filter('comment_text', 'convert_smilies', 20);
add_filter('comment_text', 'wpautop', 30);
 
add_filter('comment_excerpt', 'convert_chars');
 
//add_filter('list_cats', 'wptexturize');
//add_filter('single_post_title', 'wptexturize');

Just comment out a few lines, like I have above, by adding the two slashes (//) before them. Or copy what you see above and paste it over the same line numbers in default-filters.php and all of the quotes on your website will remain as plain text quotes.

How to Modify Your WordPress Tag for Search Engine Optimization</h1> c.bavota — Tue, 28 Oct 2008 22:54:43 +0000 Search engine optimization is one of the more important things, if not the most important, when it comes to your website. Sure, the way it looks and work are both important, as well as the content, but if Google or Yahoo can’t index your pages properly due to the fact that your site isn’t optimized then all that work is for nothing. There are a few plugins available for WordPress that help with search engine optimization but I’ve found that they don’t allow you to really control all the elements you would want to plus I prefer to hard code certain things, just in case the plugins don’t work with updated versions of WordPress. The following is a very simple change to perform, but in my opinion, is extremely important for every WordPress install. Setting up your <title> tag to work dynamically Whenever you create a web page, you must give that page a name. That is what appears at the top of your browser window. <a class="highslide" href="http://bavotasan.com/wp-content/uploads/2008/11/title.jpg"></a> In the header.php file of your WordPress theme you will come across a bit of code that looks something like this. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?>

What this piece of code does is grab the name of your blog and use it for the title of your web page. You control this info by going to your wp-admin panel => Settings => General.

If you are on the main page of your website, you will see the name of the blog at the top of the browser but if you are on on a post’s page then you will see your blog name, “Blog Archive” and then the title of the post.

The basic problem with this default code is that the name of your blog always comes first. Is the name of your blog the most important information or is it the name of your post? Hopefully you said the name of your post.

So, the solution is pretty simple. Let move some things around until we get something like this.

<span style="color: #000000; font-weight: bold;"><?php</span> <span style="color: #b1b100;">if</span><span style="color: #009900;">(</span>is_home<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #b1b100;">echo</span> bloginfo<span style="color: #009900;">(</span>‘name’<span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #b1b100;">echo</span> ‘ <span style="color: #339933;">|</span> ‘<span style="color: #339933;">;</span> <span style="color: #b1b100;">echo</span> bloginfo<span style="color: #009900;">(</span>‘description’<span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">{</span> <span style="color: #b1b100;">echo</span> wp_title<span style="color: #009900;">(</span>‘ <span style="color: #339933;">|</span> ‘<span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">,</span> right<span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #b1b100;">echo</span> bloginfo<span style="color: #009900;">(</span>‘name’<span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #000000; font-weight: bold;">?></span>

The first thing we’re doing here is checking to see if it is the home page. If it is then we’re going to show the blog name and then the tag line (see image above on where to go to change this), separated by a ” | ” character. You can change this to whatever you want but remember to leave the blank spaces before and after the character you choose. Next, if it is not the home page, we are going to show the name of the post (wp_title), but only if there is one. That is what the false parameter is gonna check for us. If there isn’t one then it will just show the blog name. But if there is one then it will show the post name then the blog name, separated once again by a ” | ” character.

Check back for more search engine optimization tutorials and tips.

You can get more information on the WordPress tags used here by going to the WordPress Codex page.

Two Things You Should Do After Installing WordPress

c.bavota — Tue, 28 Oct 2008 04:58:54 +0000

WordPress is a great tool whether you want to install a basic blog or use it as a content management system. Programmers can very easily go in and manipulate the code to get it to do anything they please. Plus there are tons of great plugins available to add every single feature you can imagine.

Whenever I work with WordPress, there are a few things I do immediately after a new install. They help with search engine optimization and making things work a little better.

1. Activate pretty-permalinks

When you first install WordPress, the permalinks default to something that looks like this,
http://bavotasan.com/?p=123
But we want it to look like this
http://bavotasan.com/tutorials/things-you-should-do-after-installing-wordpress
Why? Because that is the first step to optimization your new WordPress install for search engine ranking.

How do you do it?

1. After logging in to you wp-admin, click “Permalinks” under the “Settings” menu on the left
2. Select “Custom Structure”
3. Type “/%category%/%postname%/
4. Click “Save Changes”

2. Make sure thumbnails do not crop to exact dimensions.

When you upload an image to WordPress, the default setting crops the thumbnail to be exactly 150px by 150px. Not too good if the images you are uploading are not perfectly square. (If by chance you do want your images to be cropped to these exact dimensions then you can ignore this one.)

How do you do it?

1. After logging in to you wp-admin, click “Media” under the “Settings” menu on the left
2. Click the checkbox under “Thumbnail size” that says “Crop thumbnail to exact dimensions (normally thumbnails are proportional)” to remove the check.
3. Click “Save changes”

Even though these are two little things, I find that they are both very important to start things off on the right foot with a new WordPress install.