Content. Custom Classes.
We have added menus capabilities to our webpage and that is excellent. But where is the beef, or more specifically, where are the posts and the pages and everything else: where is the content.
To access the content, we need to create a content-loop. On WordPress, this is also known as The Loop. The basic structure is:
<?php
//begin The Loop
if(have_posts()){
while(have_posts()){
the_post();
//
//post content here
//
}
}
?>We place the loop in our index.php and show some post information. Our index.php now looks like this:
<?php get_header(); ?>
<?php
if (have_posts()){
while(have_posts()){
the_post();
?>
<h3><?php the_title();?></h3>
<?php the_content();?>
created on <?php the_time('F j,Y');?> at <?php the_time();?> in <?php the_category();
}
}
?>
<?php get_footer(); ?>Custom body classes
We can customize the css-class of the body by adding calling the WordPress function body_class() within our start body-tag. Since we put the opening body tag in the file header.php, we need to edit there also:
<!doctype html>
<html>
<head>
<title>my-first-thema</title>
<?php
/*Insert qeued content (css) here.
See functions.php*/
wp_head();
// wp_head();
?>
</head>
<body <?php body_class();?>>
<?php
wp_nav_menu(array('theme_location'=>'primary'));
?>
The above pictures show the generated HTML before and after calling body_class(). In addition to the automatic generated classes, we can pass an array of custom classes to body_class() as follows:
<body <?php body_class(array('my_custom_bodyclass1','my_custom_bodyclass2'));?>>The result is then:
These dynamic generated classes allow us to style our pages differently according to their content.
More customizing
We can go one step further in customizing this body classes. WordPress provides functions like is_home() which return true for the page that show your posts, or is_front_page() which returns true for the Homepage. By calling these functions, we can apply different classes to specific pages.
<!doctype html>
<html>
<head>
<title>my-first-thema</title>
<?php
/*Insert qeued content (css) here.
See functions.php*/
wp_head();
// wp_head();
?>
</head>
<?php
if (is_home()){
$custom_classes = array('my_blog_class','my_other_blog_class');
}elseif (is_front_page()){
$custom_classes = array('my_home_class','my_other_home_class');
}else{
$custom_classes = array('my_not_so_custom_class');
}
?>
<body <?php body_class($custom_classes);?>>
<?php
wp_nav_menu(array('theme_location'=>'primary'));
?>In this example, we apply the classes my_blog_class and my_other_blog_class to the page that show the blog (is_home()), apply the classes my_home_class and my_other_home_class to the Homepage (is_front_page()) and apply the class my_not_so_custom_class to everything else.