Hướng dẫn tạo themes cho wordpress part 19 pdf

Getting startedYou need to have a basic theme containing a functions.php file, and a sidebar file such as sidebar.php created for this recipe.. Open or create your theme's functions.php

Getting started

You need to have a basic theme containing a functions.php file, and a sidebar file such as

sidebar.php created for this recipe You also need to know where you would like to place the listing of the most discussed authors In this example, we will be displaying the data in

a sidebar

How to do it

First, we need to create a custom template tag We'll call the template tag get_most_

discussed_authors, and have it accept a single parameter that determines the number

of results to return Open or create your theme's functions.php file, and define the function

as follows:

function get_most_discussed_authors($limit = 3) {

global $wpdb;

return $wpdb->get_results( $wpdb->prepare(

"SELECT COUNT({$wpdb->comments}.comment_ID) as

number_comments,

{$wpdb->users}.ID as user_ID

FROM {$wpdb->comments}, {$wpdb->users}, {$wpdb->posts}

WHERE {$wpdb->users}.ID = {$wpdb->posts}.post_author

AND {$wpdb->posts}.ID = {$wpdb->comments}.comment_post_ID

GROUP BY {$wpdb->users}.ID

ORDER BY number_comments DESC

LIMIT %d", $limit));

}

Now we need to use this function to display information to visitors Borrowing from the recipe

Listing all published authors on a site, we put the following code in one of our sidebars:

<ul>

<li>Most Discussed Authors

<ul>

<?php

$discussed = get_most_discussed_authors();

foreach($discussed as $item) {

$user_ID = $item->user_ID;

$num_comments = $item->number_comments;

$url = get_author_posts_url($user_ID);

?>

<?php printf( _n

( '%d comment', '%d comments', $num_comments ),

$num_comments ); ?>

</a>

</li>

<?php

}

?>

</ul>

</li>

</ul>

Save the file, and then upload it to the current theme folder on your server

If you've done everything correctly, you should have an output that looks something like the following screenshot of the sidebar:

How it works

As with the previous two recipes, we've created a template tag that basically acts as a

delegate for a raw SQL call, by using the $wpdb object that WordPress provides In this recipe, the get_most_discussed_authors function calls the wpdb class's get_results

method This method returns an array of objects, including the authors, their related

posts, and the comments attached to those posts, formed from the rows returned from

a database call

In our custom function, each item returned in the array has two properties: user_ID and

number_comments When iterating over the results from our call to get_most_discussed_ authors, we use these two properties when displaying the nice list of author names and the amount of comments that their posts have received

See also

Listing all published authors on a site.



Adding a custom user field to display an author's Twitter link

We can use the data that describes the author, their "metadata", to display a variety of information, in most cases, the same as that retrieved by using $authordata or user_ data, as seen in previous examples in this chapter However, sometimes a plugin gathers additional custom metadata such as an IM username or a Twitter name In that situation, applying a special template tag called the_author_metadata to an author page is

very useful

In this example, we will create a custom user field for the user profile page in the WordPress control panel, and then use the Twitter metadata that it provides to display the author's Twitter username on the author page

Getting started

You will need an author.php file in a modern 2.9 compatible WordPress theme, and a Twitter account (www.twitter.com)

How to do it

Open up your functions.php file and insert the following code, in order to create the custom field:

add_action( 'show_user_profile', 'my_show_extra_profile_fields' ); add_action( 'edit_user_profile', 'my_show_extra_profile_fields' ); function my_show_extra_profile_fields( $user ) { ?>

<h3>Extra profile information</h3>

<table class="form-table">

<tr><th><label for="twitter">Twitter</label></th>

<td>

<input type="text" name="twitter" id="twitter" value=

"<?php echo esc_attr( get_the_author_meta

( 'twitter', $user->ID ) ); ?>" class="regular-text" />

<br />

<span class="description">Twitter username</span>

</td>

</tr>

</table>

<?php }

Now we need to insert code into functions.php so that the data entered into the custom field will be saved Enter the following code directly below the code in step 1:

//save the custom field

add_action( 'personal_options_update', 'my_save_extra_profile_fields' );

add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );

function my_save_extra_profile_fields( $user_id ) {

if ( !current_user_can( 'edit_user', $user_id ) )

return false;

update_usermeta( $user_id, 'twitter', $_POST['twitter'] );}

Save the functions.php file, and then upload it to your server You can now see the custom field area within your author profile, and can use it It should look like the example shown in the screenshot below:

Next, a function to get the Twitter ID from the user profile needs to be created Insert the following code into functions.php:

//author box function

