I recently presented “Customizing WordPress Themes” at the local San Diego Word Press user group run by Glenn Bradley.
The talk was on how to include jQuery into your own WordPress themes. The slideshare presentation probably makes great reference notes for those in attendance but not so much for those who are viewing it as a standalone document.
Here are my notes to go along with the slides…
Customizing word press themes for San Diego WordPress user group
Slide 1: Really simple, WordPress is awesome for blogs, basic sites, and brochure type sites. They are able to be themed and implemented relatively quickly. I like them much more than static HTML sites. No more wondering which version of content is the latest.
Slide 2: We’ve all spent way too much time looking through free themes on WordPress. There never exactly what you need or they cost too much. Template Monster is nice but frankly, when I’m working on my own theme I don’t want to spend a dime so I just wrangles WP’s twenty ten theme into my own custom themes as needed.
Slide 3: Most people using WordPress should know, changing the theme within WordPress admin is under Appearance > Themes section. In hosting the WordPress theme is under domain.com/wp-content/themes/name of them folder. Simply upload the theme into the directory and choose it within the admin themes section.
Slide 4: One really cool thing about WordPress themes is you can create multiple page templates and select which theme you want to use within your WordPress page.
Slide 5: A few examples of WordPress themes using jQuery image sliders were used in this presentation. Three of the four sites are live at the time of this blog post. Pro Restaurant Design is a recent site I launched targeting owners of restaurants. This WordPress theme is uses the Anything Slider. San Diego Sport and Spine uses Auto Image Rotator and Mindful Design uses Avia Slider.
Slide 6: There are a ton of sliders out there, including WordPress plugins using jQuery, MooTools, and Script.aculo.us. Finding one that fits you or your client’s needs isn’t easy as it seems. Searching for terms like jQuery Image Slider usually yields decent results.
Slide 7: If you’re not sure on how to implement JavaScript on a site, Kevin Miller put together a great how to example on his new site P51 Labs. Make sure the scripts you’re trying to implement work on static HTML sites before adding them to the WP themes. This will help alleviate you the pain whether it works at all or in the WordPress theme itself.
Slide 8: When customizing your own theme, start from the basics. Make sure you know where your blocks of content go before you start CSS’ing and DIV’ing them out. Wireframe your site layout first.
Slide 9: As you fill in details, keep in mind where your JavaScript files are going to reside. Typically within the header.php file but not always.
Slide 10: There are several files you need to consider when themeing WordPress templates. They are index.php, page.php, and single.php are the main ones, then archive, search etc. are also needed to be themed. Get your main pages in order first then you can update the others later.
Slide 11: The standard index.php file from the Twenty Ten theme uses the get_header () ;Â call.
Slide 12: Change get_header () ; to get_header (home) ; and it will call the header-home.php file instead. In this file (header-home.php) you can modify the contents within the <head> area and add your specific .js files accordingly.
Slide 13: On any other page templates, all you’ll need to do is grab the dynamic content and wrap the CSS around it.
Slide 14: Customizing Widgets is easy. Just add this first set of code wherever you want the widget to show up on your site. Open up the functions.php file. Copy and paste the existing widget code, rename every instance of primary-widget-area and respective text to something you’ll recognize later and you should have a function custom named widget in your admin > appearance > widgets section as well as you page template.
Slide 15: Going back to the header file(s), simply add the code from your jQuery script. Best way is to grab it from the demo, strip out all unnecessary code and make sure it works on a static file, then migrate it over to your WordPress theme. Makes sure to comment code out everything as best as possible.
Slide 16: Using one of the HiFi, Page.ly Multi-edit, or More Fields plugins are a great way to get content on a page. Specifically HiFi will allow for scripts, CSS and other code to be injected into the header or footer files. Multi-edit and More Fields almost act like widgets. You can add content through the page admin area. You’ll have to find the correct snippet of code into the template though otherwise they won’t work at all. HeadCleaner helps clean up some of the code in case something breaks. Sometimes it works, sometimes not.
Slide 17: Use Firebug! What else can I say. Learn it, use it, love it.
Slide 18: As a digital content provider, I frown when my content gets plagiarized or stolen so I don’t like using this code. However when a client really really needs something to be cleaned up, CSS display none can work wonders: footerdiv {display:none;}
Slide 19: Conclusion…know CSS otherwise custom themeing won’t be fun. Test all pages like the search page, archives page and 404 pages and make sure to cross browser check your CSS including making sure you’re w3 compliant.
