Collapsing Margins

Even if you are an experienced developer, it’s sometimes necessary to review the basics. Like for example reviewing how collapsing margins work in detail.

This is something that I was aware of and worked around when writing CSS. But reading in detail why this occurs and in what circumstances made this a lot clearer.

I highly recommended this article for everybody that writes CSS.

How RTL styles are loaded

When reviewing themes, I sometimes see developers writing custom implementations for loading styles for RTL languages.

In most cases, this is not needed, as WordPress handles loading the rtl.css file automatically when it exists in the theme folder.

In fact when you have RTL mode enabled (you can use the RTL Tester plugin to switch it on or off easily), you’ll see that WordPress adds the following line of code to the <head> element.

<link rel="stylesheet" href="http://fklein.info/wp-content/themes/bosco/rtl.css" type="text/css" media="screen" />

How does this line get there? That answer that question, we need to look at the code of WordPress Core.

Continue reading “How RTL styles are loaded”

Why You Should Prefix CSS Classes in Plugins

plugin-css-code

The visual presentation of a page generated by WordPress is influenced by a variety of CSS stylesheets. WordPress itself, plugins as well as themes enqueue different stylesheets or inject CSS into the <head> element.

Developers that want to achieve a certain visual result need to account for these different styles.

That’s why it’s recommended to prefix CSS classes and IDs used by plugins. As themes (and WordPress itself) don’t prefix any CSS used on the front end, using prefixes for plugin CSS will ensure that these style declarations get applied without breaking any other styles.

There are many plugins that don’t follow this best practice, so let’s look at what may happen if you don’t.

Continue reading “Why You Should Prefix CSS Classes in Plugins”

Interview: Mike McAlister

I enjoy reading and listening to other theme developers talk about their work. Over the weekend, I listened to an interview with Mike McAlister by Devin Price.

Mike runs his own theme shop, Array.is, and also sells themes on WordPress.com. His themes are well designed and coded, and he’s a pleasure to work with.

If you are interested in knowing more about how Mike runs his company and designs his themes, this interview is for you.

How To Add A Read More Link To Excerpts

By default, the the_excerpt() function adds […] at the end of the excerpt when the post contains more words then the excerpt limit (55 words).

The […] is not clickable, so users don’t have a link below the excerpt to view the full post. So sometimes theme authors simply add a hardcoded link below the excerpt.

The better solution is to use excerpt_more filter:

function fklux_excerpt_more( $more ) {
    return sprintf( '<a href="%1$s" class="more-link">%2$s</a>',
                   esc_url( get_permalink( get_the_ID() ) ),
                   sprintf( __( 'Continue reading %s', 'fklux-text-domain' ), '<span class="screen-reader-text">' . get_the_title( get_the_ID() ) . '</span>' )
                   );
}
add_filter( 'excerpt_more', 'fklux_excerpt_more' );

Here’s the code explanation:

  • Line 1: sprintf() is used to create a string with placeholders. This is more of a code style issue, as it makes for cleaner code compared to concatenating the string.
  • Line 2: get_the_ID() is used to get the ID of the current post. This is cleaner than using the global $post object.
  • Line 2: The post ID is passed to get_permalink() to return the URL of the post. Note that we use esc_url() to escape the return value of get_permalink() before output.
  • Line 3: We use sprintf() to improve the accessibility of the Continue reading text. Overly repetitive links should be avoided, so we add the post title with get_the_title() for screen readers, but hide it from view using the .screen-reader-text CSS class.