Tag Archives: custom.css

Important New Article! Tutorial: Customizing Just Your Front Page, Pages or Posts Using Conditional Tags

How many times have you wanted to customize just the Home page, or just one page, or only posts? You’ve heard about Conditional Tags but don’t have a clue how to use them!

Well, you will after reading this new article!

Tutorial: Customizing Just Your Front Page, Pages or Posts Using Conditional Tags” provides all you need to know to be a master of Conditional Tags in your custom_functions.php file. Fully illustrated with code examples, it walks you through using Conditional Tags for the Home and Front pages, posts, and pages. It even shows you how to use CSS on selected pages!

This article will surely become one that you come back to again and again to get ideas for your customizations!

It is filed under the “Tips” section in a new grouping called “Code You Can Use.”

Another Tip! Quickie: Executing CSS in custom_functions.php

Sometimes we need to execute CSS within the PHP of our custom_functions.php file. This article shows you how to use the “style” statement to do so!

Quickie: Executing CSS in custom_functions.php” is a clear and concise article on how to use the same CSS statements as you use in the custom.css file within your custom_functions.php file. It has an example that illustrates the method.

Yet another “Quickie” filed under the “Tips” section in the “Tips” grouping.

Tutorial: Customizing Just Your Front Page, Pages or Posts Using Conditional Tags

There are many times when Thesis users want to apply customizations to just one page or post or to only pages or posts. For example:

  • You want a featured post plugin to appear only on the front or Home page.
  • Only posts should have a particular message following them, and only when the full post is displayed.
  • You need to execute some CSS code on a particular page to make the headlines green.

All these examples call for the use of what are called “Conditional Tags.” As the WordPress Codex says of them:

Conditional Tags can be used … to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches. For example, you might want to display a snippet of text above the series of posts, but only on the main page of your blog.

Conditional Tags are covered fully on a page in the WordPress Codex, which lists Tags for everything from the Home page to author pages.

This article shows you how to use the most common Tags in situations that many people want to use them in.

Basic use of Conditional Tags

Conditional Tags are always used in functions in the custom_functions.php file, and always within if statements.

All of the Conditional Tags covered in this article have the same syntax:

  • The Tag is followed by opening and closing parentheses.
  • If the Tag applies to all pages or posts there is nothing within the parentheses.
  • The condition to be tested is enclosed in quotes within the parentheses if a particular page or post is being called for. Note that the tags testing or the Home or front pages never have parameters.
  • All Conditional Tags evaluate to either “True” or “False.”

For example, the Conditional Tag testing for a page named “Some Page” would look like this: is_page('Some Page'). If it were simply testing that the document is a page rather than a post, it would be written: is_page()

The most commonly used Conditional Tags

The WordPress Codex article has Tags for everything you can imagine, but I find myself using the same ones over and over. They are:

  • is_home() tests whether the document being displayed is the Home page of a blog.
  • is_front_page() tests for the front page of either a blog or a static site, as set on the “Settings > Reading” admin panel. I tend to use this much more than the is_home() Tag since it covers both blogs and static sites.
  • is_page() determines whether the document on the screen is a page or a post. When used with a parameter, it can test for specific pages.
  • is_single() is used when you want to tell whether the document being displayed is a single post. A parameter within the parentheses enables it to test for a particular post.

Tags for the front or Home page

There are many instances when you only want something to appear on the front or Home page of your site. Using the is_front_page() Conditional Tag allows you to do this. As mentioned, I use this Tag in preference to the is_home() Tag, since is_home() tests only for the Home page of a blog, and is_front_page() tests for the front page of either a blog or a static site. I’m lazy!

Note that is_front_page() and is_home() do not take any parameters. Their opening and closing parentheses are always empty!

Say you are using a featured post plugin that you only want displayed on the front page. Following is how you would do it:

function test_for_front_page() {
if (is_front_page()) {
...code for the plugin...
}
}

You can also use this model for anything that you only want to appear on the front page, such as boxes placed above the sidebars, and even swapping headers (more on putting CSS into a function is found below).

The is_single() Tag for posts

The Tag is_single() is used for posts when they are displayed on a single page, as when you click on a blog post’s title on the front page of your blog and it goes to the post’s page.

Instances for the use of this Tag would be:

  • When you want a special message to be displayed at the end of all posts when displayed on their own page.
  • If you want a particular ad to be displayed only on post pages
  • A warning box should be displayed only on one post