function my_author_box() { ?>

<div class="author-profile vcard">

<?php if ( get_the_author_meta( 'twitter' ) ) { ?>

<p class="twitter clear">

<a href="http://twitter.com/<?php the_author_meta

( 'twitter' ); ?>"

title="Follow <?php the_author_meta

( 'display_name' ); ?> on Twitter">

Follow <?php the_author_meta

( 'display_name' ); ?> on Twitter

</a>

</p>

<?php } // End check for twitter ?></div><?php

Finally, we need to place a tag in author.php to call the my_author_box() function and display the Follow on Twitter link:

<div id="authorinfo">

<strong>Author Email:</strong>

<a href="mailto:<?php echo antispambot($curauth->user_email); ?>">Contact Author</a>

<?php my_author_box(); ?>

</div>

Save the functions.php file and the author.php file, and then upload them to your server View the author page in your browser, and you should see a Follow link similar to the one shown in the screenshot below:

How it works

First, the add_action( 'show_user_profile', 'my_show_extra_profile_

fields' ); and add_action( 'edit_user_profile', 'my_show_extra_

profile_fields' ); code was added to functions.php to allow a new custom user field to be created and edited as a part of the user profile form Next, the form field and labels were created within the function my_show_extra_profile_fields( $user ) This added an input box label and description to the WordPress control panel's user profile screen

We then added code to functions.php file, in order to save any data entered into the custom field We then created a function called my_author_box() that used the metadata function get_author_meta() to retrieve data stored in the WordPress database The metadata function the_author_meta() displayed the display name and Twitter username meta information retrieved from the user profile Finally, we added a tag to author.php, in order to call the my_author_box function and print the Follow on Twitter link on the screen

There's more…

You can use the previous example to create custom fields to display other information, including linking to podcasts, bookseller sites, and more

Displaying an image next to the 'Follow' link

If you want to create a custom image, or use the default Twitter follow icon, you can add it to the above code by adding a link to the image in the author box function:

function my_author_box() { ?>

<div class="author-profile vcard">

<?php if ( get_the_author_meta( 'twitter' ) ) { ?>

<p class="twitter clear">

<img src="/images/twitter-link-logo.png"alt="twitter logo"/> <a href="http://twitter.com/<?php the_author_meta

( 'twitter' ); ?>" title="Follow

<?php the_author_meta( 'display_name' ); ?>

on Twitter">Follow <?php the_author_meta

( 'display_name' ); ?> on Twitter</a>

</p><?php } // End check for twitter ?>

</div><?php

}

Adding JavaScript

Effects

In this chapter, we will cover:

Linking to your theme's JavaScript files directly

Adding JavaScript files to your theme programmatically

Adding a bundled library to your theme programmatically

Creating a featured post slider

Making sidebar widgets toggle-able

Adding a font-size toggle

Introduction

In the last couple of years, web users have become quite a bit more sophisticated As this happened, many came to expect a certain level of dynamic interaction with a web page The dynamic element can be many things, the most popular being animating elements

and dynamic content loads

Luckily for developers, this rise in interest in dynamic elements coincided with the maturation

of JavaScript libraries and techniques This makes creating fun and useful interactions on your site simpler

To make things even easier for a WordPress developer, the WordPress package comes

bundled with many popular JavaScript libraries built-in and ready-to-use In this chapter, we'll













Linking to your theme's JavaScript files

directly

The easiest way to include JavaScript functionality in your theme is to link directly to the file from the <head> element of your theme In this recipe, we'll examine how you determine the URL to link to and where to, put the linking element

Getting started

You need to have created a WordPress theme that contains at least a style.css file and an

index.php file

How to do it

First, you're going to create a JavaScript file to link to Open the folder that your theme lives in,

and create a new folder called js This folder exists for the purposes of organization of your JavaScript files

Inside of the js folder, create a new file called my-theme.js Open this file for editing, and insert the following test script:

/*

* Created for test purposes.

*/

alert('This is a test.');

Now you need to link to the JavaScript file from your theme, to ensure that the script is loaded and run To do so, open up the theme file where your <head> element is located This will most likely be header.php

Between the <head> and </head> tags, insert a new line with the following content:

<script type="text/javascript" src="<?php bloginfo('stylesheet_

directory'); ?>/js/my-theme.js"></script>

After doing this, load your WordPress site with your theme active, and you'll be greeted by a dialog box similar to the one pictured in the screenshot below:

How it works

There are two possible uses of an HTML script tag The first is to add JavaScript directly to a page This would look something like the following:

<script type="text/javascript">

alert('This is a test.');

</script>

In this example, the visitor's browser of choice interprets the script as it parses the page, taking whatever action is called for If you followed along in the example, you noticed that the alert appeared before the rest of the page loaded in the browser, and once the visitor clicked

on OK, the alert box disappeared and the page resumed loading

However, in most instances, it is desirable to put JavaScript that is used throughout a site in

a separate file that can be used again and again There are many reasons for this, including smaller overall page size, and the fact that most browsers can—and wil —cache the external file so that it doesn't have to be fetched multiple times for a single site

To specify an external file, we use a <script> tag without any content, and add the src

attribute to tell the browser where to find the file The browser reads the src attribute and attempts to fetch and parse the file located at the specified URL

In this particular case, the src attribute is dynamically-generated by using the bloginfo

function As reviewed in the recipe Displaying the blog name from Chapter 1, the bloginfo

function has a variety of different parameter values that you can use to get different

information Passing stylesheet_directory returns a URL that points to the directory containing your theme's style.css file The URL will often be something in the form

mysite.com/wp-content/themes/my-theme Please note that no trailing slash is included, so you need to include it yourself if necessary

See also

Displaying the blog name

Adding JavaScript files to your theme

programmatically

Although you can certainly link to your JavaScript files directly (and in some cases, you may need to, for one reason or another), the preferred method of generating script tags for your theme is to add references programmatically This allows for the reuse of popular scripts, and



Getting started

You need to have created a WordPress theme that contains at least a style.css file and

an index.php file Inside the template file containing your theme's <head> tag, you need

to call the wp_head function If you have also completed the previous example, open up the

header.php file (or whichever file you placed the <script> tag code in) and remove the code added in the last recipe

How to do it

First, you must create a JavaScript file to link to This file will reside within your theme Open your theme's folder and create a js folder Inside the js folder, create a file called

my-theme.js

Open the my-theme.js file, and insert the following JavaScript, which will produce an alert dialog box on page load:

/*

* Created for test purposes.

*/

alert('This is an enqueue script test.');

Now, open or create your theme's functions.php file In functions.php, add the following code inside a PHP block:

if( !is_admin() ) {

wp_enqueue_script(

'my-theme',

get_bloginfo('stylesheet_directory') '/js/my-theme.js'

);

}

Upload the updated my-theme.js file and functions.php file Go to your WordPress site with your theme enabled, and you'll be greeted with something like the following screenshot,

in your browser: