Cheesetoast » WordPress http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.7 Highlight Post Categories in WordPress using the_category() http://www.cheesetoast.co.uk/highlight-post-categories-wordpress/ http://www.cheesetoast.co.uk/highlight-post-categories-wordpress/#comments Fri, 16 Nov 2012 19:41:35 +0000 http://www.cheesetoast.co.uk/?p=1000 Here's a quick code snippet that allows you to style the post categories displayed alongside each Wordpress post by wrapping them in a span tag using the_category function. Continue reading

The post Highlight Post Categories in WordPress using the_category() appeared first on Cheesetoast.

]]>
Categories "Featured" and "Services" have been separately highlighted in blue.Here’s a quick code snippet that allows you to style the post categories displayed alongside each WordPress post.

Basically, during ‘the loop’ you’d use the_category() function to output the categories that the current post belongs to. Here is a simple example of the_category function in use:

<p>Posted in <?php the_category(', '); ?></p>

Example output: Posted in Featured, Services

The first parameter in the_category() function is the separator. In the above example I’ve used a comma to separate the categories listed but it’s also common to add arrows, blank spaces, or bullet points.

What I want to accomplish is to highlight each category by wrapping them in a span tag. The problem is that the separator is only placed between categories so in order to wrap each one I need to place an open span before and after I call the_category function. Then I can place a closing and opening span as the separator. Like so:

<p>Posted in <span class="round label"><?php the_category('</span> <span class="round label">'); ?></span></p>

Which will output the following code for two categories:

<p>Posted in
<span class="round label> <!-- First category link code --> </span>
<span class="round label> <!-- Second category link code --> </span>
</p>

Read more about the_category function and it’s parameters from the WordPress codex.

The post Highlight Post Categories in WordPress using the_category() appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/highlight-post-categories-wordpress/feed/ 0
Add a Responsive Slideshow to your WordPress Theme http://www.cheesetoast.co.uk/add-responsive-slideshow-wordpress-theme/ http://www.cheesetoast.co.uk/add-responsive-slideshow-wordpress-theme/#comments Tue, 16 Oct 2012 18:50:03 +0000 http://www.cheesetoast.co.uk/?p=879 Add a responsive slideshow to the front end of your Wordpress theme and to the admin area, so users can add their own slides. Continue reading

The post Add a Responsive Slideshow to your WordPress Theme appeared first on Cheesetoast.

]]>
I’ll walk through how you can add a JQuery responsive slideshow to both the front end of your WordPress theme and to the admin area, so users can add their own slides.

An instance of the slideshow as viewed from a tablet.

The Slideshow Files

In searching for a slideshow I wanted to find one that not only looked great but met the following criteria:

  • I wanted it to be open source.
  • It had to be responsive so that it worked well with mobile devices.
  • I wanted to be able to add HTML text which overlaid the images (and remained responsive).
  • It needed to come with options so that I could customize the timing and effects.

Finding a slideshow the delivered on all of these counts took me a while but I eventually found what I was looking for with the excellent responsive slideshow from Codrops. Codrops not only provides the necessary download files but includes a step by step walk through for all the HTML markup, CSS and javascript code.

Include the Files in Your Theme Header

Download the slideshow files and add them to your WordPress theme folder. If you want to create a child theme but aren’t sure how, take a look at the WordPress codex section on child themes.

Now that you have the slideshow files in your folder you need to include them into your theme. There are a couple of ways to do this. One way is to manually add the <script src=”…”></script> code to your header file, but the recommended way to is use the WordPress functions wp_enqueue_script() & wp_enqueue_style().

For directions on how to do this read my previous post on how to safely include scripts in the WordPress header. Make sure to include all the necessary javascript and CSS files that come with the slideshow.

Adding Slides to the WordPress Admin Panel

To make it easy for users to add their own slides we’ll create a new post type in WordPress. To do this we use the register_post_type() function in our functions.php file (located in [Wordpress root] > wp-content > themes > [current theme] > functions.php).

Add the following code:

// Creates Slides post type
register_post_type('slides', array(
'label' => 'Slides',
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => array('slug' => 'slides'),
'query_var' => true,
'supports' => array(
'title',
'editor',
'excerpt',
'revisions',
'thumbnail',
'author',
'page-attributes',)
) );

