Tag Archives: Customization

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!

Basic PHP Syntax for custom_functions.php

The custom_functions.php file is used less often for customization in Thesis than the custom.css file, but it is viewed with fear all out of proportion to how much it is employed. That’s because PHP errors in the custom_functions.php file can stop your site cold with a cryptic error message, whereas an error in custom.css will just make the selector do nothing.

The parts of the PHP language used by Thesis is limited, so there’s not so much to learn as with the CSS in the custom.css file. And the requirements and syntax used by PHP are simpler than CSS, but they are very, very strict and unforgiving. In a large portion of cases, a PHP error is caused by a simple syntax mistake rather than genuinely bad code.

This guide shows you the basics of PHP syntax as it applies to Thesis and the custom_functions.php file, and points out the most common mistakes people make. It is intended to help you prevent mistakes as well as to help you track down and correct PHP syntax errors that can cause your site to come to a screeching halt. It is not intended to be a complete tutorial, which would take many pages. A good online PHP tutorial is available on the w3schools.com site. The tutorial is useful not only for learning what you need to know about PHP, but as a reference as well.

The basic PHP scripting block

A block of PHP code can be written in as short a unit as a part of one line, or it can be many lines long. Whatever its size, it always requires a “<?php” to open PHP and make it active and “?>” to close it. Here are examples of PHP code blocks:

<?php SOME PHP CODE HERE ?>

<?php
	SOME PHP CODE HERE
	SOME MORE PHP CODE HERE
?>

You will sometimes see PHP code with a “<?” at the beginning of the code block instead of “<?php”. This is called shorthand, and is not available on all servers. For maximum compatibility, you should use the standard form “<?php” rather than the shorthand.

PHP functions and PHP statements in custom_functions.php require PHP to be open to work

Since Thesis makes limited use of the PHP language, almost all of the customizations you will ever do in custom_functions.php will involve PHP functions or PHP statements. These both require that PHP be open and active for them to work. You do this by making sure that the function or statement is preceded by a “<?php” in the code above it. Note that the custom_functions.php file actually begins with a “<?php”.

One of the most common errors in custom_functions.php is for PHP not to be active when required. But don’t riddle your code with “<?php” everywhere — that will produce errors, too. All it takes is one “<?php” to make PHP active. A good practice is to exit every function with PHP open.

If you have an error, the first thing to look for is that there is a “<?php” activating PHP somewhere above the new PHP code you have written.

A typical Thesis PHP statement

Probably the most common PHP statements in custom_functions.php are detaching or attaching a function to a Thesis hook. The following example has statements that move the Thesis navigation menu from above the header to below it.

The statements in the example have two important PHP syntax characteristics. Each PHP statement ends with a semicolon (;). This tells PHP to process that line. If you leave the semicolon out, either you will get an error message or nothing will happen. Note also that PHP typically uses single quotation marks (‘), unlike HTML which uses double quotation marks (“). Mixed up or unbalanced single and double quotation marks are frequent causes of custom_functions.php errors.

Remember that PHP statements require a “<?php” in the code above it to work and not cause errors:

<?php
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

The basic PHP function

You sometimes will be cutting-and-pasting functions or building your own functions in custom_functions.php. Functions all have the same basic format and syntax. Remember that they require a “<?php” in the code above it to be recognized by PHP and not cause an error message.

Functions are actually quite simple. They begin with the word “function,” which is followed by the function name, then an opening and closing parenthesis “()” and finally an opening curly bracket “{“. After its contents, the function is then closed by a closing curly bracket “}”. For example:

<?php
function FUNCTION-NAME() {
	CONTENTS OF FUNCTION
}

A common error is to forget to close the function with a closing curly bracket “}”. It may not even cause an error message, but the function definitely will not work.

PHP comments in custom_functions.php

It is good coding practice to label the parts of your code with comments. Besides helping you remember what a block of code does after time has passed, it helps others read your code more easily. Comment marks are also useful to temporarily disable a block of code.

There are two ways to put comments into PHP: one method for single lines, and another for multiple lines. Single-line comments are preceded by two right slashes “//”. Multiple-line comments are preceded by “/*” and ended with “*/”. Either of these kinds of comments can be used for single lines and may be placed at the end of a line of code.

I always use the multiple-line comment style for everything for the simple reason that it’s also the commenting syntax required for the CSS in the custom.css file: One less thing to remember, one fewer source of errors!

Following is an illustration of both styles of comments, along with a block of PHP code that has been commented out by enclosing it within a “/*” and a “*/”:

// This is a single line comment

/* This is a multiple line comment
continued onto a second line. */

/* The multiple line comment syntax can be used for everything. */

/* A block of code commented out */
/*function bad_code() {
	ERROR-PRODUCING CODE
}*/

I hope this short guide will help you format your PHP well, and track down errors when your custom_functions.php file gives you trouble. Remember that your 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!

Landing Page