Note: Although there is an is_page() Tag for pages (described below), there is no is_post() Tag! Always use is_single() for posts.

Testing for all posts

If you want all posts (and not pages) to have a particular item, use the is_single() Tag without any parameters within the parentheses. The following example would execute its code for all posts:

function test_for_posts() {
if (is_single()) {
...code for all posts...
}
}

Testing for a single post

To test for a certain post, you must put parameters within the parentheses between single quotation marks. Most of the time, I use either the post name or the post’s number (there are other parameters — check the WordPress Codex article for more).

I usually use the post name in the parameter and only use the post number when some character or word in the title causes PHP to complain. (If you don’t know how to find the post number, check out the “Quickie: How to Find a Page or Post’s Number” article.) For example:

function test_for_post() {
if (is_single('Some Post')) {
...code only for this post...
}
}

or if using the post number…

function test_for_post() {
if (is_single('234')) {
...code only for this post...
}
}

Note that when using post names, the name must be exact, with all the capitals, punctuation, etc!

If you want to be absolutely sure that a post is found, you can test for both the name and number by using the PHP “and” logical operator &&. It returns “True” if both the name of the post is “Some Post” and the post number is “234:”

function test_for_post() {
if (is_single('Some Post') && is_single('234')) {
...code only for this post...
}
}

You can also use the array parameter to test for a single post. The following example returns “True” if either the post name is “Some Post” or the post number is “234.” Note that the array parameter has parentheses of its own, and the post number is not put within single quotation marks:

function test_for_post() {
if (is_single(array(234,'Some Post'))) {
...code only for this post...
}
}

When using the array parameter be careful about your parentheses. In the example above you have one pair of parentheses for the if statement, one for the is_single() Tag and another for the array parameter, which means you end up with three closing parentheses at the end of the statement.

Testing for multiple posts

You can also use these methods to test for multiple posts. Say you want to want to display an ad on either of two posts. You would use the PHP logical operator || which means “or.” The following is_single() Tag would evaluate “true” if the post is either named “First Post” or is number “789:”

function test_for_post() {
if (is_single('First Post') || is_single('789')) {
...code for either post...
}
}

Once again, you can use the array parameter, this time for multiple posts. In the following example, we are testing for posts named “First Post,” “Second Post,” and “Third Post.” If the post being tested has any of these names it returns “True.” Note that the post names are enclosed within single quotation marks, and have a comma but no spaces between them:

function test_for_post() {
if (is_single(array('First Post','Second Post','Third Post'))) {
...code for any of these posts...
}
}

The is_page() Tag for pages

The is_page() Tag is used for pages (not posts). Its parameter syntax and uses are the same as for posts, so they will only be mentioned here:

  • Use the is_page() Tag without anything within the parentheses to test for all pages.
  • To test for a single page, you can use the page name within the Tag’s parameters, for example: is_page('Some Page')
  • You can also use the page number to test for a single page: is_page('234')
  • The syntax is the same for testing for multiple posts as for pages, except you use the is_page() Tag instead of the is_single() tag.

This example tests that the document is a page and not something else:

function test_for_any_page() {
if (is_page()) {
...code for all pages...
}
}

The following example tests for a page named “Some Page” and with the page number “234:”

function test_for_page() {
if (is_page('Some Page') && is_single('234')) {
...code only for this page...
}
}

And this example will evaluate as true if any of the pages have one of the names listed:

function test_for_pages() {
if (is_page(array('First Page','Second Page','Third Page'))) {
...code for any of these pages...
}
}

Executing CSS on pages or posts

In the article “Quickie: Executing CSS in custom_functions.php” I show you how to execute CSS within the PHP of your custom_functions.php file. Here is how to do it for just one post using one of the examples above — I’m sure you can figure out how to use it in the other instances covered above:

function test_for_post() {
if (is_single('Some Post')) {
?>
<style type="text/css">
.custom #some_id { background: #000000; }
.custom .some_class { position: relative; }
</style>
<?php
}
}

Conclusion

I hope this article is useful to you and that it will enable you to do things in custom_functions.php that you weren’t able to do before. As always, your comments are welcome. If you want to contact me directly by email, you may click on the “Contact” tab in the menu.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

Quickie: Executing CSS in custom_functions.php