A new 'Slides' menu has been added to the WordPress admin panelOnce created, this new post type will show up in the admin menu and will act separately from regular posts (they won’t appear in your blog or your RSS feed, etc.).

Now you can make your own slides in the same way you’d create a new post. The image for your slides comes from assigning a ‘featured image’ to each post. The title and content will make up the overlaid text on each slide.

The next step is to create a page template that combines the slideshow files and the newly created slide posts to display them on your site.

Creating a Page Template

Open up a new file in your editor and paste in the following code:

<?php
/*
Template Name: Slideshow
*/
get_header();
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<?php
//This is for our custom Slides menu
$args = array( 'post_type' => 'slides', 'orderby' => 'menu_order');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
   <li>
      <?php the_post_thumbnail('full');?>
      <div class="ei-title">
         <h2><?php the_title(); ?></h2>
         <?php the_excerpt(); ?>
      </div>
   </li>
<?php
endwhile;
?>
</ul>
<ul class="ei-slider-thumbs">
   <li class="ei-slider-element">Current</li>
      <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
   <li><a href="#"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
</div><!-- ei-slider -->

/* Include any code you want in your page */

<?php the_sidebar(); ?>
<?php the_footer(); ?>

In that snippet I’ve taken the Codrops slideshow markup and modified it to generate the slides dynamically using the WordPress loop. I also used the new post type (slides) for the WP_Query.

The slideshow template is now available from the page attributes panel.Save the file as template-slideshow.php and keep it in your theme folder. You’ll now be able to select the template for any of your pages.

Side Note: because we’re displaying the content of the post on our slideshow we don’t want it to be so long that it’ll run off the bottom of the slide. That’s why, to limit the length of the output, I used the_excerpt() function instead of the_content(). This will trim the content if it gets too long. You can also read how to limit the word length of the excerpt further if you need to.

Not so fast. Updating the Slideshow Files

We’re almost there but there’s one catch with using WordPress to display the slides. The slideshow is configured to display it’s text as h2 and h3 elements. When we display the content of our post, however, we use the_excerpt() function which displays the basic content as paragraphs. To make sure these paragraphs are displayed properly in the slideshow we need to open up one of the javascript files and tinker a little.

Go into your the folder containing the slideshow files and open /js/jquery.eislideshow.js
Look  for this block of code:

// titles animation
$nextSlide.find('div.ei-title > h2')
.css( 'margin-right', 50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h3')
.css( 'margin-right', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )

Add the following after the last line of that block of code:

.find('div.ei-title > p')
.css( 'margin-left', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginLeft : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )

This will ensure that paragraphs are displayed properly on the slides.

Give it a Try

Now that all the code is together go ahead and try it out. Make sure you assign the template to one of your pages then add a slide post with a featured image.

You can also edit the file [slideshow folder]/css/style.css to play around with the styling of the slides. Have fun!

The post Add a Responsive Slideshow to your WordPress Theme appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/add-responsive-slideshow-wordpress-theme/feed/ 0
Safely Include Scripts or Stylesheets In WordPress Header http://www.cheesetoast.co.uk/safely-include-scripts-style-files-wordpress-header/ http://www.cheesetoast.co.uk/safely-include-scripts-style-files-wordpress-header/#comments Thu, 11 Oct 2012 21:23:43 +0000 http://www.cheesetoast.co.uk/?p=892 There are a couple of ways to include files in your Wordpress header. One way is to manually add the code to your header file. Although this works just fine, the recommended way to is use the Wordpress function wp_enqueue_script() function. Continue reading

The post Safely Include Scripts or Stylesheets In WordPress Header appeared first on Cheesetoast.

]]>
There are a couple of ways to include files in your WordPress header. One way is to manually add the <script src=”…”></script> code to your header file. Although this works just fine, the recommended way to is use the WordPress function wp_enqueue_script() function.

Use this code in your functions.php file:

<?php 
add_action( 'wp_enqueue_scripts', 'add_custom_script' ); 
function add_custom_script() { 
   wp_enqueue_script( 
      'custom_slideshow_script',
      get_template_directory_uri() . '/js/custom-script.js',
      array('jquery') 
   ); 
}
add_action('wp_enqueue_scripts', 'add_custom_script');
?>

This particular use of the wp_enqueue_script function loads a script that is dependent on another WordPress script, in this case JQuery. There are several variations of this function that you can find on the WordPress Codex.

The function wp_enqueue_style can be used for stylesheets.

