Archive for March, 2013

Custom Controls in WP Admin

Posted: March 30, 2013 in Php, Wordpress

Introduction

WordPress 3.4 has a fucking cool new feature on the themes page. Next to each theme theres a preview or a customize link that pops up a new overlay that lets the user live edit their themes. Adding extra theme options has been constant a pain the arse since I started developing themes all those few years ago. To make things easier for myself I even created a theme admin plugin. I was never that happy with the plugin however and always too busy to make it work so the new theme customizer seems like a good timesaver for me and I decided to take a look at how to implement it.

The first thing I found was that as with all new WP features no-one has written any documentation for customising (Hey WP core developers, customise is spelled with a damn s!) it yet. All I could find was this description of the beta version. Also there doesn’t seem to be an API yet, it must be coming in a future release. However, there is an object called $wp_customize that you can add your custom theme settings to.

Getting Started

On loading up my starter theme in the preview I was suprised in seeing a half built menu already there. This is because WordPress is pulling the options for custom headers, backgrounds that you’ve added using the add_theme_support() function. It also pulls some core options like site title and displays them there.

Custom Options

Time for custom options. Going through the blog post I found I saw that the first thing you need to do is hook a function to the customize_register action like this:

1
2
3
4
function themename_customize_register($wp_customize){
    //STUFF IN HERE
}
add_action('customize_register', 'themename_customize_register');

All your custom options go into there.

Adding a Section

This is simple enough as far as I can tell. You add one using the following:

1
2
3
4
$wp_customize->add_section('themename_color_scheme', array(
    'title' => __('Color Scheme', 'themename'),
    'priority' => 120,
));

So you pass through a unique slug and an array of arguments to the add_section method. I’m not 100% sure of all the arguments to pass through in the array, all I passed was the title and the priority. The priority is where you want the section to appear in the menu order. 1 is on the top and 120 seems to be the bottom.

Adding options

There are two methods you need to call to add an option. One to tell WordPress that an option exists and one to display whatever input box it needs. This is similar how the add_option()/update_option()/get_option() API works and it should be because it uses those functions to save the settings as far as I can tell/be bothered to check.

The first option type I’m going to show you is a standard text input box then I’ll breeze through the other types. You need to first call the add_setting() method to tell WP that you wish to save some new data. You do that like this:

1
2
3
4
5
$wp_customize->add_setting('themename_theme_options[text_test]', array(
    'default'        => 'Arse!',
    'capability'     => 'edit_theme_options',
    'type'           => 'option',
));

Similar to the add_section() method you pass through a slug and an array of args. You need to pass through a unique slug to this as the first parameter and it also allows you to pass the slug as an array index. The advantages of this is all your options are then available in the template in the one array keeping things nice and neat. The args I’ve found are:

  • Default: The default value for the input.
  • Capability: This is the user role that is capable of editing these settings, I assume you would always set it to ‘edit_theme_options’.
  • Type: The way you want to store the data in WordPress, you can set it to ‘option’ or ‘theme_mod’. I’ve always used option for saving theme preferences but if you prefer using theme mod then you can set it to save those here.

Next you want to display your option in your custom section:

1
2
3
4
5
$wp_customize->add_control('themename_text_test', array(
    'label'      => __('Text Test', 'themename'),
    'section'    => 'themename_color_scheme',
    'settings'   => 'themename_theme_options[text_test]',
));

Again this works similarly to add_setting() and add_section() you pass a unique slug (Don’t really know why here as it’s only used as the list item css id) and an array of args. Some of the args are used for every input and some differ depending on the input element you want to display. The universal ones are:

  • label: The form items label.
  • section: The section in which you want the form item to appear.
  • type: The type of form item you want. These are text, radio, checkbox and select. And are standard form elements. Textareas and HTML5 input types aren’t supported.
  • settings: This is the setting you want to use to save the values from the file input. You put in the unique slug of of the setting you want to use.
  • choices: These are only needed for radio buttons and dropdowns and contain the different options you want to display.

You can also add options to the sections created by the WordPress core by passing their slug in the section arg. The ones I found are:

  • Colors: colors
  • Header Image: header_image
  • Background Image: background_image
  • Static Front Page: static_front_page
  • Site Title & Tagline: title_tagline
  • Navigation: nav

Standard Input Types

These are just standard form items.

Radio

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
$wp_customize->add_setting('themename_theme_options[color_scheme]', array(
    'default'        => 'value2',
    'capability'     => 'edit_theme_options',
    'type'           => 'option',
));
$wp_customize->add_control('themename_color_scheme', array(
    'label'      => __('Color Scheme', 'themename'),
    'section'    => 'themename_color_scheme',
    'settings'   => 'themename_theme_options[color_scheme]',
    'type'       => 'radio',
    'choices'    => array(
        'value1' => 'Choice 1',
        'value2' => 'Choice 2',
        'value3' => 'Choice 3',
    ),
));

Checkbox

To be honest, I think I’m missing something here. It’s acting a bit wonkey. Maybe it’s broken?

