Theme Development – WordPress Codex [http://codex.wordpress.org/Theme_Development]

You will become familiar with the basis and structure of a theme

http://www.w3schools.com/

Great source of documentation for HTML, CSS, jQuery and more

PHP Documentation [http://us3.php.net/docs.php]

The source of knowledge if you are still not very savvy with PHP

WordPress Documentation [http://codex.wordpress.org/]

Similar to the PHP Documentation, this source will answer all your questions related with the APIs that fire up WordPress

/wp-content/themes/twentyeleven (and twentyten)

There is no better documentation than the code, in this case such source of information is the theme than ships together with WordPress and allows you to navigate and find out how concepts and APIs work in a very good sample put together

So hopefully with this compilation of information you will feel more confident to start working on your own WordPress theme and you will be able to let our creativity drive you towards a great user experience for your users.

The easiest way to accomplish this is by adding the link and script tags directly on the admin page, however such tags are meant to be inserted in the Head section of the web page not inside the Body section, in order to fix it is required to use the following APIs:

wp_register_style    | wp_register_script
wp_enqueue_style     | wp_enqueue_script

They need to be used before registering the menu page, this is, you will likely register the admin menu page as follows:

add_action('admin_menu', 'qt_admin_panel_register');

/**
 * Register Admin Panel.
 *
 * @access public
 */
function qt_admin_panel_register() {
    add_menu_page(__("QT Theme Admin Options"), __("QT Options"), "manage_options",
        "qt_admin", "qt_admin_page", qt_admin_icon());
}

Then you will register and enqueue the needed style sheet and scrip files as follows:

add_action('admin_menu', 'qt_admin_panel_register');

/**
 * Register Admin Panel.
 *
 * @access public
 */
function qt_admin_panel_register() {
    // register the style for the admin page
    wp_register_style('admin', get_path_from_stylesheet_dir('admin/style.css'));
    wp_enqueue_style('admin'); 

    //register jquery script 
    wp_register_script('jquery2', get_path_from_stylesheet_dir('js/jquery.js'));
    wp_enqueue_script('jquery2'); 

    // add the admin page
    add_menu_page(__("QT Theme Admin Options"), __("QT Options"), "manage_options",
        "qt_admin", "qt_admin_page", qt_admin_icon());
}

Notice that you don’t need to unregister jQuery before registering the version of the script you want to use.

Have a good day

Let’s try it out in the WordPress dashboard page, to do so we will bring up the tools pane by selecting Settings -> Tools -> Developer Tools or by using the hotkeys <Shift>+<Ctrl>+I. Then we will choose the Audits view, in that view we will make sure we choose “Reload Page and Audit on Load”:

Chrome (Developer Tools) Audit Options

Once you click “Run” and the page finishes loading, you will get a detailed report of the issues found as shown in the next image, note that some of the resolutions of the issues are not in your control, but you will usually find good information and actionable items you can use to improve your web page.

Chrome (Developer Tools) Audit Results

I hope this will help you having a better optimized web page.
Cheers

If you do most of your web development work with Firefox, Firebug has to be one of those extensions you cannot miss, it is like the Swiss knife for this browser; I could describe all their features here but you’d better check it out in their web site:

http://getfirebug.com/

And here is a screenshot of it working on WordPress admin page:

Firebug on Firefox

Chrome

In the other hand if you use Chrome as your main browser, you don’t need to worry that firebug does not support your favorite browser; Chrome comes with the same set of tools (a handful more features to be honest) out of the box, the good thing about it is that you don’t need to wait for an update when a new version of Firefox breaks the plugin.

Here is a screenshot of it doing its work:

Chrome developer tools

Internet Explorer

Internet Explorer 8 also comes with a set of developer tools but in a less integrated environment (as you can see in the following screenshot):

Internet Explorer developer tools

Anyway if you are used to this browser at least you have some tools to get your work done.

Firebug Lite

Firebug lite is an option that works with all major web browsers, you can check it out in:

http://getfirebug.com/firebuglite

Let’s try a simple example to get you started and to show you what you can get out of it, we will use the WordPress options page from our theme we use for this site, we will also use Firebug by now and we will show you at the end the same results with Chrome and its integrated development tools (the flow is really the same); the page we are interested in looks like this:

QuickWeb Tutorials options page for WordPress theme

Then we will inspect the panel area bellow the tabs, that are the HTML divisions we want to select (in our case to make visible only the one that the user selects with images we placed as tabs), we can now identify the container class name as you can see in the following image:

Container 'qt-panel' selected with Firebug

Once we have that we can now move to the Console view in Firebug and type the query to select the container ‘qt-panel’ (if you are new to JQuery do note that you need to enclose your query in quotes to get it to work, it is a string that represents the query to perform not a selection that works with JavaScript objects), as you can see in the next image, we will try first to select it just by its class name without results

$(‘qt-panel’)

After that we will attempt to select the division with that class name, our query will look then like:

$(‘div.qt-panel’)

 And if you mouse over the results of the query you can actually see the region of the page that the result is selecting:

Queries to select 'qt-panel' with FireQuery

Finally we will select the divisions we are interested in using the query

$(‘div.qt-panel > div’)

You can see in the next image the three elements that are selected by the query and you can even bring up the definitions of the hidden divisions on the HTML or DOM view

Inspecting selected elements with Firebug and FireQuery

In Chrome you will see something very similar but with a richer view of the elements selected by your query

Inspecting selected elements with Chrome developer tools

I hope this will get you started on using these development tools to work with JQuery and create rich experiences in your sites.

To enable the option you need to edit wp-config.php located in the root WordPress installation directory, you will find something like this:

/**
 * For developers: WordPress debugging mode.
 *
 * Change this to true to enable the display of notices during development.
 * It is strongly recommended that plugin and theme developers use WP_DEBUG
 * in their development environments.
 */
define('WP_DEBUG', false);

You only need to change the value to true, save the file and reload the web page in your browser, you will find that now you can see something like this:

Wordpress debugging mode

Or like this:

Wordpress debugging mode

Now you will have the first clue on how to fix your site, usually most of the issues are related to not checking for variables to be set, but it can save you a lot of time while you are developing a theme and something got really wrong and your page is just all blank, believe me.

• Apache server is running and loading “plain” html files,
• Simple PHP files are loaded correctly
• You can access your MyQL database from the command line
• Your firewall is not interfering with you

But when you try to connect to the local MySQL server using PHP with some code similar to:

$link = mysql_connect('localhost', root_user', 'user_pwd')
 or die('Could not connect: ' . mysql_error());
 echo 'Connected successfully';

Your request just times out with the following error:

Could not connect: A connection attempt failed because the connected party did not
properly respond after a period of time, or established connection failed because
connected host has failed to respond.

You might want to make sure that your hosts file (yeah Windows has one of those too) has the localhost name resolution entry un-commented, the file is usually located into %windir%\system32\drivers\etc\hosts (the path might vary if you have earlier versions of Windows than WinXP).

Open the file for edit and make sure it contains something similar to:

# localhost name resolution is handled within DNS itself.
     127.0.0.1       localhost

Note how the entry for the localhost is not commented. Once you un-comment that line and saved the file, try again loading your page, it should work just fine this time!

You will find the same issue if you are trying to connect to the server by using the localhost IP address 127.0.0.1, in that case you also need to fix your hosts file.

You spent quite some time trying to install PHP with Apache HTTP Server on Windows, after you finished configuring PHP you are ready to restart your Apache service and start typing some PHP code in your web pages; but what you find out is that you are facing the following error:

The requested operation has failed! (Apache + PHP)

Then keep reading (we might be able to help you):

The first thing to do is to make sure there’s no firewall blocking the Apache service and your configuration file httpd.conf is correct containing lines similar to this:

#BEGIN PHP INSTALLER EDITS - REMOVE ONLY ON UNINSTALL
LoadModule php5_module "C:/PHP/php5apache2_2.dll"
AddHandler application/x-httpd-php .php

# configure the path to php.ini
PHPIniDir "C:/PHP"
#END PHP INSTALLER EDITS - REMOVE ONLY ON UNINSTALL

Next we’ll look at the Apache server logs (located in <apache install dir>\logs), we are particularly interested in error.log, however in this case the log does not say much (the bottom of the log looks like the following):

[Sun Aug 08 11:38:20 2010] [error] [client 127.0.0.1] File does not exist:
 C:/Apache2.2/htdocs/favicon.ico
[Sun Aug 08 11:38:20 2010] [error] [client 127.0.0.1] File does not exist:
 C:/Apache2.2/htdocs/Program Files (x86)
[Sun Aug 08 11:38:20 2010] [error] [client 127.0.0.1] File does not exist:
 C:/Apache2.2/htdocs/favicon.ico

Not much of a help right?, next step to try out is try to start the service from the command line and dial up the verbosity of the logging, to do so we will use the following command from the bin path of the Apache installation:

# <apache install dir>\bin\httpd.exe -e debug

You can look at the Apache documentation to get a better description of the command arguments you can pass, but what we are interested is if we can get some error that pops up, something like:

httpd.exe - The program can't start because OCI.dll is missing from your computer

Now we are getting somewhere, you can search a bit on what the missing dll is or which application deploys it, in this case OCI.dll is a Oracle client side dll which seems that maybe one of the PHP modules requires it (perhaps a module related with Oracle DB interaction). If we open up the <php install dir>\php.ini file to look at the modules we are trying to load during start up we might have some more clues (we will run a command to find all the appearences in the file matching the name of our dll):

# findstr /pisc:oci "C:\PHP\php.ini"
C:\PHP\php.ini:[OCI8]
.....
C:\PHP\php.ini:[PHP_OCI8]
C:\PHP\php.ini:extension=php_oci8.dll
C:\PHP\php.ini:[PHP_OCI8_11G]
C:\PHP\php.ini:extension=php_oci8_11g.dll
C:\PHP\php.ini:[PHP_PDO_OCI]
C:\PHP\php.ini:extension=php_pdo_oci.dll

If you take a look at the lines in red we have several extensions that might need that file to load correctly, you have two options at this point:

1. make sure you installed the application deploying the missing file correctly
2. removing the module for being loaded into our Apache server

In this example (and we don’t care about that module anyway because we are using MySQL) we will just comment out the lines in the php.ini file that load those modules. After doing that we will be able to start up the Apache server properly by using the Apache Service monitor or by typing the command:

# httpd -k start

Now you are ready to go to start writing some PHP code.

Enough Already of Junk Food – Jungle Juice

The Worlds Quietest Lawnmower – Gardena

See How Easy Feeding The Hungry Can be? – Feed SA

Fetus – Alfa Romeo

The moment lasts a second. The legend lasts forever.
Write the future – Nike

Eraser USB Stick – Alzheimer’s New Zealand:

Brain Teaser – Nintendo

Balloon – Tiji TV

Dare. Change.

We will take as a base our LAMP (Linux-Apache-MySQL-PHP) stack that we just finished installing (see post).

The first step is to download the latest sources of WordPress from http://wordpress.org/download/

Then you need to extract the contents of the compressed file into your web server’s document root directory, you can use a set of commands similar to:

# cd <DocumentRoot path>

# tar -xvzf <path to downloaded file>/wordpress-3.0.tar.gz

That will leave you with a wordpress directory containing all the files. It will also mean that your blog’s root location will be: http://localhost/wordpress. if you want it to be in the root you just need to make sure the files get extracted into the DocumentRoot path

The next step is to create the database, we will use phpMyAdmin (see installation instructions) for that purpose, we will perform the following actions:

• Create a database named “wordpress” for example

Create WordPress database with phpMyAdmin

• Once the database is created, you can go to the Privileges tab inside the database page (you can see if you have a database selected if you see something like localhost -> wordpress at the top of phpMyAdmin web page) and click in “Add a new User“, make sure you ‘Grant all privileges on database “wordpress”‘ and you check all the ‘Global privileges‘:

Create WordPress database User

(In my case I’ve chosen to connect only from localhost as I will be using the installation for local development)

• Next step we need add the database information to the WordPress configuration file, to do so we will rename the file wp-config-sample.php under <DocumentRoot path>/wordpress

# mv wp-config-sample.php wp-config.php

Then we will open the file for edit and change the following database information: DB_NAME, DB_USER, DB_PASSWORD, DB_HOST, DB_CHARSET, DB_COLLATE:

Database information WordPress configuration file

You can find out the charset and collate values by runing the following query inside phpMyAdmin :

mysql> SHOW CREATE DATABASE wordpress

NOTE: You might want to leave the charset to the default UTF8 which is a good option for almost any language

NOTE: you might want to leave the collate value to empty (”) if you want MySQL to detect this value for you

• For the next step we will run the install script which will be located in: http://localhost/wordpress/wp-admin/install.php

WordPress installation script web page

And… that’s it, once the installation script is done you will be presented with a web page that displays your generated password, now you can log in into your local WordPress by going to http://localhost/wordpress/wp-admin

Have fun!