The post Safely Include Scripts or Stylesheets In WordPress Header appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/safely-include-scripts-style-files-wordpress-header/feed/ 0
Customize the WordPress Login Screen CSS http://www.cheesetoast.co.uk/customize-wordpress-login-screen-logo-css/ http://www.cheesetoast.co.uk/customize-wordpress-login-screen-logo-css/#comments Mon, 01 Oct 2012 15:42:24 +0000 http://www.cheesetoast.co.uk/?p=861 Here's a useful little code snippet that you can use to edit the Wordpress login screen styling without altering the core CSS files. In this example I'll demonstrate how to replace the Wordpress logo on the login page. Continue reading

The post Customize the WordPress Login Screen CSS appeared first on Cheesetoast.

]]>
Here’s a useful little code snippet that you can use to edit the WordPress login screen styling without altering the core CSS files. In this example I’ll demonstrate how to replace the WordPress logo on the login page.

Open up your functions.php file and paste this function:

function my_custom_login_logo() {
echo '<style type="text/css">
.login h1 a { 
background-image:url('. get_stylesheet_directory_uri() .'/images/your_logo_file.jpg) !important;
background-size: 145px 62px !important;
}
</style>';
}
add_action('login_head', 'my_custom_login_logo');

To set the background image url I’ve used the function get_stylesheet_directory_uri(), which retrieves the stylesheet directory of the current theme/child theme. You should always use the dynamic WordPress functions to locate files, as opposed to using a static address.

Since this styling code is called before the default WordPress CSS for the login page I’ve used the !important property to ensure that it’s not overwritten. This apples to any other changes you decide to make.

For reference, here’s the default styling for the login page header anchor:

.login h1 a {
background-image:url('../images/wordpress-logo.png?ver=20120216');
background-size:274px 63px;
background-position:top center;
background-repeat:no-repeat;
width:326px;height:67px;
text-indent:-9999px;
overflow:hidden;
padding-bottom:15px;
display:block
}

Good luck customizing your own login screen.

The post Customize the WordPress Login Screen CSS appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/customize-wordpress-login-screen-logo-css/feed/ 0
Add Custom Theme Options to WordPress Admin Menu http://www.cheesetoast.co.uk/add-custom-theme-options-wordpress-admin-menu/ http://www.cheesetoast.co.uk/add-custom-theme-options-wordpress-admin-menu/#comments Fri, 14 Sep 2012 20:53:33 +0000 http://www.cheesetoast.co.uk/?p=805 Learn how to add your custom options page to one of the existing Wordpress admin menus.
In this example I'll demonstrate how to create a simple options page that allows the user to add a telephone number which will be displayed in the top right corner of a site. Continue reading

The post Add Custom Theme Options to WordPress Admin Menu appeared first on Cheesetoast.

]]>
A custom theme menu under the 'Appearance' tab of the WordPress admin areaLearn how to add your custom options page to one of the existing WordPress admin menus.

In this example I’ll demonstrate how to create a simple options page that allows the user to add a telephone number which will be displayed on a theme.

Creating an options.php file

Although it’s possible to add the necessary code to your functions.php file, it’s considered good practice to keep your menu code in a separate file. This is especially true if you’re adding lots of options, since it keeps your code organized.

Create a new PHP file and name it options.php. You can either save it in your theme’s root directory ([Wordpress root] > wp-content > themes > [current theme]) or, if you have other important theme files, you can create a sub-folder called ‘library’ and save it there.

Now we need to make sure this new file is called by including the options in your functions.php file. Open up your functions file (located in [Wordpress root] > wp-content > themes > [current theme] > functions.php) and add the following code:

require_once ( get_template_directory() . '/library/options.php' );

Or if you’re using a child theme:

require_once ( get_stylesheet_directory() . '/library/options.php' );

Now you can populate your options.php file and it will be included by WordPress.

Writing your options.php file

Adding an options menu involves 3 main steps:

  1. Create a function that tells WordPress to build a new menu item.
  2. Register the function using a ‘hook’.
  3. Create a function that displays the contents of the options page.

1. Create the function that builds your menu

This step is fairly simple but very important. This is the function we’re going to use:

function add_custom_theme_options()  
{  
    add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function );  
}

The add_theme_page function will add our options page as a sub-menu to the ‘Appearance’ main menu. Here are the parameters for that function:

