Cheesetoast » custom 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.11 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
Add Your Own Widget Area in WordPress http://www.cheesetoast.co.uk/add-custom-widget-sidebar-area-wordpress/ http://www.cheesetoast.co.uk/add-custom-widget-sidebar-area-wordpress/#comments Fri, 06 Jul 2012 21:43:21 +0000 http://www.cheesetoast.co.uk/?p=508 A straight forward code snippet showing in 2 easy steps how you can easily register your own sidebar in Wordpress to create your own widget area. Continue reading

The post Add Your Own Widget Area in WordPress appeared first on Cheesetoast.

]]>
WordPress now makes it extremely easy to create your own widget area by registering a custom sidebar.

Step 1 – Register the Sidebar

All you have to do is place the register_sidebar() function in your function.php file like so:

if ( function_exists('register_sidebar') )
register_sidebar( array(
'name' => __( 'Custom Widget Area'),
'description' => __( 'This is my custom widget area.'),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

The custom widget area will be added to your WordPress admin area.Customize as you see fit. In this example I’ve used the HTML5 <aside> element. Note that the ‘id’ must be in lowercase with no spaces.

Now that you’ve registered your new sidebar you’ll be able to view it in the WordPress admin area under ‘Appearance > Widgets’.

Step 2 – Add the Sidebar to Your Theme

Of course just because you’ve registered a sidebar doesn’t mean it’s going to show up anywhere unless you add it to your theme.

Add the following snippet to your site code (e.g. your footer.php):

<div class="widget-container">
<?php
// Custom widget Area Start
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Custom Widget Area') ) : ?>
<?php endif;
// Custom widget Area End
?>
</div>

The name of the sidebar must match the name your specified when you registered it. In this example I surrounded the php code with a container div to help with presentation.

Now when you load up your page you’ll see your shiny new widget area.

Read more about registering a sidebar from the WordPress Codex.

The post Add Your Own Widget Area in WordPress appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/add-custom-widget-sidebar-area-wordpress/feed/ 0