Generating Simple 1D Barcodes with PHP

Posted by Shaiful Borhan on May 26, 2011

Shaiful shares a simple tool for starters exploring about barcode generation in PHP applications. Shaiful Borhan is the Web Analyst and Developer at Stampede.

In web applications like an online-ticketing system, encoding the purchase reference number as barcodes on the ticket print or voucher can be quite useful in helping over-the-counter staff to quickly handle processes such as guest check-in using a barcode scanner.

There are many kinds of barcode formats out there to cater the types or amount of data you are trying to encode. However if you are just starting out for a bit of familiarization, generating 1D barcodes with PHP couldn’t be simpler with the free (for non-commercial use) PHP Barcode Generator class.

Extract the ZIP and use the following line to generate a barcode in a Code 39 barcode format encoding the string A1B2C3D3.

<div>
   <img src="html/image.php?code=code39&amp;o=1&amp;dpi=72&amp;t=80&amp;r=1&amp;rot=0&amp;text=A1B2C3D3&amp;f1=Arial.ttf&amp;f2=10&amp;a1=&amp;a2=&amp;a3=" alt="Barcode" />
</div>

Some key parameters:

code

     

The barcode format. Most of the standard 1D formats are supported such as Code 93 (code93), Code 128 (code128), UPC (upca) and EAN 8 (ean8).

o

          

The output image format; PNG (1), JPEG (2) or GIF (3)

t

The thickness or height

rot

The rotation angle; 0, 90, 180 or 270

text

The data to encode. Code 39 only supports uppercase letters and numeric digits.

f2

The font size of the label

For a more detailed explanation of each parameters and configurations, please refer to the barcode generator GUI tool bundled in the ZIP archive.

Have a nice day.

Posted in Code Add Comment »

Supermassive Custom Template

Posted by Syazwan Hakim on May 5, 2011

“Working with a custom design on an existing theme requires a different set of considerations.”

Syazwan shares his experience working on Supermassive custom template. Syazwan is the front-end developer at Stampede.

Back in December 2010, I’ve been given a task to code for a design based on the Supermassive templates. For your information, Supermassive is a powerful, professional WordPress theme. In their own marketing phrase, it is “a next generation WordPress theme”. Supermassive can help you to create a great looking theme that allows you to make your own unique and abstract layouts in minutes. You can easily change the position of a particular element since the <div>s are fluid. Imagine you have two horizontal boxes, named Box Left and Box Right. You can easily make Box Right in 100% width by just removing Box Left completely. I find this task to code based on Supermassive template really puts my XHTML/CSS skills to the test. I need to optimize everything that I’ve learned about building reliable yet semantic XHTML/CSS template which works on IE6, IE7, IE8, Chrome, Opera, Firefox and Safari. Working with a custom design on an existing theme requires a different set of considerations. The first thing I needed to consider is where to do the front-end coding for the custom design. This is because we want to be able to update Supermassive template in the future when a new version is released. Therefore, I need to consider where to add my front-end codes. After some discussions, we decided to code on a Supermassive Child Theme. It’s the easiest yet very reliable way to keep the ability to update to new Supermassive version in the future. When updating Supermassive original template, it will only replace the parent theme which is the original Supermassive Theme. In this case, updating the original template won’t affect the child theme. Second thing to consider is the HTML structure. Since Supermassive uses shortcode heavily for its layout based on <div>, I can’t simply code custom HTML structure. What I need to do is to create each Supermassive element using the shortcode first. Once all elements are created, I can start styling the elements based on design without making changes on the HTML element or structure. Using this method, I can still use any Supermassive shortcode without having to worry about the styling even if the shortcode will never be used. The last thing to consider is how to make the template styled according to my custom CSS instead of the original CSS. This is the trickiest part. I need to make sure everything on the custom CSS has the highest priority, so the website will be styled according to it. We can’t simply remove the original CSS because we still need some styling from it such as the administration interface, sliding effect and JavaScript element. For me, the easiest way is to add !important syntax at the end of the styling, e.g. div a {text-decoration:hover !important;}. With that, it will have higher priority. I recommend not to define any font size on the CSS because on current version of Supermassive template, there is a specific panel to change the font size directly. Supermassive is a great tool for WordPresser because it comes with its own JavaScript snippets which includes sliding effect, tabs, and image manipulation. It also has a very user-friendly interface for administration. I’m sure Supermassive shortcode list will come in handy for beginners.