$page_title
The HTML title tag of the page.
$menu_title
The title of the page as displayed in the menu.
$capability
Used to determine which role the user requires to be able to use the menu.
$menu_slug
A unique name for this menu item.
$function
The name of the function called on to display the HTML code for your options.

Here is an example of the function is use:

function add_custom_theme_options()  
{  
    add_theme_page('Theme Options', 'Theme Options', 'manage_options', 'custom_options_slug','custom_theme_options');  
}

Read more about the add_theme_page() function.

2. Register the function

Now that we have our menu-creating function we need to add it to WordPress using a hook. Just add the following code:

add_action('admin_menu', 'add_custom_theme_options');

3. Create a function that displays the contents of the options page

We’re going to write the HTML code for the options page and put it in a function. This function is the one we called in step 2 so make sure you use the same name (in this case ‘add_custom_theme_options’).

function add_custom_theme_options()
{  
if ( !current_user_can( 'manage_options' ) )  {
	wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
}
?>
<div class="wrap">
<h2>Theme Options</h2>
<form method="post" action="options.php">
<?php wp_nonce_field('update-options'); // Security - used to validate source.
<p><strong>Tel No:</strong><br />
<input type="text" name="telno" size="15" value="<?php echo get_option('telno'); ?>" />
</p>
<p><input type="submit" name="Submit" value="Save Options" /></p>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="telno" />
</form>
</div>
<?php } ?>

Now when you look in your admin area you’ll see your new sub-menu titled ‘Theme Options’ under the ‘Appearance’ menu. In the new options page you’ll see the form that we just wrote. You can use it to save the telephone number to the WordPress database.

Using the new options in your theme

Now that we have the telephone number saved we can use it in the theme.

<?php if (get_option('telno')){ ?>
<div id="telno">
<p>Tel: <?php echo get_option('telno'); ?></p>
</div>
<?php } ?>

If the telephone number has been saved in the options page then it will display it in the theme. Otherwise it will be left blank.

For more information on adding custom menus read the WordPress Codex.

The post Add Custom Theme Options to WordPress Admin Menu appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/add-custom-theme-options-wordpress-admin-menu/feed/ 0
Create Custom Thumbnails for WordPress Posts http://www.cheesetoast.co.uk/create-custom-thumbnail-size-wordpress-posts/ http://www.cheesetoast.co.uk/create-custom-thumbnail-size-wordpress-posts/#comments Sun, 09 Sep 2012 20:55:12 +0000 http://www.cheesetoast.co.uk/?p=760 By using a post's featured image you can display a custom thumbnail beside your latest posts.
Although Wordpress creates thumbnail images automatically (small, medium, and large) you can tell Wordpress to create custom thumbnail sizes. Continue reading

The post Create Custom Thumbnails for WordPress Posts appeared first on Cheesetoast.

]]>
Custom thumbnails displayed next to post excerpts

By using a post’s featured image you can display a custom thumbnail beside your latest posts.

Custom thumbnail size

Although WordPress creates thumbnail images automatically (small, medium, and large) you can tell WordPress to create custom thumbnail sizes.

Firstly of all, decide on the image dimensions that will best suit your page. For this example I’ve chosen a square of 75 x 75 px.

Now we make use of the WordPress function add_image_size(). Just add the following code to your functions.php file (or try the alternative to using the functions file):

add_image_size( 'tiny-thumb', 75, 75, true );

The parameters for this function are:

  • $name (string – required)
  • width (int – optional)
  • height (int – optional)
  • crop (boolean – optional)

For this example I’ve chosen to set the ‘crop’ boolean to true so that images are automatically cropped to my specified dimensions. This way I can make sure all my thumbnails will appear square.

Now just attach an image to your post using the featured image.

Note: Only images uploaded after you add this function will have the new cropped thumbnail size.

Adding thumbnails to your blog page

Now that you have these new thumbnail sizes you need to display them next to your posts.

To display the new thumbnails on your blog listings page open up your index.php file. If you want the thumbnails to appear on the full articles you can also edit your single.php file. Either way, look in ‘the loop’ for the entry div add some new code.

<div class="entry">
   <?php if(has_post_thumbnail()): ?>
      <a href="<?php the_permalink() ?>" title="Link to <?php the_permalink() ?>">
         <?php the_post_thumbnail('tiny-thumb');?>
      </a>
   <?php endif ?>
   <?php the_content(); ?>
