Austin WordPress Meetup

Bringing together WordPress users of all levels

WordPress Themes

You break it, you buy it

WordPress Themes, Intermediate WordPress

Upcoming events

You break it, you buy it

presentation by Bobbie Wilson

Notes at http://www.bobbiejwilson.com/blog/wordpress/break-buy/

Child theme on WordPress Codex: http://codex.wordpress.org/Child_Themes

Creating a custom theme

When modifying a theme, best practice is to not modify the actual theme files but instead create a child theme. This way, when you update the theme, you won’t lose the changes.

You need:

  • WordPress installed
  • A free theme
  • Text editor
  • FTP program

Creating a Child Theme

Create a new folder for your theme anywhere you’ll remember.
Using a text editor, create a new file and name it style.css.
Inside the style.css file, you’ll add:

/*
Theme Name: Your Child Theme
Template: twentythirteen
*/

“Template” in the code above references the name of the directory of the parent theme

If you want to keep the styles of your parent theme:

@import url(“../twentythirteen/style.css”);

This imports the stylesheet of the parent theme; anything you modify will override the parent theme styles.

Create a folder with your css file on your computer and name it the name you want to use for your child theme. Compress that folder as a .zip folder. You can add it to your site by going to the Dashboard under Appearance > Themes > Add new theme and upload the .zip folder. Note that you must have the parent theme installed in your theme directory on the site or the child theme won’t work. Once the file is in the theme directory you should be able to activate the child theme.

You can also override the template files (e.g. page.php) of the parent theme by copying the files into the child theme folder and modifying them there.

Everything in the child theme folder overrides your parent theme.

Creating a child theme will not remove the additional theme-specific options that many themes build into the theme dashboard.

 

Tips:

  • Don’t change your CSS or php template files in your Editor because you can break your site, and there’s no undo. Instead, make changes to files offline and upload them via FTP, so you have the ability to revert if necessary.
  • If you get white screen of death, you can go into FTP and rename your wp-content/plugins folder to something else so the plugins don’t load.
  • You can go into wp-config.php and set WP_DEBUG to true to find errors (more about this in the WordPress Codex)
  • Create regular backups before making changes to your live site – do not rely on your hosting provider. That way if you break something you can revert to a backup.

Some ideas on backup plugins/services:

How to Choose and Install a WordPress Theme

WordPress Themes, Meetup Meeting Notes

MeetUp Notes for 09.16.13

There are thousands of free themes available on the WordPress Theme Directory and that doesn’t even include premium themes and the option of creating a custom theme. With all those options in mind, choosing between all of these themes can be bewildering.

At our September 16th WordPress Beginners meeetup we discussed how to make smart choices when picking out a theme for your WordPress site.

We also examined how your theme relates to your site’s structure, purpose, and audience, and how to find a theme that offers you the right amount of custom options and features to best suit your needs.

The full presentation plus additional documentation notes are posted at:
How To Choose and Install a WordPress Theme

The October 21st WordPress Beginner’s Meetup will be: Best Practices for Effective Content Creation

WordPress Theme Anatomy and Child Themes – Part I

WordPress Themes, Intermediate WordPress, Design

WordPress Theme Anatomy

Presenter: Corey Ellis

Notes from Corey’s presentation: http://urli.st/s8c

WordPress theme development in WordPress codex

Stepping into Templates

What is necessary for a WordPress theme:

  • At minimum a WordPress theme needs two files:
    • index.php – controls structure of site (what the site does)
    • style.css – the stylesheet for the site (how the site looks)
  • Most WordPress theme will have more files, but these two are mandatory for a WordPress theme to work.
  • Most themes will also include functions.php as well as wp_head(); and wp_footer(); hooks in a php file

header.php file

  • Anything inside the section < head > < /head > is just information that doesn’t display in a browser window but is necessary for things to work
  • In the section < body >< /body > is what the user will see
  • The < title > tag controls what is shown in the browser window
  • wp_head(); and wp_footer(); are hooks that tell the browser what to execute in the header or footer; often used by plugins
  • the tag < body class >  allows you to modify the body class in your CSS: see body class reference in the Codex

How to view stylesheet and other structural information of a website

  •  inspection tools that you can use to see/modify the code of a website
  •  does not actually commit changes but allow you to see how a change would look
  • Firebug for Firefox
  • Chrome Developer Tools 
  • will work on any website; great way to learn

Other PHP files

  • header.php and footer.php control the header and footer
  • everything else (category.php, single.php, sidebar.php etc.) control what’s in the middle
  • Themes will have one or more php files which will assemble a page with the header, footer, body, sidebar etc. depending on which page is requested – e.g. single.php is the page created to display a single blog post
  • Template hierarchy graphic (from WordPress Codex) determines which page WordPress will display in the browser

 

Building Child Themes

Presenter: Bobbie Wilson

Why use a child theme?

  • You can use child themes to practice your theme skills
  • If you want to modify an existing theme, you can make changes and when the parent theme is updated, your changes won’t get overwritten

How to build a child theme

  • WordPress Codex on child themes
  • All themes will be found in your WordPress install in the directory: wp-content/themes
  • You will create a new directory for your new theme. It will have its own folder at the same level in the directory as the parent theme. So you might have /themes/twentytwelve and /themes/twentytwelvechild as two separate folders both within the themes folder.
  • A child theme needs a style.css file. You can create it in any text editor and save it in a folder named for the child theme. So you can create a new child theme called Playground and save a style.css file in a folder called playground.
  • Inside your style.css you will need to insert certain code:
/*
Theme Name:     Twenty Twelve Child (or whatever you're calling it)
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentytwelve                             
Version:        0.1.0
*/
  • The template name has to be typed exactly the same way the parent theme folder is named in your themes directory
  • In your style.css you then need a line that includes the parent theme, to pull the parent theme styles into the child theme. Again, this will need to be typed exactly as the parent theme is named in the themes directory:
@import url("../twentytwelve/style.css");
  • The child theme will inherit everything in the parent theme unless there are styles in the child theme; all child theme styles will override the parent styles.
  • You can add php files to your child theme, including your own functions.php file. Just don’t duplicate functions in your child theme or your child theme will crash.

Slight digression: 

 

WordPress Show and Tell

WordPress Themes, Tips and Tools, Helpful plugins

Tonight we welcome a few of our regular WordPress Austin members who graciously agreed to show off their websites and tell us a little about them.

 

Debra Schmidt, Cousins Count

A blog Debra started 4 1/2 years ago. It runs using the Thesis theme. Her audience is a few hundred people in her family; Debra is one of 67 first cousins. One of her challenges was that she had to sell her mom on the site and ensure everyone’s privacy. She has to be careful of which photos get posted because her audience is “fussy.”

Every family member has a category – all cousins “count”.

Debra is the only blogger – she’s the family chronicler. She’s written about 1200 blog posts. Her goal is to keep her family connected and find each other. Although people are also on Facebook, this is a more centralized way to find things. She posts memorials, weddings, photos… and writes whatever she wants about them. Fortunately she’s only had to take down a few things! 🙂

She used to be on WordPress.com but switched to a self-hosted site so that she could have ads and a few other features that aren’t allowed  using the free WordPress hosted option.

 

Eric Weiss, Skeptics on the .Net

He found that there was a lot of skeptical information on the web but not any centralized source of information. He organizes information by media type, subject matter, location. He has several volunteers who help contribute to the site, from several countries. He links to blogs, podcasts and other media.

Built on Newsy by Themify. He really likes the toolbar they offer.

In category views, the Alphabetical List plugin allows the posts to show in alpha order rather than in chronological order. Display Scheduled Posts gives you a shortcode to display all scheduled posts with the date that they’re scheduled to be posted. If you put it on a private page, you can see all the posts outside of the dashboard posts view.

Twitter Tools is a good plugin to post to twitter; IFTTT allows you to redirect your RSS feed to twitter, among other things.

He uses VaultPress, a backup and security option run by Automattic for $15/month. If your site gets hacked, they will fix it for you. He uses W3 Total Cache to help speed up his site.

Runs a separate blog which is an internal conversation among his volunters running the P2 theme. It’s great if you’re working on a collaborative post.

Even with his excellent presentation, the audience remained skeptical…. (just kidding!)

 

Lori Luza Austin No Kidding! and Austin ‘Canes

Lori wrote up details about her sites at her personal blog on loriluza.com, including the plugins she likes.

AustinChildFree.org runs on the Twenty Eleven (WordPress default) theme; AustinCanes.com runs on Weaver 2.2.4.

She uses these themes because these are non-profit organizations, and she wanted the sites to be easy to maintain and easy to change their basic look and feel even by someone who may not be very technically-inclined.

She uses AdRotate to manage her little ads on the site; they change monthly and the plugin sends a notification letting her know the ad is about to expire (in case she needed to bill someone). She recommends Events Manager for her calendars. It’s easy for people to book an event. She has noted that she’s not happy with how it displays the calendar.

Mobile Theme Switcher allows people to see the full site on an iPad.

Lori suggested doing a Creative Commons search on Flickr for free photos for your blogs. For backgrounds, she suggests bgpatterns.com as a fun toy to play with.

 

 

We discussed events calendars. Pat suggested amr events list and calendars .

Looking for themes? Themefinder from wpcandy.com

We ended the evening talking about themes and development tools. We talked about Builder, a WordPress theme framework, as well as various theme frameworks and the idea of building a custom theme.

 

Free WordPress Theme Frameworks

WordPress Beginners, WordPress Themes

Hands-On WordPress meetup 8/9/11

What is a Theme Framework?

According to the WordPress Codex, a theme framework is:

a Theme designed to be a flexible foundation for quicker WordPress development, usually serving as a robust Parent Theme for Child Themes. Some Theme frameworks can also make theme development more accessible, removing the need for programming or design knowledge with options pages.

In some cases a framework may just have robust code “under the hood” making it easier for a theme developer or designer to implement changes, but without necessarily including additional features in the admin panel. Many of these are “blank” themes with very little (to no) CSS code. These can be very powerful foundations for theme design, but are not appropriate for beginners. For others, an entire site can be designed using nothing but the options in the admin area

 

Free frameworks to help non-designers build a site:

Use the simple “check-box” interface to easily change colors, fonts, header and footer, menus, sidebars, theme width, and much more. Then, take control of your content using powerful Per Page and Per Post options, including unlimited custom widget areas. Over 15 page templates, including “Page with Posts” to show posts and content where and how you want. Easy for the newcomer, comprehensive for the expert.

Configure your custom theme: Fixed or flexible width layout, with min/max width, 0 – 4 sidebars, very browser safe (incl. IE6), create custom widget areas, import/export styles (several styles included), color pickers, over 200 options.

 

Blank frameworks:

A rich blogger friendly theme with customizable header, colors and AJAX options; and developer friendly theme with atomic templates and an elegant override hierarchy.

The ultimate in SEO-ready themes, Thematic is a highly extensible, WordPress Theme Framework featuring 13 widget-ready areas, drop-down menus, grid-based layout samples, plugin integration, shortcodes for your footer, & a whole lot more. Perfect for any blog and the starting point for theme development.

Child themes built on Thematic

Starkers is a bare-bones WordPress theme created to act as a starting point for the theme designer.

Free of all style, presentational elements, and non-semantic markup, Starkers is the perfect ‘blank slate’ for your projects, as it’s a stripped-back version of the ‘Twenty Ten’ theme that ships with WordPress.

The Whiteboard framework for Wordpress is built to speed up the process of designing and developing a Wordpress theme. Whiteboard does so by eliminating the time spent on a website’s generic div structure and Wordpress’ back-end PHP that is common to all Wordpress themes. Whiteboard also includes non-intrusive code designed to improve the overal Wordpress theme in many ways, including SEO, speed, usability, and mobility.

 

A few premium WordPress frameworks:

 

Also of note:

Aaron Brazell’s “Battle of the Titans: Premium Theme Framework Smackdown” (from 2010; some info is likely outdated now).

 

If you have questions about any of this information, feel free to email me or submit your question to the WordPress Austin Google group.

How to choose a WordPress Theme

WordPress Beginners, WordPress Themes

What is a theme?

Depending on how you use it, WordPress is a blogging platform/content management system/website building software – in essence, it’s the behind the scenes code that makes a website work. Your WordPress site itself consists of content, the posts/pages/images that convey information, and a theme, which is the overall design that you choose to determine how your site will look to the outside world. You do not (usually) change the underlying WordPress code (or need to reinstall WP) in order to change the site’s theme, though on occasion you may need to modify your content.

Choosing a theme

Do’s:

  • Define the purpose, structure and audience for your website.
  • Consider your branding (logo, design, etc. of your print materials, signage as well as message)
  • Who is the primary audience? What characteristics define them?
  • What is your site’s purpose? Blog? News? Gallery/portfolio? Sales?
  • What features do you need on the site? Social media? Shopping cart? Forms?
  • Determine the basic structure for your site: wireframing


Don’ts:

  • Choose a theme solely based on color, fonts, or graphics.
  • Obsess about it being ‘perfect’ (to the point where you don’t have a functioning website!)
  • Give up.

Other questions to consider:

  • What kind of media and what is most important/prominent? Text/Photos/Audio/Video
  • What kind of navigational structure do you need? How do you want your menu bar to work (e.g. drop downs)? Do you need a special way to display categories/tags, comments, or multiple authors? Do you want a sidebar – or multiple sidebars? Widgeted footers or headers?
  • How important is a custom(ized) design?
  • What is your own skill level for adding your own features/modifying a theme’s design? Are you willing to pay a developer/consultant to work with you or do you need to be self-sufficient? Are you willing to read documentation or contact support (if provided)?
  • How much are you willing to pay for a theme? Do you need/want support from the theme developer?

When you find a theme you (think) you like:

  • Does it offer the customization you need? Can you change layout, font and/or colors from the admin panel? Can you move the sidebar or increase/decrease number of sidebars/columns, or upload your own header graphic? With CSS and PHP skills, all of these things can usually be modified, but if you don’t have those skills (or don’t want to pay someone) then it’s good to have the options at your fingertips.
  • Is it GPL? (See http://wordpress.org/about/license/ )
  • Can you remove/alter the theme designer’s info/logo in the footer?
  • Can you figure out how to use any special features like a slideshow option?
  • Can you alter other elements or add your own as needed?
  • Is there a forum or other online support? Is the theme developer available to answer questions through their own website (some do it via comments) or via email?
  • Upload and activate your new theme with your own content. Does anything immediately break (often the navigation bar is the first to go) and if so, can you work around it?

Resources from WordPress.org:

Sites/products discussed at the meetup:
(note: inclusion here does not imply that WP Austin recommends any of the following; they are listed here solely as reference).

Choosing a theme worksheet (PDF file)