Sometimes we need to execute CSS code within the PHP in our custom_functions.php file. It’s a simple trick! You use the style statement to wrap your CSS in.

Here’s an example for you:

function use_style_statement() {
?>
<style type="text/css">
.custom #some_id { background: #000000; }
.custom .some_class { position: relative; }
</style>
<?php
}

Note these things:

  • You must turn PHP off with the ?> statement before using the style statement and back on with <?php when you are finished.
  • The CSS statements within the style statement are the same as you would use in the custom.css file

Now, isn’t that easy?

I hope you are able to use this quickie in your code! As always, feel free to leave a comment below. If you want to contact me directly by email, just click the “Contact” tab in the menu.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

New Articles for Newbies: Basic Syntax for custom.css and custom_functions.php!

People who are just getting their feet wet with customizations are often daunted by the strange words and punctuation they find in the code for custom.css and custom_functions.php. Even the basic format of the CSS and PHP languages are foreign.

Two new articles just published in the Newbies “Getting Started” section, “Basic CSS Syntax for custom.css” and “Basic PHP Syntax for custom_functions.php” provide just the kind of information newbies need to get a grip on their first adventures with CSS and PHP in Thesis.

Both articles are filled with illustrations of what is being discussed, and are written in clear and concise language. They cover just the what’s needed to work with Thesis and leave the long tutorials to someone else.

The PHP article, in particular, is full of advice for preventing syntax mistakes and troubleshooting errors in the custom_functions.php file. This is because even the smallest syntax error in the PHP code will bring your blog crashing down, preventing access to your blog site, and delivering only a cryptic error message. In a large number of cases — perhaps the majority — the problem is not bad code, but some tiny syntax error.

I have many more articles on tap for Newbies, and am receiving some good suggestions for more. If you would like to see an article on a subject that is puzzling you, please leave a comment or email me directly by clicking the “Contact” button.

Basic CSS Syntax for custom.css

People faced with adding a customization into the custom.css file for the first time are often overwhelmed by the task, even if it’s just a cut-and-paste operation. What are all these strange terms? Are there any rules for the punctuation marks?

And many find that their first attempt at customizations on their own fail because some little punctuation mark or bracket is left out.

The purpose of this article is to give you a basic understanding of the syntax of CSS — how the statements are put together and the punctuation rules. This will help you as you begin to read and try to understand cut-and-paste customizations, as well as when you make customizations on your own. It is not a tutorial in CSS — that would take many, many pages! A good basic online CSS tutorial can be found on the w3schools.com site. It is useful not only for CSS beginners, but as a convenient reference when you’re more experienced.

CSS statements: selector, property, and value

CSS statements are made up of three parts: a selector, a property, and a value. The selector defines an element that you see on the screen, such as text or a background color. It has properties that are the individual attributes of the element being defined, and each property has a value. For example, in the definition of a red wagon, the selector would be “wagon,” the property “color,” and the value “red.”

The basic syntax of a CSS statement is illustrated below. The property and value are surrounded by curly braces. There is a colon after the property, and a semicolon after the value:

selector { property: value; }

The following example has two lines. The first is a typical CSS statement showing correct CSS syntax for a single value. The second statement has a value of two words. If a value has multiple words, put quotes around them:

example_selector { background: #000000; }

example_text_styling { font-family: "sans serif"; }

CSS statements: one line or several

You can put several CSS properties on a single line. Each property must be separated by a semicolon. To make your CSS code more readable, you can put each property and its value on a line by itself. It makes no difference to the browser how the selector is formatted. The following example has the same selector written as a single line, then broken out:

example_text_styling { font-weight: bold; color: #000000; font-family: "sans serif"; }

example_text_styling { 
	font-weight: bold; 
	color: #000000; 
	font-family: "sans serif"; 
}

CSS comments

It is a good practice to put comments into your code. It will help when you edit your code at a later date, and it helps other people understand what your code is doing. Comments are ignored by browsers.

A CSS comment begins with “/*”, and ends with “*/”. Note that you can put comments into the middle of code blocks, as in this example:

/* This is a comment */
example_text_styling { 
	font-weight: bold; 
	/* This is another comment */
	color: #000000; 
	font-family: "sans serif"; 
}

Comment marks are also useful to disable or “comment out” a block of code. All you have to do is to surround the code with beginning and ending comment marks to make it invisible to the browser, as in this example:

/* This code has been commented out */
/*example_text_styling { 
	font-weight: bold; 
	color: #000000; 
	font-family: "sans serif"; 
}*/

When to use “.custom” in front of a selector

Thesis is unique in the way it allows you to override the CSS properties and values of selectors in the core code. The way to do this is by inserting “.custom” in front of the selector. Failing to use “.custom” to override core code is bad practice and might break the theme! For example:

/* in the core code */
#header #logo { font-weight: bold; }

/* in custom.css */
.custom #header #logo { font-weight: normal; }

The one exception to this rule is when overriding the body selector. It must be followed by the “.custom” word:

/* in the core code */
body { background: #fff; color: #111; }

/* in custom.css */
body.custom { background: #000000; color: #FFFFFF; }

You do not have to put “.custom” in front of selectors, classes, or id’s that you create. It does not hurt to do so, but it is unnecessary since you are not overriding anything in the core code.

Grouping selectors

You can group selectors together that share a common property. Remember that in custom.css each selector must have “.custom” in front of it. Each selector in a group must be separated by a comma. In the following example some of the core title header elements are grouped together, and all changed to the color black:

.custom h1, .custom h2, .custom h3 { color: #000000; } 

The class selector

You may have noticed that some selectors are preceded by a period (.). This signifies that the selector is a class definition. Classes are used in HTML elements to change their behavior. Classes are often used and shared by many HTML statements on the same screen. A class definition for titles might look like this:

.my_own_title_class { color: #000000; }

This example class could be used in an HTML statement to make titles black. Note that there is no period in front of the class name when the class is used:

<p class="my_own_title_class">This is the title</p>

In custom.css you must preserve the period in front of the class definition from the core code. Note that the class selector in this example actually has two words. It is necessary to put “.custom” only at the beginning of the line:

/* in the core code */
.format_text a { text-decoration: underline; }

/* in custom.css */
.custom .format_text a { text-decoration: none; }

The id selector

You may also have noticed that some selectors are preceded by a pound sign (#). These are called id’s and are generally created for use by a single occurrence of a specific element on the screen. A typical id definition for a 125×125 ad box might look like this:

#my_own_ad_id { height: 125px; width: 125px; }

This id would be used in an HTML statement to define the size of a screen element for the ad. Note that there is no pound sign in front of the id name when it is used:

<div id="my_own_ad_id">

In custom.css, you must preserve the pound sign in front of an id definition. Note that the id selector in this example actually has two words. It is necessary to put “.custom” only at the beginning of the line:

/* in the core code */
#header #logo { font-weight: bold; }

/* in custom.css */
.custom #header #logo { font-weight: normal; }

I hope this brief introduction to CSS syntax has been helpful to you and goes toward demystifying the custom.css file. Remember that comments are always welcome, and that you can email me directly by clicking on the “Contact” button at the top of the page.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

How to Find Widget Names for custom.css

If you want to style your widgets in custom.css, the first thing you have to do is find their names so you can address them. This is not at all obvious, though once you know how to do it, it’s easy. Here’s how:

Bring up the page with your widgets in a browser and then view its source. Usually this is found under the “View” menu pulldown at the top of the page and is named “View Source” or “Page Source.” Then find “widget.”

There will be three kinds of widget names you will find, two for text widgets and one for other kinds of widgets.

The first kind of text widget name will be a long string of numbers after an “id.” If you have a lot of text widgets, it helps to identify which one it is by looking for the header between the <h3> tags. If you have not given a header name to your text widgets, you might have to temporarily name them in order to tell them apart. Though the long string of numbers seems random, it never changes:

Text widget with a long number
Text widget with a long number

In your custom.css file, you would address the text widget like this:

.custom #text-283725271.widget {

The header for the same text widget would be addressed:

.custom #text-283725271 h3 {

The second kind of text widget has a shorter number, often one digit. It looks like this:

Text widget with a short number
Text widget with a short number

Other kinds of widgets will be listed by name. In the following example, we see the categories widget listed as “widget_categories.”

Other widgets are found by name
Other widgets are found by name

You would address this kind of widgets in your custom.css like this:

.custom li.widget_categories {

I hope this helps you with your widget customization. Remember, you are welcome to make comments or email me using the “Contact” button.

©2009 Thesis Theme Tools. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!