</div>

The second line in the code above tests to see if a thumbnail exists for each post. If one does exist, we create an anchor link to the main article using the_permalink() function and display our custom thumbnail inside it.

To style the new thumbnail image we can use the class ‘attachment-[thumbnail-name]’ that WordPress automatically generates for us (in my example this would be ‘attachment-tiny-thumb‘. Alternatively you can wrap the image in your own div and give it your own class.

You might want to add some margins and a float:

.attachment-tiny-thumb { 
   float: right;
   margin: 0 0 10px 10px;
 }

I hope this tip comes in handy. Let me know if you found it useful or if you know of any improvements that can be made!

The post Create Custom Thumbnails for WordPress Posts appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/create-custom-thumbnail-size-wordpress-posts/feed/ 0
WordPress Functionality Plugin to Accompany Functions.php http://www.cheesetoast.co.uk/wordpress-functionality-plugin-functions-php/ http://www.cheesetoast.co.uk/wordpress-functionality-plugin-functions-php/#comments Fri, 07 Sep 2012 17:23:25 +0000 http://www.cheesetoast.co.uk/?p=775 When customizing a Wordpress site it's common practice to add tweaks and functionality to a theme's functions.php file. As I learned recently however, this is not always the best approach.

An interesting article on WP Candy points out the disadvantage of linking site functionality to a theme that will inevitably change some day. The proposed solution is to create a functionality plugin separate from the functions file. Continue reading

The post WordPress Functionality Plugin to Accompany Functions.php appeared first on Cheesetoast.

]]>
When customizing a WordPress site it’s common practice to add tweaks and functionality to a theme’s functions.php file. As I learned recently however, this is not always the best approach.

An interesting article on WP Candy points out the disadvantage of linking site functionality to a theme that will inevitably change some day. The proposed solution is to create a functionality plugin separate from the functions file.

You can think of it as a portable functions.php file that you can take with you when you change themes.

The plugin should contain code used to modify site structure and functionality that you would require, should you change theme. Code that is specific to your theme (custom nav bars, for example) should stay in the functions.php file.

For directions on how to create your own functionality plugin read the full article on WP Candy.

The post WordPress Functionality Plugin to Accompany Functions.php appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/wordpress-functionality-plugin-functions-php/feed/ 0
CSS Horizontal Menu Bar with Icons http://www.cheesetoast.co.uk/css-horizontal-add-icons-menu-bar/ http://www.cheesetoast.co.uk/css-horizontal-add-icons-menu-bar/#comments Fri, 31 Aug 2012 17:36:39 +0000 http://www.cheesetoast.co.uk/?p=673 A great way to make your menu buttons more interesting is to add some icons. Adding graphics to a page can add a lot of character to your site and help draw attention to the navigation elements. Continue reading

The post CSS Horizontal Menu Bar with Icons appeared first on Cheesetoast.

]]>
Example of menu icons for "Home", "Services, "Products"

A great way to make your menu buttons more interesting is to add some icons. Adding graphics to a page can add a lot of character to your site and help draw attention to the navigation elements.

Update: Since this article is quite old now you might want to look at a newer one about CSS Sprites with Pseudo Elements.

First of all you’ll need some icons. There are loads of great sites to buy premium icons (Picto Foundry, Icon Jar, Glyphicons, & more). There are also a lot of free icon sets out there.

Grab yourself some icons and lets get to work on the code. We’ll start with the HTML for your menu. Here’s an example of a basic horizontal menu bar:

<nav id="main-menu">
     <ul class="nav-bar">
          <li class="nav-button-home"><a href="/">Home</a></li>
          <li class="nav-button-services"><a href="#">Services</a></li>
          <li class="nav-button-products"><a href="#">Products</a></li>
     </ul>
</nav>

Next up comes the CSS. First we create a simple horizontal menu:

#main-menu .nav-bar { list-style:none;}
#main-menu .nav-bar li { display:inline; padding: 0 10px; }

Now we customize the links:

#main-menu .nav-bar li a {
padding-left: 25px; /* Create padding on the left where the icon goes */
text-decoration: none;
text-transform: uppercase;
color: #333;
text-shadow: 1px 1px 1px #ccc;
}

Finally we add the icons.

