The good people of PHP Quebec have asked me to speak at CONFOO this year! I am very excited about this presentation, I have spoken at many conferences and it is always nice to do one you have not done before.

I will be doing a session on WordPress theming, description below…

WordPress is NOT just a blog anymore!

For the seasoned WordPress developer or anyone coding in PHP, CSS, and jQuery, we will look at how you can take your theme to the next level. I will explain how theme architecture works, how to extend this architecture with custom template files, and how to create custom functions. I will also walk through the some interested CSS frameworks, like 960grid, implementing intermediate to advanced jQuery features, and how to customize the back end. Finally I will briefly discuss how to take your theme mobile using WPTouch and WPMobile.

What’s CONFOO

PHP Québec, Montréal-Python, Montréal on Rails, W3Qc and OWASP Montréal are proud to announce the first edition of the Confoo.ca Conference. From March 10^th to 12^th 2010, international experts in Java, .Net, PHP, Python and Ruby will present solutions for developers and project managers the prestigious Hilton Bonaventure Hotel, located in downtown Montréal.

There’s only 15 days left to register!

Hope to see you all there!

–

Check out some of the slide from other events I have presented at.

As a designer/developer I dug into the core early on (ver 2.0), wanting to get a better understanding of how WordPress works and how I can customize the overall experience for my clients. I’ve designed custom login pages and dashboards for almost every WordPress project I’ve worked on since.

If you have even a basic understanding of CSS and are familiar with how the basics of PHP works in WordPress you can do more than you think quite easily.

How to get started
There are essentially 3 ways we can customize the dashboard.

1. plugins (don’t always meet every need)
2. core files (can change with every new version of WP)
3. functions.php (flexible and simple)

After reading quite a few posts over at wprecipes and wpbeginner, I recommend/prefer using the functions.php file, it’s cleaner, and more flexible when it comes to versioning.

First, let’s take a look at the basic architecture of the dashboard or for the sake of this discussion the admin area. Everything you need to get started is located in the wp-admin directory.

wp-admin (what we need)

• login.css
• dashboard.css
• wp-admin.css
• admin.php
• admin-header.php
• admin-footer.php
• menu.php

These files will allow you to make basic changes to the overall look and feel.

Login Page
Here are 2 great examples

source http://www.wpbeginner.com/showcase/best-of-best-wordpress-custom-login-page-designs/

source http://www.wpbeginner.com/showcase/best-of-best-wordpress-custom-login-page-designs/

Open login.css and you can modify the colours, images, and the form. There are also a handful of plugins available, here are 2 you should check out Custom Admin Branding and BM Custom Login . You should also read “Best of Best WordPress Custom Login Page Designs” by wpbeginner.

You can also add a few lines of code to your functions.php file and achieve the same outcome without having to install a plugin or a lot of coding.

Open up your functions.php file or create one if the theme you’re working on does not have one and add the following code to add a custom logo on the login page.

function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}

The above code modifies the default h1 class by changing the background image to a custom logo file stored in your themes images directory.

Admin Header
If you wanted to change the dashboard logo (top left corner) you could modify admin-header.php. You can also change the visit link and welcome message.

<img src="../wp-includes/images/blank.gif" alt="" width="32" height="32" /> <h1 id="site-heading" <?php echo $title_class ?>><a href="<?php echo trailingslashit( get_bloginfo('url') ); ?>" title="<?php _e('Visit Site') ?>"><span><?php echo $blog_name ?></span> <em id="site-visit-button"><?php _e('Visit Site') ?></em></a></h1>

To change the logo we need to edit line 104 (depending on your editor) or look for img id=”header-logo

All you need to do is change the img src to point to your logo file. One other thing I like to modify is the visit link. Why does it open in the same window? I’m not sure about you? but when I’m working I rather have it open in a new window, so I add target=”_blank” in the href tag.

One more thing you may want to change is the welcome message in the top right corner, “Howdy, webmaster”.

Go to line 108 or search for howdy

<p><?php printf(__('Howdy, <a href="%1$s" title="Edit your profile">%2$s</a>'), 'profile.php', $user_identity) ?>

Change Howdy to whatever you want, simple!

Now, here’s how to do it using functions.php:

add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
echo '<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/dash_logo.png) !important; }</style>';
}

Admin Footer
Open admin-footer.php and go to line 23 or search for admin_footer_text