01
02
03
04
05
06
07
08
09
10
11
$wp_customize->add_setting('themename_theme_options[checkbox_test]', array(
    'capability' => 'edit_theme_options',
    'type'       => 'option',
));
$wp_customize->add_control('display_header_text', array(
    'settings' => 'themename_theme_options[checkbox_test]',
    'label'    => __('Display Header Text'),
    'section'  => 'themename_color_scheme',
    'type'     => 'checkbox',
));

Select Box

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
$wp_customize->add_setting('themename_theme_options[header_select]', array(
    'default'        => 'value2',
    'capability'     => 'edit_theme_options',
    'type'           => 'option',
));
$wp_customize->add_control( 'example_select_box', array(
    'settings' => 'themename_theme_options[header_select]',
    'label'   => 'Select Something:',
    'section' => 'themename_color_scheme',
    'type'    => 'select',
    'choices'    => array(
        'value1' => 'Choice 1',
        'value2' => 'Choice 2',
        'value3' => 'Choice 3',
    ),
));

Page Dropdown

This displays a list of your pages. I guess you could allow the user to set pages for something custom. It’s weird that this is in there but not a category dropdown option.

01
02
03
04
05
06
07
08
09
10
11
12
$wp_customize->add_setting('themename_theme_options[page_test]', array(
    'capability'     => 'edit_theme_options',
    'type'           => 'option',
));
$wp_customize->add_control('themename_page_test', array(
    'label'      => __('Page Test', 'themename'),
    'section'    => 'themename_color_scheme',
    'type'    => 'dropdown-pages',
    'settings'   => 'themename_theme_options[page_test]',
));

You can hack in a category dropdown like this however:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$categories = get_categories();
$cats = array();
$i = 0;
foreach($categories as $category){
    if($i==0){
        $default = $category->slug;
        $i++;
    }
    $cats[$category->slug] = $category->name;
}
$wp_customize->add_setting('themename_theme_options[header_select]', array(
    'default'        => $default,
    'capability'     => 'edit_theme_options',
    'type'           => 'option',
));
$wp_customize->add_control( 'example_select_box', array(
    'settings' => 'themename_theme_options[header_select]',
    'label'   => 'Select Something:',
    'section' => 'themename_site_options',
    'type'    => 'select',
    'choices' => $cats,
));

Fancy Input Types

These are custom input types and use javascript to work. They also all vary slightly from the others in that a new object needs to be created for each control.

Image Upload

Image upload is a file input type and allows users to upload an image. Handy for letting them set their logo.

01
02
03
04
05
06
07
08
09
10
11
$wp_customize->add_setting('themename_theme_options[image_upload_test]', array(
    'default'           => 'image.jpg',
    'capability'        => 'edit_theme_options',
    'type'           => 'option',
));
$wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'image_upload_test', array(
    'label'    => __('Image Upload Test', 'themename'),
    'section'  => 'themename_color_scheme',
    'settings' => 'themename_theme_options[image_upload_test]',
)));

File Upload

Adds a custom file input. Good for allowing the end user to upload files I guess. Maybe a custom favicon would use this?

01
02
03
04
05
06
07
08
09
10
11
12
$wp_customize->add_setting('themename_theme_options[upload_test]', array(
    'default'           => 'arse',
    'capability'        => 'edit_theme_options',
    'type'           => 'option',
));
$wp_customize->add_control( new WP_Customize_Upload_Control($wp_customize, 'upload_test', array(
    'label'    => __('Upload Test', 'themename'),
    'section'  => 'themename_color_scheme',
    'settings' => 'themename_theme_options[upload_test]',
)));

Color Picker

Displays a colour picker. Gives the user the option to destroy your theme with their bad taste. This input seems to have a hex colour callback for sanitizing the value.

01
02
03
04
05
06
07
08
09
10
11
12
13
$wp_customize->add_setting('themename_theme_options[link_color]', array(
    'default'           => '000',
    'sanitize_callback' => 'sanitize_hex_color',
    'capability'        => 'edit_theme_options',
    'type'           => 'option',
));
$wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'link_color', array(
    'label'    => __('Link Color', 'themename'),
    'section'  => 'themename_color_scheme',
    'settings' => 'themename_theme_options[link_color]',
)));

Displaying these options in your theme.

Displaying this stuff is easy. Depending on if you set your setting_type() to option or theme_mod you can display it in the two following ways:

Option:

1
<?php $options = get_option('themename_theme_options'); echo $options['input_name']; ?>

Theme Mod:

1
<?php $options =  get_theme_mod('themename_theme_options'); echo $options['input_name']; ?>

In Closing

Thats as far as I got in a couple of hours research (fucking about), you can download a working gist of the examples that you can copy straight into your themes functions.php file below and have a fiddle with it yourself. Please feel free to correct whatever I have wrong up there as I made quite a few assumtions and have probably made a mistake or two.

Download the code

Courtesy:-abandon.ie/exploring-wordpress-theme-customizer/

Advertisements

