CSS3 background animation


@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 50% 0;
    }
}

@-webkit-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 50% 0;
    }
}

@-ms-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 50% 0;
    }
}

@-moz-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 50% 0;
    }
}

.background {
    height:100%;
    width:100%;
    background: url(images/background.png) top no-repeat #171717;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    animation: animatedBackground 50s linear infinite;
    -ms-animation: animatedBackground 50s linear infinite;
    -moz-animation: animatedBackground 50s linear infinite;
    -webkit-animation: animatedBackground 50s linear infinite;
}

Numeric pagination in WordPress

Add the following code in your theme’s functions.php file.


function w3_numeric_posts_nav() {
    if( is_singular() )
		return;
	global $wp_query;
	/** Stop execution if there's only 1 page */
	if( $wp_query->max_num_pages <= 1 )
		return;
	$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
	$max   = intval( $wp_query->max_num_pages );

	/**	Add current page to the array */
	if ( $paged >= 1 )
		$links[] = $paged;

	/**	Add the pages around the current page to the array */
	if ( $paged >= 3 ) {
		$links[] = $paged - 1;
		$links[] = $paged - 2;
	}

	if ( ( $paged + 2 ) <= $max ) {
		$links[] = $paged + 2;
		$links[] = $paged + 1;
	}

	echo '<div class="navigation"><ul>' . "\n";

	/**	Previous Post Link */
	if ( get_previous_posts_link() )
		printf( '<li>%s</li>' . "\n", get_previous_posts_link() );

	/**	Link to first page, plus ellipses if necessary */
	if ( ! in_array( 1, $links ) ) {
		$class = 1 == $paged ? ' class="active"' : '';

		printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );

		if ( ! in_array( 2, $links ) )
			echo '<li>…</li>';
	}

	/**	Link to current page, plus 2 pages in either direction if necessary */
	sort( $links );
	foreach ( (array) $links as $link ) {
		$class = $paged == $link ? ' class="active"' : '';
		printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
	}

	/**	Link to last page, plus ellipses if necessary */
	if ( ! in_array( $max, $links ) ) {
		if ( ! in_array( $max - 1, $links ) )
			echo '<li>…</li>' . "\n";

		$class = $paged == $max ? ' class="active"' : '';
		printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
	}

	/**	Next Post Link */
	if ( get_next_posts_link() )
		printf( '<li>%s</li>' . "\n", get_next_posts_link() );

	echo '</ul></div>' . "\n";
}

Then you'll have to add the following template tag in your theme’s index.php, archive.php, category.php, and any other archive page template.


<?php w3_numeric_posts_nav(); ?>

And you can style the pagination with this CSS. Just add the following in your theme’s style.css file.


.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    color: #fff;
	text-decoration:none;
}

.navigation li {
	display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	background-color: #6FB7E9;
	border-radius: 3px;
	cursor: pointer;
	padding: 12px;
	padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
	background-color: #3C8DC5;
}

Featured image WordPress

Just add the following code in your template file. Where you want to show the featured image.


<?php //Featured Image Code
if(has_post_thumbnail())
    {
$thumbnail=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),"full");
    ?>
<img src="<?php echo $thumbnail[0];?>" alt="<?php the_title();?>"/>
<?php }
    ?>

Excerpt in WordPress with read more link

Add this function in your function.php file.


function custom_excerpt_length( $length ) {
    return 40;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

function new_excerpt_more( $more ) {
	return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">' . __('Read More', 'your-text-domain') . '</a>';
}
add_filter( 'excerpt_more', 'new_excerpt_more' );

Add the following tag in content file:


<?php the_excerpt(); ?>