echo apply_filters( 'admin_footer_text', '<span id="footer-thankyou">' . __('Thank you for creating with <a href="http://wordpress.org/">WordPress</a>.').'</span> | '.__('<a href="http://codex.wordpress.org/">Documentation</a>').' | '.__('<a href="http://wordpress.org/support/forum/4">Feedback</a>') ); ?></p>

Now add your own text, links, and images.

Now, here’s how to do it using functions.php:

function remove_footer_admin () {
echo "Your own text";
}
add_filter('admin_footer_text', 'remove_footer_admin');

Widgets
Creating custom widgets are very useful and a lot of fun. Let’s add a simple ads window that will be viewable to all users logged in. I’m only going to show you how to do this in functions.php, it’s a lot easier. However, if you are feeling adventuress you can do this in the core.

To modify the core open dashboard.php located in wp-admin/includes/. You will notice all the main dashboard widgets are at the top of the file ending around line 50 in my editor. You can also play around with the current widgets, for example you can change the default WordPress dev feeds to any feed you want. I usually load feeds from my other blogs or resource sites.

…ok, so let’s add a widget using functions.php.

Add the following code to you functions.php file:

add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');

function my_custom_dashboard_widgets() {

global $wp_meta_boxes;

wp_add_dashboard_widget('custom_ad_widget', 'Ads', 'custom_dashboard_ad');

}

function custom_dashboard_ad() {

echo '<p>Check out some other cool stuff</p><br /><img src="http://www.dropthedigibomb.com/dropit.jpg" />';

}

A few things to note: The second last line is where you define the name of the widget that displays in the dashboard ‘Ads’, so you can name this anything you want. The echo, this is where you can add any basic html to output text and images. If you have a more advanced knowledge of PHP, then you can go ahead and add CSS or jQuery, pretty much anything.

Now go and have fun!

Resources:

http://wpengineer.com

http://www.wprecipes.com

http://www.wpbeginner.com

http://buildinternet.com/2010/01/create-custom-option-panels-with-wordpress-2-9

Recently I had to revisit this piece of code for a project I am working on and thought I’d share since it’s pretty useful and simple.

We use the standard WP search form code to start

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<label for="s"><?php _e('Search for:'); ?></label>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>

We add this line of code

<input type="hidden" name="cat" value="1" />

This hidden field is what allows us to search a specific category.  This string will be added to the search parameter. For example; the normal search would be something like http://wwwdropthedigibomb.com/?s=(what ever keyword was used), with the hidden field we get http://wwwdropthedigibomb.com/?s=(what ever keyword was used)&cat=1.  The value attribute refers to the ID number of your category. This is the only thing  you will need to change.

Here is the final code

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<label for="s"><?php _e('Search for:'); ?></label>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
<input type="hidden" name="cat" value="1" />
</form>

Enjoy!

So, why am I written this post? At almost every workshop or class I teach on WordPress  my students always ask the same questions “what is jQuery, and how can I add it to WordPress?” The answer is simple, jQuery is and easy way to add another layer of interactivity and creativity without having to worry about a lot of obtrusive Java or the bulkiness/complications that come with integrating Flash.

I’m not saying that jQuery is perfect, there is code that can conflict with WordPress or other jQuery additions, and not all JQuery versions are cross platform, however it is for the most part the best solution. In terms of an alternative for Flash, it can be very useful. Flash is not bad, but it is not always the answer either. If you require/desire some simple interactivity such as: sliding portfolios, galleries, drag and drop, hide and reveal, rollovers, tool tips, basic fading elements, why bother spending all that development time in Flash and worry about players and plugins?

Here are 2 really good examples of jQuery as an alternative to Flash  http://www.wearebuild.com and http://www.x3studios.com

Ok, enough talk, let’s get started. What is jQuery for those of you who don’t already know?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. – JQuery.com

Loading  jQuery

There are a couple of ways to do this in WordPress.

The first and easiest way is to load the jQuery library that comes bundled with WordPress. To do this we use the wp_enqueue_script() function, which automatically enqueue’s the JavaScript file in your theme header. Open your header.php file and paste the following within the <head> and </head> tags:

<?php wp_enqueue_script("jquery"); ?>

*I have heard that this does not work all the time in WordPress 2.8.1

Quick tip: One thing worth taking note of is the conflict with prototype which may cause it to not work in IE. Be sure to call the noConflict() method.

$j = jQuery.noConflict();

