Tutorials

Customize our premium WordPress themes and stand out from the crowd.

How to Start Coding with PHP and MySQL – Part 2

http://colorlabs.co/11Nj9u5

coding with PHP and MySQL

Hello All! How’s going on? I think you all could gain some knowledge of PHP and MySQL, of course I am not talking about the experts but the beginners like me and you (if you are.. J). Hope you found something that will be helpful to you while doing coding with PHP and MySQL.

Continue reading »

How to Start Coding with PHP and MySQL – Part 1

http://colorlabs.co/1tc2bvn

coding with PHP and MySQL

You have a great idea for a site, right? Excellent. Open up your PHP editor and start coding!

Believe it or not, many people start their career by creating their first web application this way. You could be tempted to yourself. It is not impossible to create an excellent website in this manner; however, you are usually seriously handicapping your chances for greatness. Before even thinking about, you’ll need a plan.

Continue reading »

Add Custom Color Scheme to Lensa WordPress Theme

http://colorlabs.co/UwoG48

For you who are Lensa Theme users who want to easily change the color scheme of your Lensa theme, this time, we will try to make a custom color scheme option for Lensa Theme. We will create 3 custom color that will be used, primarily named, create the link and the text color and also one option to enable or disable this option.

First, we have to make 4 options to appear on dashboard, to do that, you have to open the file in “lensa/includes/theme-option.php”. Then find this code (you may find it on the latest version of Lensa Theme on line 499):

Continue reading »

Create Theme Panel using WordPress API

http://colorlabs.co/1rRMu1k

Previously at 2011, we already create some tutorial how to make Create a Simple WordPress Admin Panel for a theme. But that tutorial doesn’t use WordPress API, because there are to many create new functions which WordPress have it. We need make more easiest then before, just more using standard WordPress functions and structures.

By now, i will show you how to create theme panel using WordPress API with create new options for a theme. In this tutorial, we will look at exactly how make new option to added some logo for a theme and show it at the header.

Continue reading »

Arthemia Modifications: Show Off Your Blog And Online Shop

http://colorlabs.co/1r0BlaB

Several days ago, i have a thought about the old theme i have. It is Arthemia.

As you know, since the version 3.9 you have an integration with WooCommerce plugin. For me, this is a great feature from ColorLabs theme.

But, at that time (and until now) there is no change on the layout of this theme. There is an integration with e-commerce plugin, but the layout stay still as a magazine.

Continue reading »

How to Use MobileView Plugin

http://colorlabs.co/1mQXx8O

MobileView is one of our popular free WordPress plugin for your WordPress website. It automatically transforms your WordPress powered site into an across devices mobile-friendly site such as from an iOS or Android device and other smartphone. MobileView functions separately from your existing theme and takes control only the ‘mobile’ aspect of your site. It’s not going to affect your site’s desktop view but mobile-wise, things are all transformed beautifully. MobileView comes with a good-looking admin options panel and easy to use.

MobileView have several premium skin which will make your mobile site looks more clean, elegant and beautiful. You can choose and browse our premium MobileView skin and start to make a changes to your mobile website to become more wonderful.

Continue reading »

Remove The Slugs from Custom Post Type URL

http://colorlabs.co/1n42k6m

If you are a WordPress user and want to customize the permalink for custom post type to remove the generated slug by WordPress (post_name value) for your custom post type, then you might stumbled across different solution on the web trying something that might achieve the same effect without any performance impact. This method is worth to try.

Note: This is a version we found useful and it worked for a particular case. It may not work for you, but you can post a comment below and maybe we can figure it out.

So, let us get down to the nitty-gritty. All you need are the following lines of code, that should be placed in your theme’s functions.php file, and your permalink structure should be /%postname%/.

First, register your own custom post type normally.

/**
 * Register a custom post type
 */
$args = array(
    'description' => 'Photograph Post Type',
    'label' => __('Photographs'),
    'public' => true,
    'rewrite' => array( 'slug' => 'photograph'),
);
register_post_type( 'photograph' , $args );

Then the second thing that we have to do is to remove the actual slug from the actual URL, we want to filter the permalink for our custom post type (in this case is “photograph”) such that all published posts don’t have the slug in the URI.

We can do this by checking the post type and if the current post has the desired type we proceed in removing the slug using str_replace on the permalink. In order for this function to work we need it to be attach to a hook. Luckily, WordPress has a filter called post_type_link that is used.