Let’s create a logo uploader using the new Theme Customizer, which was released with WordPress 3.4. This will allow users to place an image in our theme’s header; if no logo has been uploaded, we’ll fall back to displaying the site title and description instead.

For a more in-depth description of the Theme Customizer, including practical examples, code and more, see Otto’s excellent tutorials. If you are completely new to the Theme Customizer, I highly recommend at least scanning through them, to better understand the methods we’ll be calling in our code.

When working with the Theme Customizer, we should be creating sections, settings and controls within a function being fired on the customize_register hook. Create this function in your theme’s functions.php. The next three code blocks will go within this function.

1
2
3
4
function themeslug_theme_customizer( $wp_customize ) {
    // Fun code will go here
}
add_action('customize_register', 'themeslug_theme_customizer');

First, we’ll create a new section for our logo upload. Note that the description will not be displayed when using the Theme Customizer; it is simply used for the section heading’s title attribute.

1
2
3
4
5
$wp_customize->add_section( 'themeslug_logo_section' , array(
    'title'       => __( 'Logo', 'themeslug' ),
    'priority'    => 30,
    'description' => 'Upload a logo to replace the default site name and description in the header',
) );

Next, we register our new setting. It doesn’t get any easier than this:

1
$wp_customize->add_setting( 'themeslug_logo' );

Lastly, we tell the Theme Customizer to let us use an image uploader for setting our logo:

1
2
3
4
5
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array(
    'label'    => __( 'Logo', 'themeslug' ),
    'section'  => 'themeslug_logo_section',
    'settings' => 'themeslug_logo',
) ) );

That wraps up our work in functions.php.

To output our new logo to the screen, we’ll need to call our setting with get_theme_mod somewhere in our theme’s header (I’ll be working in my theme’s header.php template file). However, if the user hasn’t set a logo, we’ll want to output the site title and description instead.

1
2
3
4
5
6
7
8
9
10
<?php if ( get_theme_mod( 'themeslug_logo' ) ) : ?>
    <div class="site-logo">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo get_theme_mod( 'themeslug_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></a>
    </div>
<?php else : ?>
    <hgroup>
        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
        <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    </hgroup>
<?php endif; ?>

Style your logo container as desired, and you’re done! For an example of the above code in action, check out my Debut starter theme on GitHub.

Courtesy /Source:- http://kwight.ca/blog/adding-a-logo-uploader-to-your-wordpress-site-with-the-theme-customizer/


If you are looking for php code or a plugin for your WordPress that takes a post ID and returns the database record for that post then read on. This is very helpful when you want to show a specific post on your homepage or other pages to get more attention. It allows you to design your homepage or a page with the post(s) that you want to be shown on the page rather than the 10 recent posts that the WordPress automatically chooses for you.

PHP Code Example to Query a WordPress Post

Example 1

The following code will Query the post with post id 26 and Show the title and the content.

<?php
$post_id = 26;
$queried_post = get_post($post_id);
$title = $queried_post->post_title;
echo $title;
echo $queried_post->post_content;
?>

Example 2

The following style could be more useful as it lets the user customise the font easily.

<?php
$post_id = 26;
$queried_post = get_post($post_id);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>

Example 3

Using an Array… The following code will query every post number in ‘thePostIdArray’ and show the title of those posts.

<?php $thePostIdArray = array("28","74", "82", "92"); ?>
<?php $limit = 4 ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); $counter++; ?>
<?php if ( $counter < $limit + 1 ): ?>
<div id="post-<?php the_ID(); ?>">
<?php $post_id = $thePostIdArray[$counter-1]; ?>
<?php $queried_post = get_post($post_id); ?>
<h2><?php echo $queried_post->post_title; ?></h2>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

How to Display the Post Content Like WordPress

When you retrieve the post content from the database you get the unfiltered content. If you want to achieve the same output like WordPress does in its’ posts or pages then you need to apply filter to the content. You can use the following code:

<?php
$post_id = 26;
$queried_post = get_post($post_id);
$content = $queried_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]&gt;', $content);
echo $content;
?>

For a range of all the returned fields that you can use, check the WordPress site here.

Query X Number of Recent Posts

You can use the “wp_get_recent_posts” function to retrieve X number of recent posts and then display them however you want to. Here is an example:

<?php
//Query 5 recent published post in descending order
$args = array( 'numberposts' => '5', 'order' => 'DESC','post_status' => 'publish' );
$recent_posts = wp_get_recent_posts( $args );
//Now lets do something with these posts
foreach( $recent_posts as $recent )
{
    echo 'Post ID: '.$recent["ID"];
    echo 'Post URL: '.get_permalink($recent["ID"]);
    echo 'Post Title: '.$recent["post_title"];
    //Do whatever else you please with this WordPress post
}
?>

Using a Plugin to List all Posts Alphabetically

You can also use the WP Alphabetic Listing WordPress plugin to list all your posts.
Courtesy:-http://www.tipsandtricks-hq.com/query-or-show-a-specific-post-in-wordpress-php-code-example-44