And you can call any jQuery functions like this:

$j(this).fadeTo("normal", 0.5);

The second way to load jQuery is to call it remotely from Google, this way you can be assured you’re always using the most up-to-date version. Otherwise, the version included inside WordPress may be dated.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

The third and final way is to load jQuery from your server, so if you have downloaded a specific version you can enqueue it internally. To do this, open your header.php file and paste the following within the <head> and </head> tags:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/jquery.js"></script>

*I usually put all my scripts in an includes directory located in my theme directory. You could also use an absolute path if your file is located elsewhere.

Now the fun begins! Once you have loaded jQuery you can take advantage of hundreds of great libraries for adding more interactivity or complexity to your themes.

Here’s a list of some of my favorites

Lightbox

A  light Javascript used to display overlay images on the current page. The original Lightbox was released in 2005. Since then, there are many scripts released with similar features using different approaches and Javascript libraries.

FancyBox

FancyBox is a jQuery plugin that is designed to replace the overused Lightbox. It has similar features, but better transition effects (the design is Mac-like).

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

Code Slider

Coda Slider is a jQuery plugin that imitates the panel sliding effects as seen on the Coda website.

jQuery Tabs

jQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended).

jQuery Tool Tip Plugin

Another nice Tooltip plugin.

jQuery Accordion

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs.

jQuery Validate

A very plugin that allows you to build client-side validation and Ajax form.

More resources

• jQuery
• A list of jQuery plugins for WordPress
• More jQuery stuff
• net-tuts – Lot’s of great jQuery and WordPress tutorials

Enjoy!

This past Saturday, yes I know it was Valentine Day, but we spread the WordPress love, I ran yet another WordPress workshop at RMI ( Rich Media Institute ), it was great to see almost everyone from the theme design workshop show up, plus a few new faces.  This was the second in a series of workshops I’m running at  RMI this year.

Other workshops to look forward to , WordPress 2.7 – all the ins and outs, WordPress 2.7 Admin Skinning/Customization. i am also planning on running a FREE Workshop on WP2.7 Admin Theming at PHUG end of Feb or early March.

For this workshop, the goal was to convert a PHP script that loads random Flash SWF ( view here ) files into a functional WordPress plug-in. Sounds easy, and it was! You can download the original PHP script here and the WordPress plug-in here. The plug-in is fully functional, but still requires some option under the admin area. Play arounf with and let me know what you think.

Here’s the slide presentation from the workshop.

As promised here is a list of some plug-in development resources:
Simplified AJAX For WordPress Plugin Developers using Jquery
“Desenvolvendo Plugins para WordPress” by Rafael Dohms (in Brazilian Portuguese)
12 part “How to Write a WordPress Plugin” at DevLounge.net by Ronald Huereca (PDF)
How to create WordPress Plugin from a scratch
Using AJAX with your WordPress Plugin, also at DevLounce.net
How to Write a Simple WordPress Plugin at ATD

Posts from past workshops:
http://backspacestudios.com/blog/index.php/wordpress-25-workshop-at-rmi-recap/open-source/
http://backspacestudios.com/blog/index.php/vecta-lova-free-wordpress-theme/open-source/

This past Saturday I ran another WordPress workshop at RMI ( Rich Media Institute ), it was great to see so many familiar faces, you know who you are This is the first in a series of workshops I’m running a RMI this year.  This weekend, Saturday Feb 14th 1-530pm, is WordPress Plugin Development ( register now ).

Other workshops to look forward to , WordPress 2.7 – all the ins and outs,  WordPress 2.7 Admin Skinning/Customization.

During the theme design workshop, we converted a static HTML+CSS web template, from styleshout.com, to a functional WordPress theme. There is still a little work to do to get it all working, you can downlaod here and feel free to feedback or ask questions.

Here’s the slide presentation from the workshop.

As promised here is a list of some great FREE Premium Theme sites, enjoy.
http://themeshaper.com/
http://www.smashingmagazine.com/
http://www.wpsnap.com/
http://freethemelayouts.com/
http://www.styleshout.com
http://wpcandy.com/

…and for inspiration…
http://www.bestwebgallery.com
http://welovewp.com/

Posts from past workshops:
http://backspacestudios.com/blog/index.php/wordpress-25-workshop-at-rmi-recap/open-source/
http://backspacestudios.com/blog/index.php/vecta-lova-free-wordpress-theme/open-source/