/**
 * Remove the slug from published post permalinks.
 */
function custom_remove_cpt_slug( $post_link, $post, $leavename ) {

    if ( 'photograph' != $post->post_type || 'publish' != $post->post_status ) {
        return $post_link;
    }

    $post_link = str_replace( '/' . $post->post_type . '/', '/', $post_link );

    return $post_link;
}
add_filter( 'post_type_link', 'custom_remove_cpt_slug', 10, 3 );

Now you managed to get until this step but you will hit a 404 if you try to view the link. Well that is because WordPress doesn’t recognize that post as a custom post type anymore. We need to fix and trick WordPress to think that the requested post is in fact a custom post type. Here is the way to do it:

/**
 * Some hackery to have WordPress match postname to any of our public post types
 * All of our public post types can have /post-name/ as the slug, so they better be unique across all posts
 * Typically core only accounts for posts and pages where the slug is /post-name/
 */
function custom_parse_request_tricksy( $query ) {

    // Only noop the main query
    if ( ! $query->is_main_query() )
        return;

    // Only noop our very specific rewrite rule match
    if ( 2 != count( $query->query ) || ! isset( $query->query['page'] ) ) {
        return;
    }

    // 'name' will be set if post permalinks are just post_name, otherwise the page rule will match
    if ( ! empty( $query->query['name'] ) ) {
        $query->set( 'post_type', array( 'post', 'photograph', 'page' ) );
    }
}
add_action( 'pre_get_posts', 'custom_parse_request_tricksy' );

And that was our lesson in WordPress slug removing. Now you managed to have your own custom post type permalinks without the slug.

Continue reading »

Adding Custom Post Types to WordPress Theme

http://colorlabs.co/1iT7E7M

WordPress has default content types. At the first time you installed WordPress, you will get two content types by default: Post and Page. Most users use Posts for blog posts and Pages for static content. The fundamental difference between the two is that Pages aren’t time-specific, unlike Posts which are usually archived according to dates, months and years.

Sometime we need to publish something with specific content. For example, posting the products what we have for sale, share our portfolio, or make a list for all of our project. But we can’t use Posts and Pages to make that’s happen. We need to keep each type of content separated. So we need to create own type of the content. With Custom Post Types, we can create a new type  of items such as Posts and Pages which  will contain a different set of data. We will have a new management menu, custom taxonomies, custom meta boxes, and many more utilities that is required for full fledged publishing.

Continue reading »

How to Create WordPress Shortcodes

http://colorlabs.co/VgOM76

Shortcode in WordPress is a statements represented an instruction that will be executed within posts or pages. With shortcodes, user has the ability to publish dynamic content using macros, without the need for programming skills.

We will give you three examples on how to create shortcodes in WordPress.

Continue reading »

Translate ColorLabs Themes with CodeStyling Localization

http://colorlabs.co/Kmr6y4

Localization is the process by which the text on the page and other settings are translated and adapted to another language and culture, using the framework prescribed by the developers of the software. WordPress has already been localized into many other languages.

ColorLabs Themes comes with localization ready. All that’s needed is your translation – if the plugin does not come bundled with your own language.

Continue reading »

How to Use Post Format in WordPress Theme

http://colorlabs.co/1i0zUVG

What are Post Formats?

A Post Format is a piece of meta information that can be assigned to individual posts and used by a theme to customize the presentation of these posts. Post Formats was introduced in version 3.1 which allow author to add context to the different posts they have written. It offers 10 unique formats that can be assigned to posts including: Standard, Aside, Audio, Chat, Gallery, Image, Link, Quote, Status and Video.

Continue reading »

Create an Awesome Presentation with Reveal.js and Nodejs

http://colorlabs.co/Kmr5ua

slider-presentation-node

Let’s say, you have to talk in an event or you have to present a product that you are develop to your boss. And you want to impress them with your presentation slides. As we are web developers, we can present our presentation inside browser, using Javascript framework called reveal.js. The framework use CSS3 and Javascript, so we can use our CSS technique inside the slides. I will guide you how to create presentation using reveal.js and use mobile phone as the controller for the presentation.

We will using nodejs for controlling the presentation. I assume you have installed nodejs on your local machine. If you haven’t installed it, you can check this tutorial and come back here after that.

If you wonder, this is what we will create in this tutorial.

Slide Demo Slide Remote Control

Continue reading »