If you have reached this site from Anxiety, Panic & Health, you may be a little dismayed at what you have found! The Thesis theme for WordPress is the software I use to make these blogs appear as they do. It has nothing to do with Anxiety Disorders, and everything to do with the nuts-and-bolts behind what you see on the screen. I have linked here from Anxiety, Panic & Health because I have received many questions about how I use the Thesis theme from its readers.

Besides being vitally interested in mental health topics, and the Anxiety Disorders in particular, I have a deep interest in the Thesis theme for WordPress, participating frequently in the community at the DIYthemes Forums, and actively developing solutions for it. This interest has led me to create Thesis Theme Tools. I hope you take a moment to read more about this great piece of software!

15 reasons Why Thesis Is the World’s Best WordPress Theme

This site is all about the Thesis theme for WordPress from DIYthemes. It is more than the typical fanboi site that is built on a shaky foundation and is here today and obsolete tomorrow. I would not waste my time if it were.

The Thesis theme is an established and rapidly growing product, one that is destined to have staying power in the world of WordPress themes for years to come. It has thousands of users and its user base is growing every day.

Thesis Theme Tools is meant to be a central repository of information about the Thesis theme that you can’t find anywhere else, organized in a manner that is readily accessible to every level of user. It is not meant to duplicate or compete with other great sites, such as the DIYthemes Answers site. Instead, it offers how-to’s, analyses, instructions, and resources that are unique, or often so spread about the internet that they’re hard to find. Many of the articles here arise from frequent questions on the DIYthemes Forums, and are presented in hopes that users will find a ready and complete solution to their problems on this site.

I believe that the Thesis theme for WordPress is the best available by far, whether free or paid. Why is this so?

Here’s the first 15 reasons why Thesis is the world’s best WordPress theme:

  1. Out of the box, Thesis can be customized rapidly and radically by just clicking a few boxes and changing a few numbers on the Thesis Options and Design Options pages. All without a line of code! Those wishing to further customize Thesis have a robust and easy-to-use framework to work with, without all the confusion of editing a multitude of core files.
  2. Thesis has a world-class forum where you can get troubleshooting support and learn how to customize the theme. And I do mean world-class: Its response time is generally on a par with telephone support, and goes into much greater depth than telephone support can offer. Searching the forum’s thousands of threads often gets you the answer you need in just minutes. And Thesis’ forum provides a world of cut-and-paste modifications — from simple to very complex. You don’t need to know how to program css or php to get a unique-looking site!
  3. http://diythemes.com/forums/
  4. Thesis is being actively developed. Chris Pearson, Thesis’ lead developer, keeps bringing new features to Thesis with every update. And the updates are frequent: I started with version 1.0.2, and in just 11 months, it has gone on to version 1.5.1.
  5. Access to the Thesis theme’s upgrades and forums are for life — no upgrade fees, no restrictions.
  6. Thesis is “upgrade-proof.” You make all your modifications in two files within a custom folder, and never touch the core files. That means that when there is an upgrade, all you have to do is transfer your custom folder and your modifications are there.
  7. The Thesis framework is rock-solid, and is built with the foresight and imagination that makes it an ideal platform for any kind of customizations you want. Thesis can be made to look the way you want it to. Just look at the sites in the Thesis showcase: not one of them looks like “Thesis,” yet they all take advantage of its robust underlying framework.
  8. Thesis’ system of hooks and filters gives you unprecedented control over every element on the page. You can move virtually anything anywhere, modify the appearance and actions of almost every element, and place your own objects anywhere on the page. And that’s just to start with!
  9. Thesis speeds up development. Witness godhammer’s setup of a complete site in less than five hours. What would take days to accomplish with other themes takes only hours with Thesis.
  10. Thesis’ learning curve is much less steep than for other themes, and what you learn remains valid with each upgrade. For example, Thesis has had its hooks system since version 1.2. Each new version has added new hooks, but you don’t have to relearn the hook system — just add onto it. Thesis introduced filters in version 1.5.1, and each new version will have more to work with. Once you get your head around how they work, you will never have to relearn how Thesis filters function.
  11. Thesis is optimized for speed and efficiency. It loads far faster than most themes, even when burdened by many plugins, widgets, and images. Check out this article for how it’s done.
  12. http://diythemes.com/thesis/efficiency/
  13. Thesis has the greatest implementation of SEO of any theme available, free or paid. You don’t need a bunch of SEO plugins to rank high in Google search results. But if you have been using All-in-One-SEO, Thesis will either let you keep using it, or convert your settings over to “Thesis-friendly” ones.
  14. Thesis is built with accessibility in mind. Your ability to reach different audiences -— those with special needs, people using alternative Web browsers, mobile users — is built into the Thesis framework, rather than tacked on, as in other themes.
  15. Users have a real voice in new features added to Thesis. The DIYthemes Forums have an active “Feature Request” section that is watched closely by the developers, and is the source for many of the improvements to the theme.

These are just some of the reasons why Thesis is so far superior to other WordPress themes. I could have gone on, but I think 15 reasons are enough!

I hope you enjoy Thesis Theme Tools, and find it a useful aid to your exploration and exploitation of the Thesis theme! Please feel free to make suggestions for topics either in article comments or by using the “Contact” tab to email me directly.