• Menu
  • Skip to right header navigation
  • Skip to content
  • Skip to secondary navigation

WPDesigner

WordPress Themes, Blog Design, and Web Development

  • News
  • Tutorials
    • Theme Development
    • WordPress Tips
  • Resources
  • Reviews
    • Hosting Reviews
  • Contests
  • WWMD
  • Search
  • News
  • Tutorials
    • Theme Development
    • WordPress Tips
  • Resources
  • Reviews
    • Hosting Reviews
  • Contests
  • WWMD
  • Search
  • About
  • Write for us
  • Archives
  • Contributions
  • Privacy Policy
  • Feedback
  • Terms & Conditions

Tutorials

WPD Home Page

Bring Life to Your Blog Using Conditional Tags

Have you ever seen a website that has certain content on the sidebar of the home page, but a different sidebar is displayed when you’re looking at a single page? How about nice little welcome messages that go away as you venture into the site? It’s a pretty nice effect, and it’s quite simple to pull off. It does, however, require you to know a little about PHP, but fear not; if you only know HTML, even just a little, you might be able to get by with this trick.

On the Home page, you see featured themes:
WPD Home Page
…on single posts, you don’t:
WPD Post
The function that allows one to make such magical pages as those described above is called a conditional tag. This tag, as the name implies, tells the page to do things under certain conditions. There are many conditional tags, but the most popular (in my experience) is is_page.

(The full list of conditional tags is on WordPress.org.)

Home Page

The beauty behind the is_page function is that it can be executed many ways. Let’s say you want to welcome your visitors to your site on the home page, but you want that message to go away once they delve beyond that front page. It’s actually quite simple. Use the following code (and type it out; don’t be a copy-and-paster):

<?php if(is_page(’home’) ) { ?>
<p>Welcome to my website. I do hope you enjoy your visit.</p>
<?php } ?>

Note: This is the proper formatting for WordPress 2.1+. Prior versions use

is_home(”)

instead of

is_page(’home’)

In layman’s terms, what we’re saying here is, “If we’re on the home page, show a message that says: ‘Welcome to my website. I do hope you enjoy your visit.’” Everything between

{

and

}

is what the function will tell the page to display as long as the condition is met.

Of course, you can’t just stick that code anywhere. You probably don’t want to put conditional formatting into a post or page because, well, that just doesn’t make any sense. What you’d want to do instead, would be to insert the code into your theme’s index.php file, probably right before the

<?php if(have_posts()) : ?>

line.
The is_page function is excellent for welcome messages and other things that you want to appear specifically on the home page of your site, but it’s perhaps even more useful for formatting sidebars to perfection.

Sidebars

Just as we inserted code into the index.php file, we’ll do the same for sidebar.php. What’s great about formatting the sidebar is that it’s so incredibly easy to do because you can refer to either the page ID, the page title, or the page slug. Here’s an example of a widget-ready sidebar with a conditional tag:

<div id=”sidebar”>
<ul>
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

<?php if(is_page(’About Us’) ) { ?>
<li><h3>Staff</h3>
<ul><li>John Johnson</li>
<li>Rich Richardson</li>
<li>Arthur McArthur</li></ul>
<?php } ?>

<li><h3>Links</h3>
<ul>Blah blah blah</ul></li>

<?php endif; ?>
</ul>
</div>

The only part that’s different than a standard sidebar.php file is

<?php if(is_page(’About Us’) ) { ?>

and the

<?php } ?>

afterwards.

Basically, what this page is saying is, “If there are widgets, use ‘em; otherwise, show the About Us section and the Links section, but only show the About Us stuff if we’re on the About Us page.”

Pretty easy, right? I bet now you want to implement these conditional tags into widgets. Let’s do it.

Widgets

First, you’ll need to download a plugin called Executable PHP Widget by Otto. This plugin acts just like Text Widgets, but it allows you to include PHP functions as well.

Once installed and activated, go to your Sidebar Widgets page and add a PHP widget to your sidebar. Then, simply leave the title of the widget blank and, in the body, insert the same PHP code we used above to look like so:
Conditional Formatting with Execute PHP Widget

Note: I changed the

<h3>

tags to

<h2>

tags to maintain consistency, since that’s what WordPress defaults to for its sidebar section titles.

By default, Widgets add <h2 class=”widgettitle”> tags around the title of a sidebar section. That’s not a big deal unless your theme’s CSS has a specific line-height attribute; if so, what you’ll probably notice is that there’s a gap between the bottom of any other widget and the top of this conditional tag PHP widget. That’s because even blank titles get <h2> tags. To avoid that extra space, you might want to try adding this line to your style.css file like so:

h2.widgettitle {
line-height: 0;
}

To learn more about conditional tags, refer to the WordPress Codex. Have fun!

Bring Life to Your Blog Using Conditional TagsRead More

overlapping_tabs

How to create overlapping tabs

First, design the tabs; I used Photoshop 7.0. Before any slicing, saving, or coding, here’s my tab design:

overlapping_tabs

In the example above, no matter what the lengths of the links are, they all sit within tabs that have the same width. That’s because I plan on coding stretchable tabs. Once my tabs are coded, they’ll adjust themselves to the right widths.

What can you expect from looking at the design alone?
As a coder, I see:

  • a Verdana font or typeface
  • a bold 12 pixel font size
  • non-underlined links
  • two tab layers: blue and white

What I’m saying to myself:

  • Alright, I hate coding horizontal menus (just kidding).
  • I have to code the blue layer first.
  • Menu link color is white.
  • I have to code the white layer second.
  • Menu link color for white layer is black.
  • White layer indicate whether a tab is current.
  • A current tab indicate which page the user is looking at.
  • Forget the user! The user suck! Rock on animated GIFs! (just kidding…again)

Before Coding

I need to split the design up and save the images first. Here are my images:

navtab

I named it navtab.gif (navigation tab). This image is the backbone of my tabs, the middle.

navtab_first

navtab_first.gif – Notice the beginning of the overlapping tabs, the left side of the first tab is different from the rest. This image is it.

navtab_last

navtab_last.gif – The background image for the last tab.

navtab_current

navtab_current.gif – We’re starting the cycle all over again. This time, it’s for the white layer. This image is much shorter than the navtab.gif image because once you get to the white area, there’s no detail to worry about. You can perpetuate the white space by using a white background color. For navtab.gif, there is detail so you can’t simply use a background color. If you didn’t need to worry about details for navtab.gif, then generally speaking, it would have a never ending width, which means your links could be as lengthy as you like them to be.

navtab_current_left

navtab_current_left.gif – This is the normal left side of a current tab.

navtab_current_first

navtab_current_first.gif – The left side of a current tab in the first position.

navtab_current_last

navtab_current_last.gif – Just like navtab_current.gif, but it’s for the very last tab.

All together, there are seven small images to piece together. Let’s piece the navtab_current_left.gif and navtab_current.gif images together. We get:

navtab_current_leftnavtab_current

Coding

Before we code it, here’s what the whole menu and each tab actually look like if you stretch it to clearly see what each tab is consist of:

overlapping_tabs_stretched

As you can see above, the first and last tabs are different.

Here are the codes I used for the overlapping tabs on Wpdesigner: (It will not work if you copy and paste the codes.)

<div class=”firstmenu”>

<ul>
<li class=”first” <?php if (is_home()) { echo “id=”firstcurrent”"; } ?>>
<a href=”<?php bloginfo(’url’) ?>”>Home</a>
</li>

<li <?php if (is_page(’2′)) { echo “id=”current”"; } ?>>
<a href=”<?php echo get_permalink(’2′); ?>”>About</a>
</li>

<li <?php if (is_page(’advertise’)) { echo “id=”current”"; } ?>>
<a href=”<?php bloginfo(’url’); ?>/advertise/”>Advertise</a>
</li>

<li class=”last” <?php if (is_page(’feedback’)) { echo ” id=”lastcurrent”"; } ?>>
<a href=”<?php bloginfo(’url’); ?>/feedback/”>Contact</a>
</li>
</ul>

</div>

What just happened?

  • I started a DIV tag with a class named, firstmenu.
  • Under the DIV, I started an un-ordered list (UL) tag.
  • Under that UL, I started four sets of list-item (LI) tags. Each of those four is a tab.
  • Within each tab is the opening <a> and closing </a> link (A) tags.
  • Between each set of link tags is a link title. For examples: Home, About, Advertise, Contact.
  • After the list-items or tabs, I closed the un-ordered list with
    </ul>

    .

  • After closing the un-ordered list, I closed the firstmenu DIV with
    </div>

    .

To allow the first and last tabs to be different and look different, I added

class=”first”

to the first set of list-item (LI) tags and

class=”last”

to the last set of list-item tags.

To style for the white layer or current tabs, I told each tab to add

id=”current”

to its opening list-item (LI) tag. For example, if you were at the About page. The About tab list-item (LI) tag would change from

<li>

to

<li id=”current”>

.

To allow the first and last tabs to be different and appear as current tabs at the same time. I told the first tab to add

id=”firstcurrent”

to its list-item if the user was at the home page. I told the last tab to add

id=”lastcurrent”

to its list-item if the user was at the Contact or feedback page.

Below are some more examples of what all the PHP conditions do for the tabs:

Basic:

<ul>
<li class=”first”>Home</li>
<li>About</li>
<li>Advertise</li>
<li class=”last”>Contact</li>
</ul>

If you are at the home page:

<ul>
<li class=”first” id=”firstcurrent”>Home</li>
<li>About</li>
<li>Advertise</li>
<li class=”last”>Contact</li>
</ul>

If you are at the About page:

<ul>
<li class=”first”>Home</li>
<li id=”current”>About</li>
<li>Advertise</li>
<li class=”last”>Contact</li>
</ul>

If you are at the Contact page:

<ul>
<li class=”first”>Home</li>
<li>About</li>
<li>Advertise</li>
<li class=”last” id=”lastcurrent”>Contact</li>
</ul>

Styling

Styling overlapping tabs vary from blog to blog. The following CSS codes are the styles I used for Wpdesigner. They’re listed in a step-by-step order so they’re self-explanatory. If you’re confused about any of them. Use W3schools as your CSS guide.

.firstmenu{
float: left;
width: 970px;
background: url(images/bg_firstmenu.jpg) no-repeat;
}

.firstmenu ul{
list-style-type: none;
margin: 0;
padding: 20px 20px 0 20px;
}

.firstmenu ul li{
float: left;
margin: 0 20px 0 0;
background: url(images/navtab.gif) no-repeat right top;
}

.firstmenu ul li a{
display: block;
padding: 8px 48px 8px 10px;
font-weight: bold;
text-decoration: none;
color: #fff;
}

.firstmenu ul li a:hover{
text-decoration: underline;
}

.firstmenu ul li.first a{
padding: 8px 48px 8px 39px;
background: url(images/navtab_first.gif) no-repeat;
}

.firstmenu ul li.last{
background: url(images/navtab_last.gif) no-repeat right top;
}

.firstmenu ul li.last a{
padding: 8px 39px 8px 10px;
}

.firstmenu ul li#firstcurrent{
background: #fff url(images/navtab_current.gif) no-repeat right top;
}

.firstmenu ul li#firstcurrent a{
background: url(images/navtab_current_first.gif) no-repeat;
color: #000;
}

.firstmenu ul li#current{
margin-left: -38px;
background: #fff url(images/navtab_current.gif) no-repeat right top;
}

.firstmenu ul li#current a{
padding: 8px 48px;
background: url(images/navtab_current_left.gif) no-repeat;
color: #000;
}

.firstmenu ul li#lastcurrent{
margin-left: -38px;
background: #fff url(images/navtab_current_last.gif) no-repeat right top;
}

.firstmenu ul li#lastcurrent a{
padding: 8px 39px 8px 48px;
background: url(images/navtab_current_left.gif) no-repeat;
color: #000;
}

Conclusion

  • The normal overlapping tabs don’t actually overlap until you highlight your menu with a current tab. The overlapping look is an illusion.
  • Unlike the Sliding Doors of CSS, overlapping tabs has to be hard-coded to allow room for unique classes and IDs like first, last, firstcurrent, and lastcurrent. Unless, you really know PHP and are able to modify the wp_list_pages() function to integrate overlapping tabs with wp_list_pages().
  • Overlapping tabs are difficult and time-consuming to implement, but the effect is well worth it.

Are you going to use overlapping tabs anytime soon? Don’t tell me I spent three hours on this tutorial for nothing.

How to create overlapping tabsRead More

too narrow

Web Typography: Column Widths

This is the first in a series of tutorials on how to increase the readability of your web design using available typographic knowledge.

As noted previously, fluid or liquid designs can aid tremendously in the design of a page. But if you’ve ever tried to follow a long discourse that someone has posted on an internet forum, you quickly realize the major disadvantage:

It’s hard to read.

Column widths, or their “measure” in design-speak, have a tremendous impact on the readability of a particular design. While no hard and fast rules exist, there are two not-exactly-rules that you can follow to make your designs as readable as the daily news.

Non-rule #1

Don’t make your column measure too short.

Easy, right? But why? You first have to analyze how we read the English language. We read left to right. Words are aligned horizontally on a baseline that allows our eyes to flow smoothly from word group to word group. Our aim is to aid this normal horizontal rhythm of reading.

If your columns are set too narrow, you break up those word groups more than is necessary, to the extent that they break into individual words. This slows down the understanding and the comprehension of the text, making it harder to read.

too narrow

And heaven forbid that you set a narrow column justified because the uneven breaks created in a justified text are quite possibly the worst thing you can do for the readability of your column.

too-narrow-justified

Non-rule #2

Don’t make your column measures too long.

As discussed above, long column widths are the bane of forums around the globe, but why?

What happens when a line is too long is that we have difficulties finding the start of the next line because our eye has to travel too far.

We read top to bottom as well as left to right, so we jump down a line back to the left hand side to start again when we reach the end of a line of text. Have you ever skipped a line when reading something and had to start over? Odds are that the column was too long. The delineation between the end of one line and the beginning of the next was not made clear enough by the designer.

Another thing that happens when your column is too wide is that the even flow of left to right can be disrupted by the patterns set by the text. With insufficient leading, or line-spacing, we can tend to lose our place in the sentence by being distracted by the words in the lines above or below.

too-long

Your job is to make it obvious where one line ends and the other begins, and too large of column widths makes this difficult.

Set the line length according to the size of the primary typeface used for text matter.

What type size have you specified? The larger it is, the more legible it should be, up to a certain point. Given the proper line-spacing, which will be covered in the next tutorial, you can effectively allow longer column widths than would otherwise be possible with a smaller typeface.

Notice how the text below, although as wide as the examples above, is easily read.

large-text

Set the line length according to the amount of text used.

Are you writing a novel? Or is all of your content going to be single line blurbs? A few lines of text set very wide can be easily read.

The example below is easy to read because even though the measure is large for the text, our eyes can easily tell where they are going without difficulty.

single-lines

If this were to be much more text, like the example below, it would be very hard to read.

multi-lines

Set your column measure according to the content.

Is your content technical data that requires heavy concentration or a narrative that allows for contemplation and a slower pace? If you open your newspaper, you will notice that the Opinions section typically has larger column widths than Page 1. That is because each Op piece is meant to be read slowly and digested. Page 1 is meant to be read fast, for instant information communication.

These are both degrees of “normal” column widths, so don’t get carried away.

Color affects how long you can make a line.

Color contrasts effects how fast the eye tires when reading. Too much or too little contrast can cause fatigue, thus presenting the need for a narrower column. I’ll cover more of the readability issues of color in a later tutorial.

Breaking up your text using subheads, dropcaps, and the like allows you to use longer column measures.

Newspapers again use this to great effect. Take away the big bold headings, the bold subheads, the pull-quotes, etc., and what do you have? A big hunk of boring gray text. The rule in newspapers is to never have a section of text larger than a dollar bill that isn’t touching an image, a heading, or something. Anything to break up the text will make it more readable.

Breaking up the text accomplishes two things. One, it makes your paragraphs smaller, making the principle stated above about the amount of text more relevant. Two, it gives the reader more opportunity to “enter the text,” meaning it gives the reader more places to start. This help their eyes with their navigation, meaning that the text is less tiring and easier to read.

Leading, or line-spacing, greatly effects your column width.

I’ll go into line-spacing in another tutorial, but suffice it to say that greater line-spacing allows for wider columns. The following examples differ only in their line-spacing:

Example 1 – Bad

line-spacing-small

Example 2 – Good

line-spacing-larger

According to Robert Bringhurst in his Elements of Typographic Style, § 2.1.2, widely regarded as the Bible of typography:

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”

As simple as they may appear, column widths play an important part in the readability of text, and thus must play an important part in the creation of our designs. Stay tuned for more tutorials on the theory behind Web Typography.

Web Typography: Column WidthsRead More

firstexid

Styling Individual Posts Using the_ID

How many times have you typed up a post and published it, only to wish that you could style that post just a little differently than the others? One example might be a special announcement post that maybe you wanted to highlight with a unique background color. Well, we are going to take a look at one method of doing this in WordPress.

Before we get started on the details I’d like to direct you to a short read in the WordPress documentation on the

<?php the_ID(); ?>

tag. I’ll wait…

Welcome back! Having read that maybe you noticed something interesting about one of the examples given for the tags usage. This tag can be used as a unique anchor identifier for each post. It can be used anywhere that you can place an ID or CLASS. Take the example they demonstrated:

firstexid

I’ve highlighted the important section above. The example headline has been given a unique attribute ID using the posts numerical ID within the name so that we can reference it individually within a stylesheet.

Now that we’ve seen that let’s look at an example using a common theme that you can reference. On a default install of WordPress, you should have Kubrick installed. Log into your WordPress Admin. Now go to Presentation: Theme Editor: Select Kubrick in the drop-down menu: Main Index Template. If you scroll down while browsing the index you should see the following:

intropost_id

We see the familiar tag again and this time it is styling the post as a whole rather then an individual headline. How does this look when we publish? Kind of like this:

afterpublishing

Notice the unique ID of post-150. Each post that is published will have its own number (ie. 151, 152, 153, etc.) corresponding to that individual post. Now, all we need to do is style it. To do this just open up your stylesheet and reference that attribute within the stylesheet. So in the case of Kubrick it could look something like this:

#post-150 { background: #113355; font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif; }

You could even style any specific headlines within the above ID for that post like so:

#post-150 h2 {font-family: Georgia, Verdana, Arial; font-size: 1.2em; }

One last note in regards to using this when creating your templates. In XHTML, the ID attribute must not start with a digit. Since

the_ID

returns the post ID as number, you should include at least one alphabetical character before using it in an ID attribute, hence the use of “post” within most templates.

Well, that’s it for now. We are going to come back to this later and take a look at a more flexible way of styling individual posts because as you can imagine, your stylesheet could get quite bloated if you styled a large amount of posts using this method. But it does work great for those few posts that you need styled differently and I encourage you to give it a try.

Styling Individual Posts Using the_IDRead More

Equal Height Columns WordPress Theme

What do you do when

height: 100%

doesn’t work? The safest and easiest way to get your main column and sidebar column to match, height-wise, is to use a background image in order to hide the actual lengths of the columns.

<div id=”wrapper”>
<div class=”maincolumn”> content </div>
<div class=”sidebar”> sidebar content </div>
</div>

Apply a background image to the wrapper

div

using CSS:

#wrapper{
background: url(images/background_image_name.gif);
}

That background image codes should go in your

style.css

file. The example above assumes that your background image sits in the folder named, images.

To create or design the background image, use a design software like Photoshop. (That’s what I use.) Create a new file with a width that matches the sum of the main column and sidebar column widths. For example, if your main column is 500px (5 inches) wide and the sidebar is 200px wide, and there’s no margins in between the two columns, then your overall width is 700px. That’s how wide your background image should be.

Once the background image is applied to the wrapper

div

, it’ll repeat itself over and over again to cover the entire length of both columns. So really, all you would need, in this case, is a 700px (width) by 1px (height) background image.

Note: If you use float left or float right for any or both main and sidebar columns, you must use

float

for the wrapper

div

too. Otherwise, your background image for the wrapper

div

will not display correctly.

Equal Height Columns WordPress ThemeRead More

WPDesigner themes

One Way To Use Custom Fields

This is not a beginner level tutorial. If you don’t know anything about XHTML and PHP, you will get lost.

Recently, I learned how to manipulate custom fields. Today, I finally switched from excerpts to custom fields to display theme thumbnails on Wpdesigner. I’m talking about the three theme blocks in the header. Each block has an image, the theme’s name, theme author’s name and link, and the download page link.

WPDesigner themes

Before making the switch

Here’s a normal theme post:

Theme Post

Here’s its optional excerpt information, which would be what I’d use to display a theme thumbnail block:

theme-post-excerpt

And here’s the source codes for displaying the excerpts.

<?php if(is_home()) { ?>
<?php $thumbnailexcerpts = get_posts('numberposts=3&category=2'); foreach($thumbnailexcerpts as $post) : setup_postdata($post); ?>
<div class="thumbnail"><div class="thumbnailwrap">
	<?php the_excerpt(); ?>
</div></div>
 <?php endforeach; ?>
<?php } ?>

As you can tell, each excerpt is unique. If I were to continue using excerpts to store theme information, a decision to change up the theme thumbnail block template (even a small change) would make the change a daunting task. I would have to edit every excerpt.

After the switch

To some recent theme posts, I added the following custom fields or custom field keys: Theme Name, Theme Author, Theme Author Link, Download Page, and Theme Thumbnail. The keys’ values depend on the theme’s information.

custom_fields

And here’s the source codes for displaying custom fields.

<?php if(is_home()) { ?>
<?php $thumbnailexcerpts = get_posts('numberposts=3&category=2'); foreach($thumbnailexcerpts as $post) : setup_postdata($post); ?>
	<div class="thumbnail"><div class="thumbnailwrap">
<p><a href="<?php the_permalink(); ?>" title="<?php echo get_post_meta($post->ID, "Theme Name", true); ?> details page">
<img src="<?php echo get_post_meta($post->ID, "Theme Thumbnail", true); ?>" alt="<?php echo get_post_meta($post->ID, "Theme Name", true); ?> thumbnail" /></a>
<strong><?php echo get_post_meta($post->ID, "Theme Name", true); ?></strong><br />
Author: <a href="<?php echo get_post_meta($post->ID, "Theme Author Link", true); ?>" title="Author's link"><?php echo get_post_meta($post->ID, "Theme Author", true); ?></a><br />
<a href="<?php echo get_post_meta($post->ID, "Download Page", true); ?>" title="Download page">Download page</a>
</p>
	</div></div>
 <?php endforeach; ?>
<?php } ?>

The Big Difference

Now, I can easily manipulate the custom field values to display the themes’ information. Also, I can easily make template changes that would affect every thumbnail block. For example, if I wanted to display the download page link before the author’s link, I would change the source codes to display the download page link first, instead of having to edit one excerpt at the time to get all the thumbnail blocks to match each other. Imagine having to edit 1000 excerpts instead of switching some source codes around. Big difference huh?

Why I switched to custom fields

Wpdesigner only display the three most recent theme posts in the header so why bother with switching to custom fields? I have to. My goal is to change up the WordPress theme category page to display only theme thumbnail blocks. That way, you’ll be able to browse through more themes per category page.

Here’s a mock-up example:

future_category_page

One Way To Use Custom FieldsRead More

  • « Previous Page
  • Page 1
  • Page 2
  • Page 3
  • Page 4
  • Page 5
  • …
  • Page 9
  • Next Page »
  • About
  • Write for us
  • Archives
  • Contributions
  • Privacy Policy
  • Feedback
  • Terms & Conditions

Site Footer

© 2019 · WPDesigner · All Rights Reserved.
We are not affiliated with Automattic or WordPress.