Tutorials

Customize our premium WordPress themes and stand out from the crowd

The Lensa Theme, Simple Layer Overlay in Photoshop

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.

1

Continue reading »

Secure Your WordPress

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 »

Create a Simple WordPress Admin Panel – Part III

http://colorlabs.co/W1fcIG

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 »

How to Make a List Page Template

http://colorlabs.co/SVfweL

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 »

How to Create FAQ Page With Custom Post Types

http://colorlabs.co/SVfxzr

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 »

Create a Simple WordPress Admin Panel – Part II

http://colorlabs.co/JNfnRU

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 »

How to Create a Simple Widget on WordPress

http://colorlabs.co/I7QWUh

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 »

Create a Simple Child Themes with Backbone Framework

http://colorlabs.co/IflDDP

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 »

Create a Simple WordPress Admin Panel – Part I

http://colorlabs.co/vquVFk

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 »

How to Add Social Network Icons to Arthemia

http://colorlabs.co/mGvYDU

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 »

Colorize your Platformate Theme!

http://colorlabs.co/HN8uF1

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 »

Arthemia and WordPress Localization

http://colorlabs.co/lXsBwA

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 »

Contact Us