.nav-bar .nav-button-home a { background:url("images/home.gif") no-repeat 0px -2px transparent; }
.nav-bar .nav-button-services a { background:url("images/services.gif") no-repeat 0px -2px transparent; }
.nav-bar .nav-button-products a { background:url("images/products.gif") no-repeat 0px -2px transparent; }

Do you have any ideas on how create a great looking menu? Post a comment and let me know.

The post CSS Horizontal Menu Bar with Icons appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-horizontal-add-icons-menu-bar/feed/ 0
Limit the Number of Words in the WordPress Excerpt http://www.cheesetoast.co.uk/limit-number-word-length-wordpress-excerpt/ http://www.cheesetoast.co.uk/limit-number-word-length-wordpress-excerpt/#comments Fri, 31 Aug 2012 02:22:56 +0000 http://www.cheesetoast.co.uk/?p=687 Learn how to create and control post excerpts to be displayed on your Wordpress blog page. I'll also go into how you can change the 'read more' text that appears if the post exceeds the excerpt word limit. Continue reading

The post Limit the Number of Words in the WordPress Excerpt appeared first on Cheesetoast.

]]>
Learn how to create and control post excerpts to be displayed on your WordPress blog page. I’ll also go into how you can change the ‘read more’ text that appears if the post exceeds the excerpt word limit.

Skip to code snippet

What is the post excerpt?

To avoid displaying the full contents of each article on a blog page WordPress allows users to create a post excerpt so they can summarize the content. Readers can scan each excerpt and decide whether or not to link to the full article.

There are a couple of standard ways to limit how much of an article is displayed on your WordPress blog page.

Firstly you can use the ‘more’ tag in the main body of your post, like so:

This is the introduction of my blog post.
<!--more-->
This is the rest of my post.

WordPress will interpret this tag as a break point and only the content preceding it will be displayed on the blog page.

The second method is to use the excerpt field under the post editor. If this isn’t visible in your admin area you’ll need to click on ‘screen options’ from the top right of your screen and tick the ‘excerpt’ checkbox.

The advantage to using the excerpt field over using the ‘more’ tag is that you can include content that won’t appear in the main article.

Force excerpts on your blog page

By default WordPress will display the entire post on the blog page. However, if you (or your clients) don’t use the methods described above there’s still a way to customize the content shown. By editing the index.php file (or creating your own template file) you can display an excerpt automatically.

Just swap the function:

the_content();

for:

the_excerpt();

If the user doesn’t utilize the ‘more’ tag and leaves the excerpt field empty then the first 55 words of the main article will be displayed instead. The cut-off point will be marked by […].

Limit the word count of the excerpt

The default maximum number of words shown from the post is 55 words. If you want to shorten this limit add the following code your functions.php file:

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

In this case the excerpt will be limited to 30 words.

Customize the ‘read more’ text […]

When the content of a post exceeds the word limit of the excerpt the cut-off point will be marked with […], indicating to the user that there is more to come. Luckily we can change this text to something a little more user-friendly, such as “Continue reading →” or “Read more…”.

Open up your functions.php file again and add the following:

function new_excerpt_more($more) {
global $post;
return '<a class="moretag" href="'. get_permalink($post->ID) . '"> Read more...</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

Note that the new wording also becomes a link to the full article with a class named ‘moretag’.

Read more

Read the WordPress codex for more information on the_excerpt() and how to customize the ‘read more’ link.

The post Limit the Number of Words in the WordPress Excerpt appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/limit-number-word-length-wordpress-excerpt/feed/ 0
Exclude Category from WordPress RSS Feed http://www.cheesetoast.co.uk/exclude-categories-wordpress-rss-feed/ http://www.cheesetoast.co.uk/exclude-categories-wordpress-rss-feed/#comments Tue, 28 Aug 2012 19:21:15 +0000 http://www.cheesetoast.co.uk/?p=665 A useful little code snippet to remove categories from the Wordpress RSS feed. Continue reading

The post Exclude Category from WordPress RSS Feed appeared first on Cheesetoast.

]]>
A useful little code snippet to remove categories from the WordPress RSS feed.

Just add the following code to your function.php file:

function exclude_RSS_cat($query) {
if ($query->is_feed) {
$query->set('cat','-12');
}
return $query;
}

add_filter('pre_get_posts','exclude_RSS_cat');

This will remove the category with the ID of 12.

The post Exclude Category from WordPress RSS Feed appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/exclude-categories-wordpress-rss-feed/feed/ 4