Wordpress(css,php,js,ajax)

WORDPRESS VS CSS

WordPress Themes use a combination of template files, template tags, and CSS style
sheets to generate your WordPress site's look.

Template Files
Template files are the building blocks which come together to create your site. In
the WordPress Theme structure, the header, sidebar, content, and footer are all
contained within individual files. They join together to create your page. This
allows you to customize the building blocks.

Template Tags
Template tags are the bits of code which provide instructions and requests for
information stored within the WordPress database. Some of these are highly
configurable, allowing you to customize the date, time, lists, and other elements
displayed on your website.

CSS Style Sheets
On every template file within your site, there are XHTML tags and CSS references
wrapped around your template tags and content.
The instructions for styling are found in the style.css file within each Theme
folder.

To allow for flexibility, WordPress adds a number of CSS classes on elements
across the site to make it easier to customize. Probably the most important set of
these classes is for post images. A good WordPress theme has classes for left,
center, and right alignment as well as styling for captions. It’s really easy to add
these styles to your theme.

Standard Alignment
.alignleft { float:left; }
.alignright { float:right; }
.aligncenter { display:block; margin:0px auto; }

That’s it! Now why do we need these classes, you ask? This trio of classes is WordPress’s
default way of aligning images in a post. When a user uploads a new image through the post
editor, they can choose to align it to the left, center, right, or just have no alignment (uses the
class .alignnone). In order to transfer that display option to the theme, you need to have
those classes ready to go on the front-end of the site.
The left, center, and right alignment classes aren’t just used on images, though. You can use
them throughout your site to position other elements like divs, links, etc.

