Custom Styles for Sticky, Category, and Tag Posts

The method for putting a very basic WordPress
theme together, which includes a Main Index template that uses the
WordPress Loop. You can use a custom tag to display custom styles for
sticky posts, categories, and tags on your blog. That special tag looks like
this:

<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>

The post_class() section is the coolest part of the template. This tem-
plate tag tells WordPress to insert specific HTML markup in your template
that allows you to use CSS to make custom styles for sticky posts, catego-
ries, and tags.
In Book IV, Chapter 1, we tell you all about how to publish new posts to your blog, including the different options you can set for your blog posts, such as categories, tags, and publishing settings. One of the settings is the Stick This Post to the Front Page setting. In this chapter, we show you how to customstyle those sticky posts — it’s not as messy as it sounds!
For example, say that you publish a post that has the following options set: ✦ Stick this post to the front page.
✦ Filed in a category called WordPress. ✦ Tagged with News.

By having the post_class() tag in the template, WordPress inserts HTML markup that allows you to use CSS to style sticky posts, or posts assigned to specific tags or categories, with different styling than the rest of your posts. WordPress inserts the following HTML markup for your post:

<div class=”post sticky category-wordpress tag-news”>

In Book VI, you can discover CSS selectors and HTML markup, and how they work together to create style and format for your WordPress theme. With the post_class() tag in place, You can now go to your CSS file and define styles for the following CSS selectors:
✦ .post: Use this as the generic style for all posts on your blog. The CSS
for this tag is
.post {background: #ffffff; border: 1px solid silver; padding: 10px;}
A style is created for all posts that have a white background with a thin silver border and 10 pixels of padding space between the post text and the border of the post.
✦ .sticky: You stick a post to your front page to call attention to that
post, so you may want to use different CSS styling to make it stand out
from the rest of the posts on your blog:
.sticky {background: #ffffff; border: 4px solid red; padding: 10px;}
This code creates a style for all posts that have been designated as
‘sticky’ in the post options on the Write Post page to appear on your site with a white background, a thick red border, and 10 pixels of padding space between the post text and border of the post.
✦ .category—wordpress: Because Lisa blogs a lot about WordPress,
her readers may appreciate it if she gives them a visual cue as to which posts on her blog are about that topic. She can do that through CSS by telling WordPress to display a small WordPress icon on the top-right corner of all her posts in the WordPress category:

.category-wordpress {background: url(wordpress-icon.jpg) top right
no-repeat; height: 100px; width: 100px;}
This code inserts a graphic — wordpress-icon.jpg — that’s 100 pixels in height and 100 pixels in width at the top-right corner of every post she assigns to the WordPress category on her blog.
✦ .tag—news: Lisa can style all posts tagged with News the same way she
styles the categories:
.tag-news {background: #f2f2f2; border: 1px solid black; padding: 10px;}

 

This CSS styles all posts tagged with News with a light gray background and a thin black border with 10 pixels of padding between the post text and border of the post.
You can easily use the post-class() tag, combined with CSS, to create dynamic styles for the posts on your blog!

Read More

Comprehension the Framework Requirements

When you can begin blogging with Wordpress, you need to set up your base camp. Doing so includes more than basically downloading and

instating the Wordpress programming. You additionally need to create your area (your web journal location) and your Web hosting administration (the place that houses your website). In spite of the fact that you at first download your Wordpress programming onto your hard drive, you instate it on a Web host.

Getting a Web server and introducing programming on it is something you may

as of recently have done on your site; in which case, you can move onto the following

section. Provided that you haven't instituted Wordpress, you should first recognize numerous

calculates, and adapt to a studying bend, on the grounds that setting up your

write through a hosting administration includes utilizing a few innovations that you

may not feel good with. This section takes you through the rudiments

of the aforementioned innovations, and by the final page of this section, you'll have

Wordpress efficaciously introduced on a Web server with your own particular realm

name.

Read More

The Prevalent Provision of Adobe Reader

Adobe Reader, the  prevalent provision  for review Pdf records crosswise over stages and gadgets is presently ready in the Windows Phone Store for all the Windows Phone 8 clients.

The official Adobe Reader for Windows Phone permits you to gain entrance to an extensive variety of Pdf sorts incorporating the watchword secured reports. The application gives you a chance to view, open and inquiry Pdf records and gives you a chance to zoom in on content or pictures.

The route all through the Pdf substance is smooth and you can utilize the bookmarks to bounce straightforwardly to an area in your Pdf archive. Adobe Reader additionally permits you to tap on the connections in the Pdf record to open joined pages. Moreover, you can rapidly go through substantial records utilizing thumbnails and ultimately, the application gives you a chance to select and duplicate content from a Pdf record to the clipboard.

The official Adobe Reader application for Windows Phone 8 could be downloaded from the Windows Phone Store.

Read More

Using Sidebar Templates

You can create separate sidebar templates for different pages of your site by
using a simple include statement. When you write an include statement,
you’re simply telling WordPress that you want it to include a specific file on
a specific page.
The code that pulls the usual Sidebar template (sidebar.php) into all the
other templates, such as the Main Index template (index.php), looks like
this:

<?php get_sidebar(); ?>

What if you create a page and want to use a sidebar that has different infor-
mation from what you have in the Sidebar template (sidebar.php)? Follow
these steps:
1. Create a new sidebar template in a text editor such as Notepad.
2. Save the file as sidebar2.php.
In Notepad, choose File➪Save. When you’re asked to name the file, type sidebar2.php, and then click Save.
3. Upload sidebar2.php to your Themes folder on your Web server.

See Book II, Chapter 2 for FTP information, and review Book VI for infor-
mation on how to locate the Themes folder.
The template is now in your list of theme files on the Edit Themes page (log in to your WordPress Dashboard and click Editor in the Appearance drop-down list).
4. To include the sidebar2.php template in one of your page templates,
replace the code:
<?php get_sidebar(); /> with the code <?php get_template_
part(‘sidebar2’); ?> (which calls in a template you’ve created within your theme).

By using that get_template_part function, you can include virtually any
file in any of your WordPress templates. You can use this method to create
footer templates for pages on your site, for example. First, create a new tem-
plate that has the filename footer2.php. Then locate the following code in
your template:

<?php get_footer(); ?>

and replace it with this code:

<?php get_template_part(‘footer2’); ?>

You can do multiple things with WordPress to extend it beyond the blog.
The few practical examples in this chapter that use the default Twenty Ten
theme show you how to use WordPress to create a fully functional Web site
that has a CMS platform — anything from the smallest personal site to a
large business site.

Read More

Adding the tag

When you have the category ID number in hand, you’re ready to add the <query_post> tag to your template.

Here are two parameters that you can use with the <query_posts> tag:

✦ showposts=X: This parameter tells WordPress how many posts you
want to display. If you want to display only three posts, enter show-
posts=3.
✦ cat=X: This parameter tells WordPress that you want to pull posts from
the category with this specific ID number. If the ID category is 40, enter
cat=40.
Follow these steps to add the <query_post> tag to your template:

1. Click Editor in the Appearance drop-down list.
The Edit Themes page opens.
2. Click the template in which you want to display the content.
If you want to display content in a sidebar, for example, choose the Sidebar template: sidebar.php.
3. Locate the ending </ul> tag at the bottom of the template for the
theme you’re using.
If you’re using the Twenty Ten theme, the ending </ul> tag is the second-to-last line.
4. Type the following code directly above the ending </ul> tag:
<?php query_posts(‘showposts=3&cat=40’); ?>
<h2>Type Your Desired Title Here</h2>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<strong><a href=”<?php the_permalink() ?>” rel=”bookmark”
title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_ title(); ?></a></strong>
<?php the_excerpt();endwhile;endif; ?>

In the first line, you indicate the following: showposts=3&cat=40. You

can change these numbers to suit your specific needs. Just change 3 to
whatever number of posts you want to display (there’s no limit!) and
change 40 to the specific category ID number that you want to use.
5. Click the Update File button.
The changes you just made are saved to the sidebar.php template.

Read More

Finding the category ID number

You can’t easily find the unique ID number for a category unless you know where to look. To locate it, follow these steps:
1. Click Categories in the Posts drop-down list.
The Categories page opens.
2. Hover your mouse over the name of the category for which you need
the ID number.
The category ID number appears in the status bar of your browser.
Figure 6-5 shows the category ID in a browser’s status bar. (Mozilla
Firefox, Internet Explorer, and Safari have similar status bars.) The last part of the URL displayed in the status bar is tag_ID=1, which means that 1 is the ID for this Uncategorized category

Read More

Pulling in Content from a Single Category

WordPress makes it possible to pull in very specific types of content on your
Web site through the <query_posts> template tag. If you place this tem-
plate tag before The Loop (see Book VI), it lets you specify which category
you want to pull information from. If you have a category called WordPress

and you want to display the last three posts from that category — on your front page, in your blog sidebar, or somewhere else on your site — you can use this template tag.

The <query_posts> template tag has several parameters that let you dis-
play different types of content, such as posts in specific categories and con-
tent from specific pages/posts or dates in your blog archives. The
<query_posts> tag lets you pass so many variables and parameters that
we just can’t list all the possibilities. Instead, you can visit this page in the
WordPress Codex and read about the options available with this tag:
http://codex.wordpress.org/Template_Tags/query_posts.
First, you have to find the ID number for the category you want to use; then you have to tell WordPress how to display the content by using the <query_posts> tag.

Read More

Creating a Template for Each Post Category

You don’t have to limit yourself to creating a static-page template for your
site. You can use specific templates for the categories you’ve created on
your blog (which we talk about in Book III, Chapter 7) and create unique sec-
tions for your site, as Lisa did (with an espresso chaser, of course).
Figure 6-4 shows Lisa’s design portfolio. Design Portfolio is the name of a category that she created in the WordPress Dashboard. Instead of using a static page for the display of her portfolio, she used a category template to handle the display of all posts made to the Design Portfolio category.
You can create category templates for all categories in your blog simply by
creating template files that have filenames that correspond to the category
ID numbers, and then uploading those templates to your WordPress themes
directory (see Book VI). Here’s the logic to creating category templates:
✦ A template that has the filename category.php is a catchall for the dis-
play of categories.
✦ Add a dash and the category ID number to the end of the filename
to specify a template for an individual category.

✦ If you don’t have a category.php or category-#.php file, the cat-

egory display gets defined from the Main Index template (index.php).

 

Read More

Creating Different Page Views Using WordPress Templates

The Add New Page page opens, where you can write a new post to your WordPress blog.

1. Click Add New in the Pages drop-down list.

2. Type the title in the Title text box and the page content in the large
text box.
3. Select the page template from the Page Template drop-down list.
By default, the Page Template drop-down list in the Attributes module appears on the right side of the page. You can reposition the modules on this page; see Book III, Chapter 2 for more information.
4. Click the Publish button to save and publish the page to your site.

Figure 6-2 shows the layout of Lisa’s home page on her business site at
www.ewebscapes.com and the information it contains, whereas Figure 6-3
shows the layout and information provided on the Services page at www.
ewebscapes.com/services. Both pages are on the same site, in the same WordPress installation, with different static-page templates to provide different looks, layouts, and sets of information.

A lot of the content in this chapter dips into working with WordPress tem-

plates and themes, a concept that gets introduced, in depth, in Book VI. If
you find the topics in this chapter intimidating at all, then work through

Read More

How to Create a Template

To use a page template, you have to create one. You can create this file in a text-editor program, such as Notepad. (To see how to create a template, flip over to Book VI, which gives you extensive information on WordPress templates and themes.) To create an About page, for example, you can save the template with the name about.php.
When you have your template created, follow these steps to make it part of WordPress:

1. Upload the template file to your WordPress theme folder.
You can find that folder on your Web server in /wp-content/themes.
2. Log in to your WordPress Dashboard and click Editor in the
Appearance drop-down list.
The Edit Themes page opens.
3. Click the about.php template link located on the right side of the
page.
4. Type the Template Name tag directly above the get_header() tem-
plate tag.
The header tag looks like this: <?php get_header(); ?>.

If you’re creating an About Page, the code to create the Template Name looks like this:

<?php
/*
Template Name: About Page
/*
?>
5. Click the Update File button.
The file is saved, and the page refreshes. If you created an About Page template, the about.php template is now called About Page in the template list on the right side of the page.
Figure 6-1 shows the Page template and displays the code needed to define

Read More

Using WordPress Templates

As we explain on the previous posts , a static page contains content that
doesn’t appear on the blog page, but as a separate page within your site.
You can have numerous static pages on your site, and each page can have
a different design, based on the template you create. (Flip to Book VI to find out all about choosing and using templates on your site.) You can create several static-page templates and assign them to specific pages within your site by adding code to the top of the static-page templates.

Here’s the code that appears at the top of the static-page template Lisa uses
for her About Us and Our Blog Designers page at www.ewebscapes.com/
about:

<?php
/*
Template Name: About Page
*/
?>

Using a template on a static page is a two-step process: Upload the template,
and then tell WordPress to use the template by tweaking the page’s code.

In Book VI, you can discover information about Custom Menus, including
how to create different navigation menus for your Web site. You can create
a menu of links that includes all the pages you created in your WordPress
Dashboard. You can display that menu on your Web site by using the
Custom Menus feature.

Read More

Exploring Different Uses for Custom Fields

In this chapter, we use the example of adding your current mood to your
blog posts by using Custom Fields. But you can use Custom Fields to define
all sorts of different data on your posts and pages; you’re limited only by
your imagination when it comes to what kind of data you want to include.
Obviously, we can’t cover every possible use for Custom Fields, but we can give you some ideas that you may want to try out on your own site — at the very least, you can implement some of these ideas just to get yourself into the flow of using Custom Fields, and hopefully they can spark your imagination on what types of data you want to include on your site:
✦ Music: Display the music you’re currently listening to. Use the same
method we describe in this chapter for your current mood, except
create a Custom Field named Music: Use the same code template, just
define the key as: $key=”music”; and alter the wording from My
Current Mood is: to I am Currently Listening to:.
✦ Books: Same as the mood or music Custom Field, you can display what
you’re currently reading by creating a Custom Field named Book and
define the key in the code as $key=”book”;, and then alter the wording
from My Current Mood is: to I Am Currently Reading:.
✦ Weather: Let your readers know what the weather is like in your little
corner of the world by adding your current weather conditions to your
published blog posts. By using the same method that we describe in this
chapter, create a Custom Field named Weather and use the same code
for the template, just define the key as $key=”weather”; and alter the
wording from My Current Mood is: to Current Weather Conditions:.
If you want to get really fancy with your Custom Fields, you can also define an icon for the different metadata displays. For example, using the mood Custom Field, you can add little emoticons (or smiley-face icons that portray mood) after your mood statement to give a visual cue of your mood, as well as a textual one. Follow these steps to add an emoticon to the mood Custom Field that you add in theprevious sections in this chapter:

1. Visit the Posts page in the Dashboard.
2. Click the title of the post that you want to edit.
3. Add a new Custom Field by selecting Enter New from the drop-down
list and entering mood-icon in the Name text box.

4. Click the Add an Image icon above the Post text box to open the

Upload Image window.
Upload an image from your computer by clicking the Select Files button (see Book IV, Chapter 3 for information on uploading images).
5. From the Link URL text box, copy the file URL of the image you
uploaded.
You can see the Add an Image window in Figure 5-6.

6. Click the X in the top-right corner to close the Add an Image window.

7. Paste the Link URL in the Value text box for the mood-icon Name (see

Figure 5-7).
8. Click the Add Custom Field button.
The Name and Key values are saved.
9. Click the Update button.
This step saves the changes in your post and updates it on your site.
10. Update the function code in your template file to include the new
mood icon.
Follow these steps to add that code:

a. Open the Edit Themes page in your Dashboard.

b. Click the Single Page (single.php) file.
The single.php template displays in the text box on the left side of
the page.
c. Locate the code you added for the mood Custom Field.
d. Before the closing </strong> HTML tag, add the following line of
code:
<img src=”<?php $key=”mood-icon”; echo get_post_meta($post->ID, $key,
true); ?>” />
The <img src=” that precedes the Custom Field code is the HTML tag used to display an image on your site. The “ /> code that
appears after the Custom Field code is part of the HTML tag and it closes the <img src=” HTML tag. We changed the $key to indicate that we’re calling the mood-icon Custom Field.
e. Click the Update File button to save your changes.
f. Visit the post on your site to view your new mood icon.
You can see Lisa’s mood icon in Figure 5-8.

The entire snippet of code you add in the preceding steps should look like this, when put all together (be sure to double-check your work!):

<?php if ( get_post_meta($post->ID, ‘mood’, true) ) : ?>
<p><strong>My Current Mood is: <?php $key=”mood”; echo get_post_
meta($post->ID, $key, true); ?> <img src=”<?php $key=”mood-icon”;
echo get_post_meta($post->ID, $key, true); ?>” /></strong></p> <?php endif; ?>

Read More

Getting WordPress to check for your Custom Field

The previous sections show you how to add the necessary code to your
template file to display your Custom Field; however, what if you want to
publish a post on which you don’t want the mood Custom Field to appear?
If you leave your template file as you set it up by following the steps in the
previous sections, even if you don’t add the mood Custom Field, your blog
post displays My Current Mood is: — without a mood because you didn’t
define one.

But you can easily make WordPress check first to see whether the Custom
Field is added. If it finds the Custom Field, WordPress displays your mood; if
it doesn’t find the Custom Field, then WordPress doesn’t display anything.
If you followed along in the previous sections, the code in your template looks like this:

<p><strong>My Current Mood is: <?php $key=”mood”; echo get_post_meta($post->ID,
$key, true); ?></strong></p>

To make WordPress check to see whether the mood Custom Field exists, add this code to the line above your existing code:

<?php if ( get_post_meta($post->ID, ‘mood’, true) ) : ?>

Then add this line of code to the line below your existing code:

<?php endif; ?>

Put together, the lines of code in your template should look like this:

<?php if ( get_post_meta($post->ID, ‘mood’, true) ) : ?>
<p><strong>My Current Mood is: <?php $key=”mood”; echo get_post_meta($post->ID,
$key, true); ?></strong></p>
<?php endif; ?>

The first line is an IF statement and, basically, asks the question: Does the
mood metadata exist for this post? If it does, the data gets displayed. If it
doesn’t, then WordPress skips over the code, ignoring it completely so that
nothing gets displayed for the mood Custom Field. The final line of code
simply puts an end to the IF question. Refer to the “IF, ELSE” sidebar, in this chapter, to see some everyday situations that explain the IF question. Apply this statement to the code you just added to your template and you get:
IF the mood Custom Field exists, then WordPress will display it, or ELSE it won’t.

Read More

Entering the code in the template file

So that you can see how to enter the code in your template file, we use
the default WordPress theme called Twenty Ten. If you’re using a different
theme (and you can find thousands of different WordPress themes avail-
able), then you need to adapt these instructions to your particular theme.
If you really want to follow along in this chapter, activate the Twenty Ten
theme on your site, for now, just so that you can follow along and know that
you’re seeing the same code in the places we describe (you can find informa-
tion on the Twenty Ten theme and how to activate it in Book VI).
We use Lisa’s mood Custom Field as the example here. When you’re done
with these steps, WordPress displays your current mood at the bottom of
the posts to which you’ve added the mood Custom Field. Keep in mind that
this example is just one type of Custom Field that you can add to your posts
(and it’s an easy one for the purposes of introducing you to the concept).

If you’re ready to give it a go, then you’re in luck because you can follow
these steps to add the template tag, along with a little HTML code to make it
look nice, to your theme (these steps assume that you’ve already added the
mood Custom Field to your blog post and have assigned a Value to it):

1. Log in to your WordPress Dashboard.

2. Click Editor in the Appearances drop-down list.
The Edit Themes page loads in the Dashboard, as shown in Figure 5-5.
3. Locate the template files for the Twenty Ten theme.
The available templates are listed on the right side of the Edit Themes page, as shown in Figure 5-5.

4. Click Single Post in the list of templates.

The Single Post (single.php) file opens in the text editor on the left side of the screen, where you can edit the template file.
5. Scroll down and locate the template tag that looks like this: <?php
the_content() ?>.
6. On the new line underneath the preceding one, type: <p><strong>My
Current Mood is:.

<p> and <strong> open the HTML tags for paragraph and bold text, respectively; followed by the words to display in your template (My Current Mood is:).

7. Type the code that we discuss in the preceding section.
<?php $key=”mood”; echo get_post_meta($post->ID, $key, true); ?>
8. Type </strong></p>.
This code closes the HTML tags you opened in Step 6.
9. Click the Update File button.
Located at the bottom of the Edit Themes page, this step saves the
changes you made to the Single Post (single.php) file and reloads
the page with a message that says your changes have been successfully
saved.
10. View your post on your site to see your Custom Field data displayed.
The data should look just like the “My Current Mood is: Happy” shown in Figure 5-3.

The entire code, put together, should look like this in your template:

<p><strong>My Current Mood is: <?php $key=”mood”; echo get_post_meta($post->ID,
$key, true); ?></strong></p>

The code is case sensitive, which means that the words you input for the
Key in your Custom Field need to match case with the $key in the code. For example, if you input mood in the Key field, then the code needs to be lowercase, as well: $key=”mood”, if you attempt to change the case like this: $key=”Mood”, the code will not work.
You have to add this code for the mood Custom Field only one time; after you add the template function code to your template for the mood Custom Field, you can define your current mood in every post you publish to your site by using the Custom Fields interface.

Read More

Adding Custom Fields to Your Template File

If you followed along in theprevious sections and added the mood Custom
Field to your own site, notice that the data doesn’t appear on your site the
way it does on Lisa’s. To get the data to display properly, you must open the
template files and dig into the code a little bit. If the idea of digging into the
code of your template files intimidates you, you can put this section aside
and read up on WordPress themes, template files, and template tags in
Book VI.

You can add Custom Fields, in several ways, to your templates in order to
display the output of the fields you’ve set; we think the easiest way involves
using the get_post_meta(); template tag function, which looks like this:

<?php $key=”NAME”; echo get_post_meta($post->ID, $key, true); ?>

Here’s how that function breaks down:

✦ <?php: Part of the functions begins PHP. (Every template tag or function
needs to first start PHP with <?php. You can read more about basic PHP
in Book II, Chapter 3.)
✦ $key=”NAME”;: Defines the name of the key that you want to appear.
You define the Name when you add the Custom Field to your post.
✦ echo get_post_meta: Grabs the Custom Field data and displays it on
your site.

Book IV
Chapter 5

324 Adding Custom Fields to Your Template File
✦ $post->ID,: A parameter of the get_post_meta function that
dynamically defines the specific ID of the post being displayed so that WordPress knows which metadata to display.
✦ $key,: A parameter of the get_post_meta function that gets the
value of the Custom Field based on the name, as defined in the
$key=”NAME”; setting earlier in the code string.
✦ true);: A parameter of the get_post_meta function that tells
WordPress to return a single result, rather than multiple results. (By
default, this parameter is set to true; typically, don’t change it unless
you’re using multiple definitions in the Value setting of your Custom
Field.)
✦ ?>: Ends the PHP function.

Based on the preceding code, to make our mood Custom Field example, you define the key name as mood (replace the NAME in the preceding code with the word mood); it looks like this:

<?php $key=”mood”; echo get_post_meta($post->ID, $key, true); ?>

The part of the functions that says $key=”mood”; tells WordPress to return the Value for the Custom Field with the Name field of mood.

Read More