Updated Method to Create WordPress Child Themes

Twenty Ten Child Theme Mods

Once upon a time all that a WordPress Child Theme needed was to use an @import rule to bring in all the styles from the parent theme stylesheet. Evidently, that method still works as I’ve been using a couple of “old” child themes on live sites, until now.

Even so, it would be better to use updated and preferred methods for creating WP child themes. When The Codex says something is no longer best practice, we should pay attention.

Using @import to bring in other files costs us time. Nobody appreciates a slow site so any way that we can speed things up for our visitors is a good thing.

The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.

A child theme requires one file, style.css, declarations in which will override those of the parent theme, but now we need a second file, called functions.php, to enqueue the new stylesheet. Continue reading Updated Method to Create WordPress Child Themes

CSS Resources and Tools

Here’s a small collection of resources and tools for learning CSS, Cascading Style Sheets. It’s through links like the following that our collective CSS skills are improved. Read more, learn more.

Links for CSS

To get an idea of what CSS can do for your site visit the CSS Zen Garden, a site for inspiration in designing with CSS. Studying the style sheets for the different themes presented here can teach you a lot about style and positioning.

Introduction to CSS by Dave Raggett at W3C. Even though it’s a bit dated this is a good place to start to see how CSS works. Get the basics about linking to a separate style sheet and setting link colors.

CSS Reference and Tutorial from the Mozilla Developer Network could be a one-stop shop for learning CSS. Pick the getting started tutorial if you’re not very familiar with using style sheets. If you already know the basics, you might want to bookmark the exhaustive CSS reference. It has browser support tabulated for all the CSS 3 properties.

SitePoint CSS Reference uses categories to organize pages into CSS-properties, CSS-selectors, at-rules, styling concepts and layout examples. Play around in the “live” area (you get there by selecting the “Play” tab) where you can post CSS rules or HTML markup in the left pane of the window and see the immediate effects in the right pane.

Interested when a particular feature showed up in the history of CSS? Check the CSS Properties Index for an alphabetical list of properties. Properties are tabulated for CSS1, CSS2, CSS2.1, and CSS3. Clicking on any property name will bring you a definition of that property along with its acceptable values, which elements it can be applied to, and whether it can be inherited.

Font stacks might be of interest in studying site designs and learning the underlying CSS. Each font stack is like a mini-library. Learn how to create your own font stack through examples of Eight Different Font Stacks. Extend the idea to include basic page design via 960 Grid, a CSS library.

Great tutorials on specific CSS topics include:

Once you start writing your own CSS you’ll want to know if everyone can see your site the way you intend it to be seen. Validating CSS will assure that your style sheet is valid and therefore understood by browsers that people use to see your site. Check your CSS style sheets with the W3C CSS Validator. Tip: change profile to CSS3 and change vendor extensions to warnings, until CSS3 properties are more widely in use.

Keep reading, people. It’ll make you better at what you do.

Pause and Play Buttons for jQuery Slideshow

Continuing our slideshow journey with jQuery Cycle plugin, we’d like to improve our slider by adding two more buttons. Last time we looked at creating a slideshow with previous and next buttons, but now we’d like to add buttons for pause and resume. It would be nice to allow site visitors to stop a slideshow with a pause button and resume the slideshow with a play button whenever they’re ready to continue.

If we keep the overall design the same, we just need to do two things to modify the slider. First, we need to upload the images for the pause and resume buttons and add a couple of lines to the HTML markup for positioning the buttons. We’ll fit the pause and play buttons in between the previous and next buttons. Each button will use an anchor tag, an id for CSS and script targeting, and a title for a user-friendly tooltip.

HTML Markup for Slideshow Controls:

[plain]

[/plain]

Second, we need to add a couple of lines to the script to manage the action when someone clicks either button. Here, we’re assigning Cycle’s pause or resume option to the click function of the selected id, in this case #slide_aft. Adding a ‘return false’ line assures that the site visitor won’t be taken to another page when the buttons are clicked.

jQuery script portion for pause and resume buttons:

[crayon]

$(‘#pauseButton’).click(function() {
$(‘#slide_aft’).cycle(‘pause’);
return false;
});
$(‘#resumeButton’).click(function() {
$(‘#slide_aft’).cycle(‘resume’);
return false;
});

[/crayon]

The above script portion was placed in the document.ready function($) so that the buttons are able to be used as soon as practical.

Here’s the full slideshow example with button controls for pause, resume or play, previous slide, and next slide.

one
two
three
four

Now, that looks a little better. This slideshow looks more complete having the pause and play or resume buttons, as well as the prev and next buttons.

