Linking or Enqueuing Stylesheet in WordPress Themes

There are several ways of adding a stylesheet to a WordPress theme;

A: linking the stylesheet (in the head section of header.php)

– linking the main stylesheet style.css:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />


<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory(); ?>" />

– linking another stylesheet custom.css:

<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/custom.css" />

B: enqueuing the stylesheet (in functions.php)

– enqueuing the main stylesheet style.css of a theme:

function theme_styles() {
	wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
add_action( 'wp_enqueue_scripts', 'theme_styles' );

– enqueuing another stylesheet custom.css of a child theme:

function child_theme_styles() {
	wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css' );
add_action( 'wp_enqueue_scripts', 'child_theme_styles', 20 );

C: using @import in an existing stylesheet

– example linking the parent theme’s style.css in a child theme’s style.css

@import url('../parentheme/style.css');


WordPress Theme Development – style.css

link html
enqueue stylesheet

Integrate Pagination Plugins into Twenty Twelve

The ‘next/prev’ posts links are done with a function in Twenty Twelve; twentytwelve_content_nav().

That function is pluggable, which makes it easy to change it in a child theme of Twenty Twelve.
To integrate for instance the plugin ‘wp_pagenavi’, you would need to change the function as follows (when you are using a child theme, add this into functions.php of the child theme; else edit the function in Twenty Twelve):

function twentytwelve_content_nav( $html_id ) {
	global $wp_query;

	$html_id = esc_attr( $html_id );

	if ( $wp_query->max_num_pages > 1 ) : ?>
		<nav id="<?php echo $html_id; ?>" class="navigation" role="navigation">
			<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
		<?php if( function_exists( 'wp_pagenavi' ) ) { wp_pagenavi(); } else { ?>	
			<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>
			<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></div>
		<?php } ?>
		</nav><!-- #<?php echo $html_id; ?> .navigation -->
	<?php endif;

the use of the conditional check if( function_exists( 'wp_pagenavi' ) ) prevents an error message if the plugin is not activated, and provides the theme’s default pagination as a fallback.

Mark Comments by Current User

To highlight comments of the currenly logged-in user, add this plugin:

Plugin Name: Comment Class for Logged-In User
Plugin URI: n/a
Description: add the comment_class .comment-author-logged-in for the comments of logged-in users.
Version: 1.0
Author: alchymyth
Author URI:
License: GPL2

add_filter( 'comment_class', 'comment_class_logged_in_user' );

function comment_class_logged_in_user( $classes ) {
	global $comment;
	if ( $comment->user_id > 0 && is_user_logged_in() ) {  
		global $current_user; get_currentuserinfo(); 
		$logged_in_user = $current_user->ID;  
		if( $comment->user_id == $logged_in_user ) $classes[] = 'comment-author-logged-in';
return $classes;

//  requires formatting of the css class: 
//  .comment-author-logged-in { }

Add a file with the above code into the /wp-content/plugins folder; activate the plugin under ‘appearance – plugins – installed plugins’; and add a corresponding style to the stylesheet of the currently used theme.

The code compares the comment author’s ID with the ID of the logged-in user, and adds the class .comment-author-logged-in to the ‘comment_class’ output.