Image Captions
If the user decides to add a caption to the image, a div with a class of .wp-caption is
wrapped around the image and its caption text, which is stored in a standard paragraph tag
(<p>). Below is an example of how to style the caption box, which will have a light grey
background and border and a small amount of padding.
.wp-caption { border:1px solid #ccc; background:#eee; padding:5px; }

If you want to style the caption text, that paragraph tag has a class of .wp-caption-text:
.wp-caption .wp-caption-text { text-align:center; margin-top:5px; }

As for post images, that’s about it! Next, let’s take a look at some of the other standard classes
you’ll find throughout a WordPress site.

Menus
In order to create a good navigation menu, it’s important to know your menu classes.

Fortunately, WordPress provides plenty of classes within its dynamic menus to allow for an
adequate amount of customization.

As you can see in the diagram above, every list item that WordPress generates has at least
one class.
The entire thing is an unordered list, each upper level link and subpage link is a <li> list
item, and the subpage menus are contained in unordered lists as well.
It’s actually quite easy to understand. The active page will always have the
.current_page_item class.
Categories:
The setup of category lists is quite similar to pages. Each category list item has a class of
.cat-item, the active category has .current-cat-item, and when viewing a
subcategory, the parent has a class of .current-cat-parent. Notice the hyphens
instead of the underscores. I can’t tell you why it’s like that but maybe we’ll see a
uniformity in classes in the near future.
Widgets:
the classes involved with a widget can be customized but the typical setup is that the
widget is enclosed in <div class="widget">.

WORDPRESS AND PHP
The Loop
Basically, Loop’s what displays the content we see on homepage, single posts, pages, archives,

search results, and more.

If a user accesses homepage, archives, or search results – by default, the Loop will display a
certain number of posts as defined in Reading Options.

Basic flow of the loop
Let’s break the Loop down into 3 parts.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
1. What you want displayed in the Loop
<?php endwhile;?>
2. What is displayed when the Loop is over
<?php else : ?>
3. If there’s nothing to display
<?php endif; ?>
If there are posts available in the query, it will start displaying them in a while loop, what is
defined in part 1. When the while is over, it will display what is in part 2. If there’s no posts
found, or there’s some sort of other 404 error, part 3 gets displayed.

Template Tags used within the Loop
Unless you want 1. What you want displayed in the Loop repeated on your WordPress
blog’s homepage 10 times, you should probably learn some of the basic template tags. Let’s take
a look at the code of index.php in the default WordPress template.

There’s quite a few template tags within the Loop that will output things such as the post
title, the permalink, the content, etc. I’ll break down each of the template tags in the WordPress
default theme.
• <?php the_permalink() ?> – This will echo the permalink of the post, i.e
http://www.themelab.com/?p=1
• <?php the_title(); ?> – This echos the post title, i.e. Hello World!
• <?php the_time(’F jS, Y’) ?> – This will echo the date, i.e. April 4th, 2008. A full list of ways
to format the date can be found on php.net
• <?php the_author() ?> – This will display the author’s name, i.e. Leland. This is commented
out in the default theme.
• <?php the_tags(’Tags: ‘, ‘, ‘, ‘<br />’); ?> – This will display the tags assigned to the post,
separated by commas, and followed by a line break
• <?php the_category(’, ‘) ?> – This will display the categories in a similar fashion as the tags
above.
• <?php edit_post_link(’Edit’, ”, ‘ | ‘); ?> – The edit post link will be visible only to those with
permission.
• <?php comments_popup_link(’No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?> –
Will display the link to the comments. This will not be displayed on single posts or pages.

There are a lot more listed on the Template Tags page over at WordPress.org. Some of these may
work in the Loop, while some may not.

After the Loop
Let’s take a look at the code after the loop stops looping in the default theme.

<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older
Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries
»') ?></div>
</div>
As you might have guessed, this will display the pagination you see on the homepage, archives,
and search results. These won’t be displayed on single posts and pages. Of course you could
replace this with something like PageNavi, but that’s up to you.

If there are no posts to display (possibly due to a 404 error), the following will be displayed after
the else

<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that
isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>

That will display the Not Found message along with the search form. In this case there would have
to be a search form code located in a file called searchform.php in the template directory, which
there is in the default theme.

Grab Category Name
This PHP snippet will get the category of the current post and place it in line where the code is inserted.
It would be useful to add a heading or phrase that relates to the category.
<? $cat = get_the_category(); $cat = $cat[0]; echo $cat->cat_name;?>

PHP Snippets for Header
<?php bloginfo('name'); ?> Title of the site

<?php wp_title(); ?> Title of the specific post or page

<?php bloginfo('stylesheet_url'); ?> The style.css file's location

<?php bloginfo('pingback_url'); ?> Pingback URL for the site

<?php bloginfo('template_url'); ?>
Location for the site’s theme files

<?php bloginfo('version'); ?> WordPress version for the site

<?php bloginfo('atom_url'); ?>
Atom URL for the site

<?php bloginfo('rss2_url'); ?> RSS2 URL for the site

<?php bloginfo('url'); ?>
Exact URL for the site

<?php bloginfo('name'); ?> Name of the site

<?php bloginfo('html_type'); ?> HTML version of the site

<?php bloginfo('charset'); ?> Charset parameter of the site

PHP Snippets for Templates
<?php the_content(); ?> Content of the posts

<?php if(have_posts()) : ?> Checks if there are posts

<?php while(have_posts()) : the_post(); ?> Shows posts if posts are available

<?php endwhile; ?> Closes the 'while' PHP function

<?php endif; ?> Closes the 'if' PHP function

<?php get_header(); ?> Header.php file's content

<?php get_sidebar(); ?> Sidebar.php file's content

<?php get_footer(); ?> Footer.php file's content

<?php the_time('m-d-y') ?> The date in '08-18-07' format

<?php comments_popup_link(); ?> Link for the comments on the post

<?php the_title(); ?> Title of a specific post or page

<?php the_permalink() ?> Url of a specific post or page

<?php the_category(', ') ?> Category of a specific post or page

<?php the_author(); ?> Author of a specific post or page

<?php the_ID(); ?> ID of a specific post or page

<?php edit_post_link(); ?> Link to edit a specific post or page

<?php get_links_list(); ?> Links from the blogroll

<?php comments_template(); ?> Comment.php file’s content

<?php wp_list_pages(); ?> List of pages of the

<?php wp_list_cats(); ?> List of categories for the site

<?php next_post_link(' %link ') ?> Url to the next post

<?php previous_post_link('%link') ?> Url to the previous post

<?php get_calendar(); ?> The built-in calendar

<?php wp_get_archives() ?> List of archives for the site

<?php posts_nav_link(); ?> Next and previous post link

<?php bloginfo(’description’); ?> Site’s description

Content Only For The Home Page
<?php if ( is_home() ) { include ('example.php'); } ?>

This snippet will include the file specified, only if the user is on the home page of the site.

Place this code
in the index.php file.

Styling Different Categories
<?php if ( is_category('15') ) {

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/cat-15.css"

type="text/css" media="screen" />;

<?php } else { ?>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"

type="text/css" media="screen" />

<?php } ?>

This snippet assigns a specific stylesheet (category-15.css) to category 15 and will assign
the rest of the
site the default stylesheet (style.css). Place this code in the <head> area.

Unique Images For Different Categories
<?php if (is_category('7') ):

<img src='<?php bloginfo('template_url'); ?>/images/cat7.jpg' alt='' />

<?php } elseif (is_category('8') ):

<img src='<?php bloginfo('template_url'); ?>/images/cat8.jpg' alt='' />

<?php endif; ?>

This snippet assigns an image (cat7.jpg) next to each post title in category 7 and an image
(cat8.jpg) next
to each post title in category 8. Place this code in the category.php file.

Styling Individual Posts
<div id="post-<?php the_ID(); ?>">

This snippet will assign the post ID to the DIV. For example, if the ID for the post is 8, that
line will echo as

<div id=”post-8”></div>. Now you can style that individual post in the CSS as
#post-8. Place this code

within the loop.

Previous & Next Posts Links
<?php next_posts_link('Next Entries »') ?>

<?php previous_post_link('« Older Entries'); ?>

The first snippet will echo “Next Entries »” with a link to the next set of posts. The second
snippet will
echo “« Previous Entries” with a link to the previous set of posts. Place this code outside the loop.

Site Page Links
<ul>

<li<?php if(is_home()) { ?> class="current_page_item"<?php } ?>><a href="

<?php bloginfo('home'); ?>">home</a></li>

<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>

</ul>

This snippet will first echo the text “home” with a link to the home page. Next, it will echo
the WordPress
pages links in a list, in order defined by your settings, excluding the child pages, and excluding a
title
header for the list. If one of the pages in the list is active, the link for that page will be assigned
the class
“current_page_item”, which can now be styled in your CSS. Place this code in the template files.

Dynamic Page Titles
<?php

if (is_home()) { echo bloginfo('name'); } elseif (is_404()) { echo ' 404'; } elseif

(is_search()) { echo ' Search Results'; } else { echo 'WPCandy » '; wp_title(''); }

?>

If the home page is active, the title will display the name of the site. If the 404 page is
active, the title will
echo ‘ 404’. If the Search Results page is active, the title will echo ‘ Search Results’.
If any other page on the site is active, the title will display ‘WPCandy » [page name]’. Place this
code in
the <head> area.

Query Posts
<?php query_posts('cat=2&showposts=5'); ?>

This snippet will display the 5 latest posts from only category 2. Place this code right
before the loop.

Unique Templates For Categories
<?php
$post = $wp_query- >post;

if ( in_category('3') ) {

include(TEMPLATEPATH . '/cat3.php’);

} elseif ( in_category('4') ) {

include(TEMPLATEPATH . '/cat4.php');

} else {

include(TEMPLATEPATH . '/cat.php');

}?>
This snippet will assign a unique template
to certain categories. In this case, ‘cat3.php’
will be assigned to ‘Category 3’, ‘cat4.php’

will be assigned to Category 4’, and the rest
of the categories will be assigned ‘cat.php’.
Place this code at the top of category.php.

Tag Cloud
<?php wp_tag_cloud('smallest=1&largest=9&'); ?>

This snippet will create a tag cloud, in alphabetical order,
with the smallest text at 1 pt and the largest text at 9 pts.

Using Javascript
 Javascript will work within WordPress. If used within the template files, most Javascript will
work fine. Using them within a post is another matter, though.
 Once you enter the world of PHP, it is really hard to go back to using Javascript, but they still
serve their purpose.
 If you can replace a Javascript with PHP code, tags, or script in WordPress, do so. Your life will
be much easier. If not, here are a few tips to make your Javascript work in WordPress.

Javascript in Template Files
To use Javascript repeatedly within your site, you can either set the call for the Javascript,
or the script itself, in the head of your header.php template file, between the meta tags and
the style sheet link, no differently than you would if you were using Javascript in any HTML page.
To "load" the Javascript file into your site, in the head, add something like this:
<script type="text/javascript" src="/scripts/emailpage.js"></script>

If your custom Javascript isn't working after including the previous line of code in your
header.php template file, use the following line of code.
<script type="text/javascript" src="<?php bloginfo('template_url');?
>/pathto/yourscript.js"></script>

Include the leading forward slash "/" even if your file is located in the root of your theme.

Be sure that you define the type correctly, as your site will not validate without it.
In the spot where you wish to use the Javascript, set the call for the Javascript. For
example, you are using a Javascript that sets a link for users to "email this page" to a friend and
you want it to be under the post title. It might look like this:
<h3 class="storytitle">
<a href="<?php the_permalink()?>" rel="bookmark">
<?php the_title();?></a>
</h3>
<div class="emailpage">
<script type="text/javascript"><![CDATA[//><!]]></script></div>

Function Reference/wp enqueue script
A safe way of adding javascripts to a WordPress generated page.
<?php wp_enqueue_script($handle, $src, $deps, $ver,
$in_footer); ?>
$handle
(string) (required) Name of the script. Lowercase string.
Default: None

$src
(string) (optional) URL to the script. Example: "http://example.com/wp-includes/js/scriptaculous/
scriptaculous.js". This parameter is only required when WordPress does not already know about
this script.
Default: None

$deps
(array) (optional) Array of handles of any script that this script depends on; scripts that must be
loaded before this script. false if there are no dependencies. This parameter is only required when
WordPress does not already know about this script.
Default: array()

$ver

(string) (optional) String specifying the script version number, if it has one. Defaults to false.
This parameter is used to ensure that the correct version is sent to the client regardless of caching,
and so should be included if a version number is available and makes sense for the script.
Default: false

$in_footer
(boolean) (optional) Normally scripts are placed in the <head> section. If this parameter is true
the script is placed at the bottom of the <body>. This requires the theme to have the wp_footer()
hook in the appropriate place. (New in WordPress 2.8)
Default: false

Javascript in Posts
To use Javascript inside of posts in WordPress, you need to take a few more steps. Odds
are that this usage is for one or only a few instances, so adding the script to the header would be
unnecessary.
For the occasional or one time use of Javascript, you need to put the script into a Javascript
file and then call it out from within the post. Make sure that each script is defined by its function
name such as:
function updatepage(){var m="Page updated "+document.lastMo.......}

To include a Javascript inside a post, you need to combine both the call to the script file
with the call to the Javascript itself.
<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
</script>

If the src attribute of your javascript tag is being stripped out you need to turn off the rich
editor (from the dashboard go to Users > Personal Options). If you are using the rich editor the
javascript tag's src attribute may be stripped out even when manually editing in the HTML popup
window.

Creating a Multiple Script File
You might have a collection of scripts that you call from time to time, like a scripts which
calculate time zones or distance, or maybe scripts that create some effect or accent on your page.
For recurring Javascripts, consider grouping them together into one file.
For this example, name the group Javascripts file scriptfile.js (choose whatever
you want) and say it contains the updatepage, emailpage, and caltimezone scripts. As
you copy each Javascript into the file, make sure it has a unique function name such as with this
condensed version:
function updatepage() {var m="Page updated "+document.lastMo.......}
function emailpage() {mail_str = "mailto:?subject=....}
function caltimezone() {var timerID; function tzone(tz, os, ds, cl) {this.ct
=......}

Place the script file of all the Javascripts in the head of the header.php template file between
the meta tags and the style sheet link. It will just sit there, loaded into the browser's memory,
waiting for one of the scripts inside to be called.
<script type="text/javascript" src="/scripts/scriptfile.js"></script>

In the spot in your post where you would like to use the Javascript, call it as follows:
<script type="text/javascript">
</script>

Wordpress(css,php,js,ajax)

More Related Content

What's hot

Viewers also liked

Similar to Wordpress(css,php,js,ajax)

Recently uploaded

Wordpress(css,php,js,ajax)