Putting Readable Code in a WordPress Post

Writing about PHP or HTML code in WordPress posts or pages often requires that some actual code is shown on the screen for explanation. If special steps aren’t taken to illustrate the code as text, the result is often not what was intended to be seen because the WordPress engine will interpret the code as actual code, not text about code.

If all you want to do is highlight some text that includes code-related words like filenames, function names or plugin names, use <code></code> around those phrases in your text. Using <code></code> turns text into a monospaced font so that it appears differently in your posts than “normal” text. However, using <code></code> around an HTML tag doesn’t do anything except change the presentation of the tag, so the opening and closing angle brackets are interpreted to enclose an actual HTML tag. The result will be a mess and definitely not what you were hoping to see.

To make WordPress show code in a post without interpreting it, you have to do ONE of three things:

  1. Use special character codes to replace angle brackets of tags.
  2. Use the HTML tag <pre></pre> around the code.
  3. Use a plugin to highlight the code syntax.

1. Special Character Codes

Angle brackets, < or >, are what WordPress uses to identify code, whether it’s HTML, inline styles of CSS, or PHP. Content inside angle brackets is interpreted as code by virtue of placement inside the brackets. Instead of interpreting this code we want WordPress to show the code to the site visitors and we can use special character codes to do that.

Character codes are special sequences of letters or digits that are used to represent textual characters. Every character that we see on the screen, including uppercase letters, lowercase letters, numbers, and symbols like <, >, #, $, %, ^, & or *, can be represented by character codes, sometimes called character entities.

Using character codes in posts looks a little strange in the editing panel, but when a browser comes across these codes they are interpreted and their textual equivalent is shown on the screen.

ASCII (American Standard Code for Information Interchange) character codes were developed to represent text in electronic devices and they follow a specific format. The format is that each character entity starts with an ampersand and ends with a semi-colon. The codes are a couple to a few letters or numbers. Numbered character codes always have a hash symbol right after the opening ampersand. Some entities can be represented by either numbered or named codes.

Examples of special character codes:

Character name Character symbol Character ASCII Code
left angle bracket < &lt;
right angle bracket > &gt;
ampersand & &amp;
dollar sign $ &#36;
long dash &mdash;
short dash &ndash;
double quotes " &quot;
at sign @ &#64;

If you need to find a code for language sets other than English, try the unicode site for all the code charts you’ll ever need. There, you can find numeric codes for fun game pieces, like chess, mahjong or checkers, horoscope symbols, smiley faces, weather symbols, music notes, and much more.

Take caution: Just because you can enter a special code to represent a symbol, that doesn’t mean your computer will let you see it. Many operating systems will not have the proper fonts installed to make use of all of these codes, especially if they represent symbols that aren’t on your keyboard. Stick to the ASCII codes as many of the unicodes won’t be seen by your site visitors.

2. HTML tag: <pre>

Perhaps you’d like to show a block of HTML code on your post and have it shown as text. To make sure that your block of code is not interpreted as actual code, wrap it with <pre></pre> tags. The <pre> tag will change the appearance of the code into a monospace font, just like <code> does, but the difference is that <pre> also illustrates the code exactly as it was typed. All text, characters, spaces and line feeds will be reproduced exactly how they were entered. No code will be run when it’s protected inside the opening <pre> and closing </pre> tags.

3. Syntax Highlighter Plugins

A final way to illustrate code in a WordPress post or page is to use a plugin to highlight the code. Several plugins are available for syntax highlighting purposes.

One that I have been using lately is called Crayon Syntax Highlighter. It’s a great plugin that will colorize or highlight code that you wrap with shortcodes. There are lots of options if you want fine control over the color scheme. Themes come with the plugin so you have several choices for making your code look good.

There are two modes where you can highlight code differently using shortcodes, [crayon][/crayon] and [plain][/plain]. Use [plain] shortcodes when the colorized crayon is overkill or when you just want to show a small section of code. Crayon Syntax Highlighter supports a wide range of languages, including HTML, CSS, PHP and JavaScript, for starters.

The colorful [crayon] shortcode is controlled by options where you can pick the colors that you want for representing different sections or purposes in your code. Inline crayons are supported so you could put a line of code within a line of text and the code would be colorized.

Some other popular code-highlighting plugins include SyntaxHighlighter Evolved, WP-Syntax, and CodeColorer. I don’t have any personal experience with these plugins, but they are listed high in popularity at the WordPress Plugin Directory.

Need to Execute Code in a Post?

If what you’re really after is to put executable code in a post or WordPress Page, check out this post on executing PHP in WordPress blogs.