Posted in Code Add Comment »

Sticky Post Slider in WordPress without a Plugin

Posted by See Guo Lin on February 28, 2011

“Many blog owners love to have a slider for featured posts in their blog home page these days. A slider gives draws the attention to the blog posts selected by the owner and allows the visitors to quickly glance through some of the best posts.”

Guo Lin shares his preferred method of creating a slider for featured posts in WordPress.

Many blog owners love to have a slider for featured posts in their blog home page these days. A slider gives draws the attention to the blog posts selected by the owner and allows the visitors to quickly glance through some of the best posts. It is a smart and welcomed way to promote the blog with its own posts. Many blog owners seek help from various plugins to achieve the slider for featured posts. But I prefer to code it directly in the theme I work on, while using the existing ‘Sticky Post’ feature in WordPress to achieve the same effect. Disclaimer: This may not be the only nor the best way for anyone to achieve the same presentation, but I intend to share it as a reference for interested people. There are several reasons I usually choose to use the Sticky Post feature instead of implementing another custom field or tag or category etc. First, I notice the native WordPress Sticky Post feature is not in use in most of the blogs (note: personal observation), and I think this native feature should be more well utilized. Second, I think the current way presenting Sticky Posts in WordPress takes away too much attention from the worthy latest posts because Sticky Posts take up the place before the latest posts at the same content area. A separate area to display the Sticky Posts such as the post slider area is a good way to give attention to some ‘selected’ posts while not attracting too much attention away from the latest posts. Third, implementing the post slider using a tag or a category is more like a hack because tags and categories are supposed to describe the contents of the blog post. Sometimes there may be a need to present contents with a certain tag or category differently (e.g. tag templates or category templates), but the main point of using tags and categories should be to describe the blog post contents, not merely as a way to differentiate the way blog posts are presented. Enough said. Let’s get into how I do it. Let’s say I have these blog posts and several of them are made ‘Stick Posts’: In the default Twenty Ten theme, each of the Sticky Posts appears in a box in a light-blue background with a thick black top border line in the home page of the blog, in the main blog posts area above all most recent posts:

MooTools and noobSlide

Since in this post, I’m going to use noobSlide as our content slider, we need to include MooTools JavaScript library. Go to the functions.php file in the template and add the following codes at the bottommost.

function register_custom_js() {
    wp_register_script( 'mootools', 'http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js', '1.3.0' );
    wp_register_script( 'noobslide', get_bloginfo('template_directory') . '/_class.noobSlide.packed.js' , array( 'mootools' ) );
}
add_action( 'init', 'register_custom_js' );

function enqueue_noobslide() {
    if ( is_home() ) { // our slider only appear in the home page, so load the script only in home page
        wp_enqueue_script( 'noobslide' );
    }
}    
add_action( 'wp_print_scripts', 'enqueue_noobslide' );

Post Thumbnail Support

In this tutorial, I’m going to use post thumbnails in my slider. If your theme has not yet added the feature, you can add it using the following codes in your functions.php:

function custom_theme_setup() {
    add_theme_support( 'post_thumbnails' );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );

Also make sure your Sticky Posts has set the ‘Featured Image’ (BTW, WordPress should standardize the use of name).

Custom ‘Read more’ Link

In the default Twenty Ten theme, a custom “Read more” link is used. I’m going to change it to use my own customized “Read more” link so I can place a class for styling. I will comment out this line in the Twenty Ten functions.php file:

//add_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' );

Then, I will add the following to the same file:

function custom_excerpt_with_more( $excerpt ) {
    if ( has_excerpt() && ! is_attachment() ) {
        global $post;
        return $excerpt . '<p class="slider-more"><a href="' . get_permalink( $post->ID ) . '">Continue reading</a></p>';
    }
    return $excerpt;
}
add_filter( 'get_the_excerpt', 'custom_excerpt_with_more' );

function custom_excerpt_more( $more ) {
    global $post;
    return '<p class="slider-more"><a href="' . get_permalink( $post->ID ) . '">Continue reading</a></p>';
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );

custom_excerpt_with_more() function is for automatic excerpts or user-specified excerpts with read-more tag. custom_excerpt_more() is for hand-crafted excerpts.

CSS and JavaScript

Then, we add the custom CSS and JavaScript codes in functions.php to make the theme serve them when we are in the home page where the slider will appear.

