Archive for the ‘Tutorials’ Category

The simple way to code a website design that looks the same on all browsers

With no tables, table-less CSS and xHtml coding, without  any ie.css external file, this tutorial is how to make a perfect alignment between div tags and how you can build a perfect cross-browser design using only divs and one single css file with organized css code that uses a simple (personal) technique, you can create 1 single css file that will work with all browsers.

The secret is three lines of CSS code: +Continue Reading

Install Wordpress Locally using Xampp, Mampp and Wampp on Windows and Mac – video tutorials

On Windows:

The first video tutorial is from wordpress.tv and it’s for how to install Wordpress locally on Windows and WAMPP Server:

The second tutorial is from youtube and it’s for +Continue Reading

Advanced Youtube Widget 1.0.5 Wordpress Plugin Tutorial

Even though this tutorial is meant to be more advanced than the original Post it can’t be too complex as the plugin is not too complex…

This plugin is actually a widget with all it’s options inside the widget content… To get to the widget and configure it you need to go inside the admin panel of your wordpress blog/website under appearence – > widgets.

Inside the available widgets tab, drag and drop the “Advanced Youtube Widget” to the sidebar where you want it to go:

drag and drop advanced youtube widgetThen configure the options for the widget: +Continue Reading

Give a Beer 1.0.6 Wordpress Plugin Tutorial

Very short (because there’s not much to say) tutorial on how to use Give a Beer Wordpress plugin Version 1.0.6.

The plugin is actually a widget that show’s up in the widgets page

give a beer widgets sidebarYou need to go under Appearance -> Widgets to get to the widgets page. There you can drag and drop the Give a Beer widget into the sidebar where you want it to show:

drag and drop give a beer widgetOnce you’ve done this it will show options for the widget… +Continue Reading

Live Countdown Timer 2.1.0.5 Tutorial

The Live Countdown Timer Plugin version for this tutorial is 2.1.0.5.

Live Countdown Timer can be added as a widget in any sidebar once or in any post (one timer / post). So let’s start with widgets:

Live Countdown Timer Widget

In your Wordpress Admin Panel, once logged in, on the left menu, you need to go under Appearance->Widgets:

Wordpress 2.8.6 Appearance and widgets admin menu

Inside the widgets page, under available widgets, you will see the name Live Countdown Timer. Drag and drop that into your sidebar…

drag and drop live countdown timer widget

Then it will show in it’s content just a title(so you can set the title of the widget) and a link to a dedicated page for all the Countdown Timer widget options: +Continue Reading

Wordpress 2.8.x Permalinks Tutorial

This is a quick easy tutorial on how to work with permalinks, how they work and what they are (in wordpress 2.8.x)

This is a step by step tutorial on how to configure your permalinks.

What you need to do first is login to your admin panel in wordpress.

1

To do this you need to go to your base url and write wp-admin at the right of it. Then hit enter (if you are a experienced wordpress user this might be offensively easy, but hey, so is the tutorial for what it is..).
+Continue Reading

How to upload files in wordpress – Source Code Version Only

If you ever need to build a custom plugin that creates a page with a form and that form has file inputs, you will have to upload those files properly. Here’s how you do it:

Wordpress has a function for this and it’s called wp_upload_bits (for more info about the function click here).

Here is a example on how to use it:

if($_FILES["inputFileName"]["name"]!=”") {
$file = file_get_contents($_FILES["inputFileName"]["tmp_name"]);
$xupload = wp_upload_bits($_FILES["inputFileName"]["name"], null, $file);
}

if($_FILES["inputFileName"]["name"]!=”") {
$file = file_get_contents($_FILES["inputFileName"]["tmp_name"]);
$xupload = wp_upload_bits($_FILES["inputFileName"]["name"], null, $file);//array with path, url and error
}

The if statement checks if a file has been selected for upload.. if none is selected in that field name, wp_upload_bits will not run. If a file is ready for upload, wp_upload_bits will upload the file in your uploads dir under wp-content and it will return a array that will be passed in this case to the $xupload variable. The array contains details about the uploaded file(path and url). Array also has a error parameter in case something goes wrong.

How to get a wordpress plugin directory path – the best, easiest, correct way

A lot of developers when building plugins are confronted with this problem and a big percentage of them approach this in a wrong way.

How NOT to do it:

#1 A lot of developers think it is ok to add the path using the bloginfo function:

<script src=”<?php bloginfo(‘wpurl’); ?>/wp-content/plugins/plugin-name/script.js” type=”text/javascript“></script>

First of all, adding scripts to a wordpress plugin is not done by adding the <script> tag in the header! If you are doing that, please stop! It will only make yet another request to the server and help make a blog load slower. Scripts need to be in 1.. so wordpress has something for this and it’s called wp_enqueue_script (for scripts) and wp_enqueue_style for styles. But that is not our issue here.

Why is the above code incorrect?

One other problem with the above path (besides the big obvious one we just talked about) is the path itself. Don’t ever use a path with wp-content in it. You never know if the wp-content is even named that or where it lays(might be one folder up). Same problem with plugin name… What if someone changes that name?

#2 Non-newbies choose a better way to do this ..

<script src=”<?php echo WP_PLUGIN_URL; ?>/plugin-name/script.js” type=”text/javascript“></script>

Well, this is ok, if nobody changes the plugin name at 1 point. If someone changes that name, GAME OVER.

So what can be done?

How to do it:

The answer is plugins_url function (that’s right.. there’s a plugins_url function in wordpress) and it will return the full path to a plugin (inside the plugin directory). It’s really easy to use and it’s not as long as the others… So this is the best, correct, easy way to doing the above examples:

<script src=”<?php echo plugins_url(’script.js’,__FILE__); ?>“ type=”text/javascript“></script>

Easy. no?

But again, read #1 on how not to do it… to include scripts and styles in a right way.

How to use Featureak Video Tutorial

<< go to Featureak page

HD Version (watch in HD):

Leave comments here….
Also tell us about anything you did not understand or what to find out more about.

How to use Live Countdown Timer Video Tutorial

Here is the tutorial for the version 2.0:

Don’t forget to leave feedback here or on youtube….

Live Countdown Timer Page