WordPress widgets are classes, which makes them easy to duplicate, even if you’ve never worked with object-oriented programming before. A class provides a blueprint for objects that will be reused in various ways. Creating a new widget is a matter of copying the basic widget class, then adjusting the enclosed functions to output the content you have in mind. The widget class contains four functions: one that registers the widget, one that prints the widget output, one that updates the widget options, and one that displays the options form..

To create a widget, you only need to extend the standard WP_Widget class and some of its functions.

That base class also contains information about the functions that must be extended to get a working widget.

Continue Reading »

The recommended way to customize Backbone Framework and keep track of all your changes is to create a child theme. It is not as hard as you might think. Even if you do not think of yourself as a developer, meaning you have limited HTML, CSS, JavaScript or PHP skills, you STILL ought to create a child theme. By using a child theme, you can make all of the same modifications as you would to the Backbone Framework, make changes to the markup (adding extra divs or wrapper for styling). This allows you to update the Backbone Framework whenever you want and you can still realize your own ideas.

What is a Child Theme?

From the WordPress Codex:

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.

A basic child theme consists of only a style.css file.  If you plan on using the available Action Hooks and Filters in Backbone, you will also need to create a functions.php file.  You can also add a screenshot.png file too, which is your theme’s thumbnail that will show up on the Appearance -> Themes page.

Continue Reading »

Nowadays, websites are not only being accessed from desktop. We can access websites from tablet or mobile devices anytime and anywhere. Therefore, a front-end web developer must create website that is compatible to all screen resolutions, from desktop to mobile devices.

Here comes Responsive Web Design. With responsive design your website will look great no matter what kind of device or screen size on which it’s being viewed. This is where web design is currently heading and if you ignore responsive design you stand a good chance of being left behind and designing sites that look out of date. And do you know? Almost all WordPress themes by ColorLabs support responsive design and we are still working on getting all of them to have responsive design.

When converting theme to support responsive layout, I always find a problem: how to fit the long menu into a small screen? The answer is to turn that long menu into a dropdown select menu. Let’s take this navigation menu from Directory, our Classified Ads theme, as an example.

Continue Reading »

When we create our themes, we also need to create our own theme options on the admin panel. By customizing the theme options, it will make it easy for us, and most importantly, for our users to control the theme. You don’t need to create hardcode again to change the options. Simply select and save it. And you’ll get what you want.

Now I will explain to you how to make a simple WordPress admin panel. This post will be useful when you make your own WordPress theme along with the admin panel. Don’t worry, everything is easy when it comes to WordPress, including making your own theme options on the admin panel.

You can put any kind of control options for your theme on the admin panel, such as uploading logo or choosing the headline’s category.

You can use all class in WordPress to make a layout for our admin panel, and add some style to make tab or accordion effect.

Continue Reading »

Having your blog or web site ‘connected’ to popular social networks is very common nowadays. It’s so effective to boast your online existence to your audience and you can engage to them effectively if they’re are connected to you. For those who enjoy customizing WordPress themes and are okay with a bit of PHP/HTML tweaking, you can try out this tutorial. We’re taking Arthemia as an example but this is pretty much applicable to any theme. It’s very easy; with a few simple steps you can add social network icons to your theme without needing to install any plugin.

Step 1: Google a good-looking pack of social network icons

There are loads of free social network icons available online and you can choose any ones you like. This is actually the hardest part of the tutorial and you might spend a large portion of your time choosing the icons because they are all so beautiful and hard to pick. In this tutorial, we’re going to use the ones from FreeIconsDownload.com. You can download them here.

Continue Reading »

Platformate Theme has just been released and made avaiable for sale a day ago. The theme is designed for you who are willing to have unique blog design, a magazine look with personal touch. In one single purchase, you get the unlimited possibility to pick and decide the color scheme of the theme. Here is a very simple tutorial on how to colorize your theme.

There are basically 3 colors applied across the theme: the dark tone, the light tone, and the link hover cover. With these 3 user-definable options, you can get any color you want for your blog.

What should I do?

1. Log into your WP Dashboard.
2. Activate the Platformate Theme. (you should have done this already, I guess)
3. Go to Design >> Platfotmate Options
4. In the top-right section of the theme admin panel, you’ll find “Theme Color“.
5. Put the codes below to your admin panel, save the settings.
6. Visit your blog, refresh the page, and you’ll see your blog in a new color.

Note: The category spoilers colors in the right sidebar must be configured in “Category Color Assignment” in the bottom-left of the admin panel.

Continue Reading »

So, what about localization? “Although WordPress displays in U.S. English by default, the software has the built-in capability to be used in any language. The WordPress community has already translated WordPress into many languages, and there are Themes, translation files, and support available in many other languages.” – WordPress.org

WordPress in Your Language

To get WordPress in your own language, read this post from WordPress.org thoroughly and download any available localized WordPress that you want. There are 58 languages available for you. After that, simply upload all the files and you will find everything in the WordPress Dashboard panel is now in your own language.

If you still see English texts in your WordPress Dashboard, do a double-check and analysis. Open your wp-config.php file in a text editor and search for:

define ('WPLANG', 'xx_YY');.

xx_YY is your language code, for example: de_DE for German, id_ID for Bahasa Indonesia, or fr_FR for French. If you did not find that command there, you probably downloaded the wrong file.

If you did and you don’t want spend your valuable time re-uploading the whole package, read this post regarding manually installation of wordpress language files. For me, uploading a total of 4MB files is somewhat time-consuming. Why? Because there are only 3 files that needed to do the whole translation. (Shouldn’t I tell you this in the first place?) :) Read that post and search for .PO and .MO file for your local language and do manual installation.

Continue Reading »

If you still have problems getting the thumbnail automatic generation working, please read this tutorial. I spent a lot of my time creating this tutorial, including screen shots for some significant steps, and adding narrative text to each image. Please consider reading the whole instruction again, again, and again because I found out that there is 90% possibility that you missed one spot and there are many occurrences one say that he/she did not missed anything but ended up saying “Ah, yeah, I forgot that one.” :D

The CHMOD 777

Upload and activate the Arthemia theme. Then, the first step is to make the scripts and cache folder writable. You can either try ’777′ writable or ’755′ writable. Some web hosting company prevent you making any folder ’777′ writable due to some security reasons. But, I suggest you to try with ’777′ writable first. I use FileZilla to do the FTP work because it is free and has a lot of features. To make the folders writable, simply right click the folder name and select ‘File Attributes’ and a dialog box will show up.

Continue Reading »