These days, almost everyone has an internet-viewing device with them, all the time. May it be a tablet or a smartphone, this gadget slips right into our pockets and plays an important role of our daily lives. The whole idea of this so-called smart device is its ability to access the Internet and do virtually every task we would usually do on a full-sized PC while keeping the size small enough to make it light and portable. However, a new problem arises: the web wasn’t made for smartphones. Their screens are too small, so the content of the web is pretty hard to read. If you own a website, you will probably loss a large number of readers just because of this.

Then what to do? The best thing that you can do is make your site become responsive, which, in other words means that the site will adjust itself (its layout and everything) to fit into any screen size. At this tutorial, we will tell you how to make your WordPress theme responsive. Although now nearly all themes in the market are already equipped with responsive design, this tutorial will still help you modify those themes.

At this tutorial, for practice we will use the default WordPress theme, TwentyTen, which does not yet have a responsive design.

Continue reading »

A few months ago, we released a free WordPress theme, Lensa, that we especially tailored for hardcore photographers. Lensa is quite a popular theme as it has been downloaded nearly 5,000 times when this blog post is written. A image layering trick that we implemented on Lensa was meant to add a dramatic feel on the photographs being showcased. That overlaying process is done automatically by the theme using a simple CSS technique, which won’t be covered in this post. This post, however, explains how the whole process can be simply done in a Photoshop environment. Hopefully you’re able to pull off this simple trick by the end of the tutorial. The one tool that you need is Adobe Photoshop, any version, preferably CS4.

Continue reading »

These days, WordPress-site hacking is becoming very common. Although this shouldn’t make you doubt WordPress (mind you that any site is prone to hacking, be it on WordPress or anything else), you should treat this as a wake-up call that everyone on the Internet should pay more attention to the security of their websites.

Hackers usually use a bug as a backdoor and this bug may come from WordPress plugins or themes that you use or from the WordPress engine itself. Here we have listed several tips on securing your WordPress site from hacking or malware:

Continue reading »

The Backbone Framework has been carefully sprinkled with actions and filters that external code can hook into, injecting new functionality into the standard flow. In this article we list a complete list of hooks and filters that have been built into the Backbone Framework.

Continue reading »

Backbone implements a series of actions and filters to make it easy for you to plug in your own sets of code into the theme, whatever the purpose may be. For example, with an action hook, you could add a chunk of HTML code to show an image in the header of all pages without having to touch the header.php template. With a filter hook, you can change the format of the dates shown in posts. There are other examples and you could look into and to learn about hooks in detail, please refer to this hooks and filters documentation on WordPress.org. Just before we start, please understand the basic difference between action hook and filter hooks. Action hooks are executed when certain WordPress events occur while filter hooks are executed throughout the whole page loading process, from the beginning to the end. Filter hooks are particularly useful for text and/or content manipulation.

Continue reading »

This is the last part of the tutorial “Create a Simple WordPress Admin Panel“. Finally, I have time to finish this tutorial. Let’s get started with it. In case you missed the previous parts, go check Part I and Part II to complete the tutorial.

In the previous tutorial, we have already created our own admin panel page with separate option positions but we think it’s still not good enough. We need to add some CSS styling and JavaScript effects to perfect the theme panel and make it look rather sophisticated. In this last part of the tutorial, I will tell you how to add accordion effects onto the admin panel which we have created before.

Continue reading »

Some of users may not be satisfied with a default template from the flexible CMS like WordPress, we are going to give you a simple tutorial to create a new template with your own “new” table at the WordPress database This will be a really easy way to make it work.

The first thing we need to do is create a table in database, you can create directly on your server or creat at your localhost first then export/import to database server. Here is the example fields with the table below:

Continue reading »

Forum is one of the needed page when viewers/customers share for questions and answers, FAQ page is created specifically for the viewers/customers, and contains general questions and their respective answers about a particular product or service. In this section we’ll show the process of creating a targeted FAQ section in the WordPress back end with custom post types, and add some styles to make it more stylish with CSS and a bit of jQuery.

To accomplish our goal, we require a targeted custom FAQ WordPress post type. In this case, we’ll use a default wordpress theme i.e Twenty Eleven, but not using this theme directly, we will create a child theme for Twenty Eleven theme and rename it with FAnkQies theme, so we won’t disturb Twenty Eleven theme  at all.

Continue reading »

One way of making visitors keep coming back to your website is by having an attractive and unique design. If your business already has a WordPress-powered website, it is possible to have its look and feel matches your business/brand image without doing a complete re-design and without paying thousands of dollars to have the website developed. Nowadays, the internet almost has answers to all of our needs. By searching on Google you can find many kind of code examples, forums, tutorials and even outstanding innovations that enable anyone to build websites with little web development skills and knowledge.

Editing and customizing WordPress themes can be very intimidating if you are not familiar with how they work, but with some assistance you can have a unique design for your website in no time. This tutorial guide will teach you how to customize a WordPress theme the right way.

Continue reading »

At the Part I of Create a Simple WordPress Admin Panel, I explained how to make a theme option panel in WordPress dashboard menu, and right now I will tell you how to make the theme options at theme panel page. Don’t forget to continue to the last part of the tutorial.

Before we begin, let me explain all the structure that I used in this part of the tutorial. Theme panel page will be wrapped up into a div named “options_wrap” and then “content_options” for the options container. And for each section of options has a separate div with a class of “options_section”. This div has a title (for the name) as well as several input div’s within it. By using classes on tag div like <div class="option_input option_select">, we can style dropdown’s, text inputs, and textarea’s differently.

Continue reading »

CSS framework is a collection of code that will cut your development time and make your daily coding easier. A CSS framework usually contains some component like css reset, typography style and grid system. Now I will explain how to create a css grid framework with Compass.

Continue reading »

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 »