function custom_slider_css_js() {
    if ( is_home() ) { // only in home page
?>
<style type="text/css">
#slider{border:1px solid #ccc;width:640px;position:relative;overflow:hidden;height:213px;margin-bottom:20px;}
#mask{position:absolute;height:213px;}
.items{float:left;height:213px;width:640px;position:relative;}
.items .wp-post-image {float:left;}
.info{width:320px;float:left;font-family:Arial, Helvetica, sans-serif;}
#content .info h2{font-size:20px;font-weight:bold;color:#1c3f95;margin:10px 10px 15px 10px;}
#content .info p{font-size:11px;color:#1c3f95;line-height:16px;margin:10px;}
.info a{font-size:10px;padding:5px 7px;background:#e1e1e1;text-decoration:none;text-transform:uppercase;font-weight:bold;color:#1c3f95;}
.info a:hover{color:#ffffff;background:#1c3f95;}
#slider .handle{position:absolute;bottom:0;right:5px;line-height:10px;text-align:center;font-size:25px;font-weight:bold;}
.handle a{color:#ccc;height:20px;width:20px;display:inline-block;cursor:pointer;}
.handle .active{color:#1c3f95;}
.handle a:hover{color:#1c9f65;}
</style>
<script type="text/javascript">
/*<![CDATA[*/
window.addEvent('domready',function(){
    var nS8 = new noobSlide({
        box: $('mask'),
        items: $$('#mask .items'),
        size: 640,
        autoPlay: true,
        interval:8000,
        handles: $$('.handle a'),
        onWalk: function(currentItem,currentHandle){
            $$(this.handles).removeClass('active');
            $$(currentHandle).addClass('active');
        }
    });
    var handle = $$('.handle a');
    handle.each(function(el,i){el.addEvent('click',nS8.walk.bind(nS8,[i,true]));});
});
/*]]>*/
</script>
<?php
    }
}
add_action('wp_head', 'custom_slider_css_js' );

WordPress Theme Modification

Next, go to the theme template file that display the Loop in the home page, in this case, it is the loop.php file in the Twenty Ten theme. Place the cursor right before the Loop area and we can start putting our codes for the slider.

<?php 
if ( is_home() ):
    $sticky = get_option('sticky_posts');
    $slider = new wp_query( array( 'post__in' => $sticky ) );
    ?>
    <?php if ($slider->have_posts()): $count = 0; ?>
        <div id="slider">
            <div id="mask">
                <?php while ( $slider->have_posts() ): $slider->the_post(); $count++; ?>
                    <div class="items">
                        <?php the_post_thumbnail( array( 320, 213 ) ); ?>
                        <div class="info">
                            <h2><?php the_title(); ?></h2>
                            <?php the_excerpt(); ?>
                        </div>
                    </div>
                <?php endwhile; ?>
            </div>
            <div class="handle">
                <?php for ($count; $count > 0; $count--): ?>
                    <a>&bull;</a>
                <?php endfor; ?>
            </div>
        </div>
    <?php endif; ?>
<?php endif; ?>

At this point of time, when you go to the home page of the blog, you will see the slider is up and running already and we are almost done: But wait, we are not done yet. Notice the main blog posts area still have the Sticky Posts? We need to get rid of them to return the attention taken away from the latest posts. To accomplish that, we will add the following codes right after our content slider codes:

<?php 
if ( is_home() ):
    $sticky = get_option('sticky_posts');
    $slider = new wp_query( array( 'post__in' => $sticky ) );
    ?>
    <?php if ($slider->have_posts()): $count = 0; ?>
        <div id="slider">
            <div id="mask">
                <?php while ( $slider->have_posts() ): $slider->the_post(); $count++; ?>
                    <div class="items">
                        <?php the_post_thumbnail( array( 320, 213 ) ); ?>
                        <div class="info">
                            <h2><?php the_title(); ?></h2>
                            <?php the_excerpt(); ?>
                        </div>
                    </div>
                <?php endwhile; ?>
            </div>
            <div class="handle">
                <?php for ($count; $count > 0; $count--): ?>
                    <a>&bull;</a>
                <?php endfor; ?>
            </div>
        </div>
    <?php endif; ?>

    <?php
    $args = array_merge( $wp_query->query, array( 'post__not_in' => $sticky ) );
    query_posts( $args );
    ?>
	
<?php endif; ?>

All Done!

Now enjoy your fully functional content slider. =) Images in the sample blog courtesy of phalinn.

Posted in Code 1 Comment »