Learn to Create WordPress Themes by Building 5 Projects - Eduonix Learning Solutions - E-Book

Learn to Create WordPress Themes by Building 5 Projects E-Book

Eduonix Learning Solutions

0,0
32,39 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.
Mehr erfahren.
Beschreibung

This book will help you take your first steps in the WordPress theme development process, with 5 different projects centered around creating unique and responsive WordPress themes

About This Book

  • Learn the basics of WordPress theme development in a step by step manner
  • Make your themes more dynamic by integrating components of Bootstrap and JQuery
  • 5 carefully-selected projects to help you get beyond the theory and create highly marketable WordPress themes from scratch

Who This Book Is For

If you are a blogger or a WordPress user who wants to learn how to create attractive, eye-catching WordPress themes, this book is for you. A basic understanding of HTML5, CSS, PHP, and some creativity is all you need to get started with this book.

What You Will Learn

  • Simple and advanced themes – covers basic syntax and files along with archives and search pages
  • Photo Gallery – add simple animation and use the W3.CSS framework to design a photo gallery theme
  • Wordstrap – incorporate Twitter Bootstrap into the theme and use the WP_NavWalker class
  • E-commerce theme – build an e-commerce theme using the Foundation framework

In Detail

WordPress has emerged as a powerful, easy-to-use tool to design attractive, engaging websites. Themes play a big role in making WordPress as popular as it is today, and having an eye-catching, fully-functional theme could separate your website from the rest!

This book will help you take your first steps in the WordPress theme development process, with 5 different projects centered around creating unique and responsive WordPress themes. Start with creating a simple WordPress theme using HTML5, CSS, and PHP. Then, you will move on to incorporate different APIs, widgets, and tools such as Bootstrap and jQuery to create more dynamic and highly-functional themes. Whether you want to create a photo gallery theme, a highly customizable e-commerce theme, or a theme designed to suit a particular business, this book will teach you everything you need to know.

By the end of this highly interactive book, you will have the required mastery to develop WordPress themes from scratch.

Style and approach

This book takes a projects-based approach, where every project incrementally builds on your programming skills required to create different kinds of WordPress themes. With the difficulty of the projects ranging from basic to complex, this book will help you get beyond the theory and put your understanding of WordPress theme development to practical use.

Sie lesen das E-Book in den Legimi-Apps auf:

Android
iOS
von Legimi
zertifizierten E-Readern

Seitenzahl: 256

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Learn to Create WordPress Themes by Building 5 Projects

 

 

 

 

 

 

 

 

 

 

Master the fundamentals of WordPress theme development and create attractive WordPress themes from scratch

 

 

 

 

 

 

 

 

 

 

Eduonix Learning Solutions

 

 

 

 

BIRMINGHAM - MUMBAI

Learn to Create WordPress Themes by Building 5 Projects

Copyright © 2017 Packt Publishing

 

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

 

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

 

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

 

First published: December 2017

 

Production reference: 1271217

Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.

ISBN 978-1-78728-664-1

 

www.packtpub.com

Credits

Author

Eduonix Learning Solutions

Copy Editor

Tom Jacob

Project Editor

Suzanne Coutinho

Proofreader

Safis Editing

Acquisition Editor

Dominic Shakeshaft

Indexer

Tejal Daruwale Soni

Content Development Editor

Deepti Thore

Graphics

Tom Scaria

Technical Editors

Gaurav Gavas

Bhagyashree Rai

Production Coordinator

Melwyn Dsa

 

About the Author

Eduonix Learning Solutions creates and distributes high-quality technology training content. Our team of industry professionals have been training manpower for more than a decade.

We aim to teach technology the way it is used in the industrial and professional world. We have a professional team of trainers for technologies ranging from mobility and web, to enterprise, database, and server administration.

www.PacktPub.com

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www.packtpub.com/mapt

Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via a web browser

Customer Feedback

Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at http://www.amazon.com/dp/1787286649.

If you'd like to join our team of regular reviewers, you can email us at [email protected]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!

Table of Contents

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

Creating a Simple Theme with WordPress

Installing and setting up WordPress

Creating and enabling themes

Creating an HTML structure

Working with the style sheet

Adding a function in the head tag

Building the HTML body

Base styling

Single posts and thumbnails

Adding an image to the post

Pages and menus

Widget locations and comments

Working with widgets

Adding the comment functionality

Summary

Building a WordPress Theme

Post formats

Creating a design using HTML and CSS

Building the HTML body

Adding CSS

Creating a WordPress theme

Displaying blog post

Creating a single post and adding an image

Creating custom archive pages

Different post formats

Pages, custom templates, and sub navigation

Working with Theme Widgets

Custom home page

Comment Functionality

Summary

Building a WordPress Theme for Photo Gallery

Creating the layout of the home page in HTML and CSS

Creating the HTML layout

Creating the header

Adding the title and search box

Shifting the search box

Adding the sidebar and main area

Adding the sidebar

Changing the color of the background and text of the sidebar

Adding the main area

Adding images to the column

Adding a footer in the main area

Implementing the animation and single.html page

Implementing the Fade In animation

Creating animation on the single page

Adding a single image for animation

Adding the theme header and footer

Creating a theme inside the wpthemes folder

Adding a theme

Activating the theme

Converting static markup to WordPress

Adding the wp_head function

Adding the body_class function

Adding the footer

Splitting the header and footer

Changing the site name

The post loop

Adding the theme support function

Passing the function into action

Working on index.php for the content post

Adding the while loop for the post

Adding an else statement

Displaying the post content

Adding a regular post content

Adding a title to the regular post content

Adding metadata

Checking the thumbnail in content post

Adding a gallery post

Checking the thumbnail in the gallery post

Creating an array of attributes

Adding a new post

Adding proper proportions to the image

Adding the category widget and search option

Adding a function to use the category widget

Specifying the widget locations

Registering the widgets

Styling our category widgets

Adding the widget to the code

Removing the title

Adding the class

Adding a link at the top of the widgets

Changing the top margin of the page

Making the search bar functional

Working on the single post theme

Creating a single HTML page

Making metadata dynamic

Changing the static image

Changing the back button, title, and content

Summary

Building a Twitter Bootstrap WordPress Theme

Building a Bootstrap theme

Adding the sidebar

Adding the footer

Header and footer

The post loop

The Featured Image area

Creating categories

Formatting the post

Wrapping the post in an article tag

Adding content to the post

Adding a Read More button

Dealing with post without an image

Adding a bit of style

Implementing Navbar

Displaying menu

Setting the sidebar

Adding a search bar and single post page

Dealing with the search box

Dealing with the single post page

The comment functionality

Summary

The Foundation E-Commerce Theme

E-commerce HTML template – Part A

E-commerce HTML template – Part B

Theme setup, logo, and navigation

The custom showcase widget plugin

The sidebar widget setup

The main product post page

Single product and single page

Adding multiple images

Summary

Conclusion

Preface

Throughout this book, we will build 5 different WordPress themes from start to finish. We will look at all the fundamental concepts that are needed to start building great themes.

To get through the book, you should have some experience in HTML/CSS and PHP. You will also need to have a general idea of what WordPress is—it's installation and WordPress website management—and a basic understanding of some programming fundamentals, for example, arrays, variables, loops, statements, and so on. The projects are mainly based around HTML5, CSS3, and PHP.

Apart from these, there are some other technologies and concepts that we will be looking at throughout the book. These include WordPress post loops, which is the main loop that grabs database to WordPress, hooks/actions, the functions.php file where we put our dynamic code for our WordPress theme, widgets, WP_queries, and theme customizer. Also, we'll be using a range of frameworks such as Bootstrap, Foundation, and W3 CSS, which is a fairly new framework.

So, let's dive in and start building the cool themes.

What this book covers

Chapter 1, Creating a Simple Theme with WordPress, is an introductory project chapter. We'll discuss about the files which we need to create for our theme, the syntax, and the dynamic snippets.

Chapter 2, Building a WordPress Theme, is a project chapter that goes in depth and uses advanced concepts to build a WordPress theme, including custom template and home pages, archived pages, and post formats.

Chapter 3, Building a WordPress Theme for Photo Gallery, is about a project to build a WordPress theme for a photo gallery. We're going to use the w3.CSS framework and also some simple animations to build the theme.

Chapter 4, Building a Twitter Bootstrap WordPress Theme, is a project chapter that explains integration of Bootstrap with WordPress. This is going to be our chapter to use Wordstrap for our Twitter Bootstrap to implement our WordPress theme. We are also going to use WP nav walker, which is a class we can have for drop-down menus.

Chapter 5, The Foundation E-Commerce Theme, is about building an e-commerce theme using the foundation framework, which is similar to the Bootstrap framework.

What you need for this book

You will need the following to work through the projects in this book:

HTML5/CSS3

PHP

WordPress

W3.CSS framework

Who this book is for

If you are a blogger or a WordPress user who wants to learn how to create attractive, eye-catching WordPress themes, this book is for you. A basic understanding of HTML5, CSS3, PHP, and some creativity is all you need to get started with this book.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, path names, dummy URLs, user input, and Twitter handles are shown as follows: Code words in text are shown as follows: "Thesingle.htmlfile is going to represent the single image."

A block of code is set as follows:

<!DOCTYPE html><html><head> <title></title></head><body></body></html>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<!DOCTYPE html><html><head>

<title>PhotoGenik</title>

</head><body></body></html>

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "To upload a file, we'll click on the Select Files button."

Warnings or important notes appear in a box like this.

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to [email protected], and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files emailed directly to you. You can download the code files by following these steps:

Log in or register to our website using your email address and password.

Hover the mouse pointer on the

SUPPORT

tab at the top.

Click on

Code Downloads & Errata

.

Enter the name of the book in the

Search

box.

Select the book for which you're looking to download the code files.

Choose from the drop-down menu where you purchased this book from.

Click on

Code Download

.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR / 7-Zip for Windows

Zipeg / iZip / UnRarX for Mac

7-Zip / PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Learn-to-Create-WordPress-Themes-by-Building-5-Projects. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Downloading the color images of this book

We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/LearntoCreateWordPressThemesByBuilding5Projects_ColorImages.pdf.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visitinghttp://www.packtpub.com/submit-errata, selecting your book, clicking on theErrata Submission Formlink, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title. To view the previously submitted errata, go tohttps://www.packtpub.com/books/content/supportand enter the name of the book in the search field. The required information will appear under theErratasection.

Piracy

Piracy of copyrighted material on the internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the internet, please provide us with the location address or website name immediately so that we can pursue a remedy. Please contact us [email protected] a link to the suspected pirated material. We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us [email protected], and we will do our best to address the problem.

Creating a Simple Theme with WordPress

Welcome to the WordPress Themes Project book! In this book, we will build 10 WordPress themes from scratch. We will look at all of the fundamental knowledge that is needed to build great themes.

In this first chapter, we will create a very simple project. We will not really focus on creating an awesome design; the chapter is more about explaining the files that we need to create for our theme, the syntax, the dynamic snippets, and related topics.

Installing and setting up WordPress

This project will be a little different from the rest because it's going to be sort of an introductory project. We will see how to install and set up WordPress, so that you can have a fresh installation to work with. We will create a theme, but we'll be focusing more on the code and the overall look and style. We'll create files and folders, add PHP code, and related things. First, I want to get you familiarized with PHP code, and then we can add some simple style.

With respect to an environment, there are a lot of different ways you can run WordPress. You may have your own server set up; if you don't, you can use something like AMPPS, which is what I'll be using. It gives you an Apache server, PHP, and MySQL all on your local machine. You could also use XAMPP, which is very similar, or WAMP; there's also MAMP for Mac. There are lot of different choices, but if you want to use AMPPS, you can go to https://ampps.com/ and download it. It's available for Windows, Mac, and Linux, and it is pretty easy to get set up.

Now, let's see how to install WordPress. Most of you probably already know how to do this:

Go to the link

https://wordpress.org/download/

and click on the

Download WordPress

button:

Download the package and go to your server root folder, as shown here:

If you're using AMPPS, the package should be in yourC:\ drive or in your route drive. In theAmppsfolder, you'll find awwwfolder; this is the hosting root, as shown in the preceding image. In most cases, the default folder will be Program Files in the C:\drive.

Create a folder called

wpthemes

; this is where we will install WordPress.

Go to the

Downloads

folder and open the WordPress package. Next, extract all the files into the project folder,

wpthemes

. Before we proceed, we need a database, a MySQL database, and if you installed AMPPS or if you're using XAMPP or something similar, then you most likely have

phpMyAdmin

, as shown as follows; this is what we'll be using.

Now, go to

http://localhost/phpmyadmin

:

Next, go to the

Databases

tab to create a new database called

wpthemes

and click on

Create

. We will see an empty database.

We'll go back to the files we created or brought over from the WordPress package. You will see the

wp-config-sample.php

file. We'll rename this to just

wp-config

, and get rid of the

-sample

.

Open the

wp-config

file using Sublime Text as the editor. You can use whichever editor you feel comfortable with.

Now, in this editor, we will change or add some information:

/** The name of the database for WordPress */ define('DB_NAME', '

wpthemes

'); /** MySQL database username */ define('DB_USER', '

root

'); /** MySQL database password */ define('DB_PASSWORD', '

123456'

);

We will add DB_NAME, as shown here, which in this case is wpthemes, then DB_USER, which in this case is root, and then DB_PASSWORD—you need to enter whatever the password is for your database. The rest can stay the same.

We'll go ahead and save the entered information, and then we should be able to go to

localhost/wpthemes

:

We can now go ahead and run the installation. As shown in the following screenshot, we will enter

Site Title

as

WordpressDEV

and

Username

as

admin

. Next, you need to enter the password; I'm using a very weak password here. After you enter the email address, click on

Install WordPress

:

You can see thatWordPress has been installed.

Now, click on

Log In

, and this will take us to the admin login. Go ahead and put your username and password in, and it'll take you to your backend:

Now we can click on

Visit Site

, as shown in the preceding image. Open this in a new tab, and you'll see that we have a brand new WordPress site:

This is what we'll be working with.

I'm sure a lot of you have experience with WordPress.

On the localhost/wpthemes/wp-admin/WordPress page, we have ourPostsarea, where we can create and manage posts:

We can have Categories, as shown in the following screenshot:

We can also see Pages:

Website pages such as About Us, or Services, would go on Pages. If we go to Appearance, and click on Themes, it will show us the installed themes, as shown in the following screenshot:

By default, we have Twenty Seventeen, Twenty Fifteen, and Twenty Sixteen, but we will be creating a new theme in the next section.

Creating and enabling themes

In this section, we'll see how to create our theme files and enable a theme. We'll use Sublime Text and add the project folder, so that we can access the files easily:

Go to

C:\Ampps\www\wpthemes

.

The folder in which you want to create your theme is going to be

themes

, which is within the

wp-content

folder:

You can see here that we have the three themes that come with WordPress already installed, namely twentyfifteen, twentyseventeen, and twentysixteen.

We'll create a new folder and call it

simple

. This is going to be the name of our theme:

There are two files that you absolutely need in order to enable your theme: one will be style.css, and the other will be index.php. Now, the reason we need style.css is because that's where all of our declarations, such as theme name and the descriptions, go.

We'll open up a comment block and enter the fields, shown as follows:

You can refer to the documentation at https://codex.wordpress.org/Theme_Development, which shows all the different fields that you can use. We'll not use all of them as they're not required. Theme Name is all that's required, but it's good to have some other information as well.

We will enter the

Theme Name

as

Simple

. We also need to have an

Author

; you can put your own name there if you'd like. We'll also have

Author URI

. If you are creating themes for clients, you'd probably want to put your company's website there. We can have a

Description

. We'll enter

Very Simple Wordpress Theme

, and then enter

Version: 1.0

. Let's save this. Now, just having this information will allow WordPress to see your theme.

Now let's go back into our

localhost/wpthemes/wp-admin/themes.php

backend, and go to

Appearance

and then

Themes

; you can see the

Simple

theme, and we can actually activate it:

Now, in order for a screenshot to show in the

Simple

theme, we need to put an image in the root of the theme folder and call it

screenshot.png

:

Let's create a sample screenshot using Photoshop, which just says

SimpleTheme

, and place that in our

theme

folder, as shown in the preceding screenshot. Go to the server root,

www\wpthemes\wp-content\themes

, and then

simple

. We'll just paste that screenshot in there. Now if we go back to the backend and reload, you can see that we have a screenshot, as shown here:

Well, it's not really a screenshot but it's an image.

Now if we go ahead and activate our theme for this, and go to our frontend and reload—we get absolutely nothing because we haven't added any code yet:

Our theme just contains nothing, it's completely blank.

Now let's open the

index.php

file and enter

TEST

, then save and reload; we can see that we get

TEST

on our frontend too:

Basically, it's reading ourindex.phpfile by default.

Creating an HTML structure

Now let's create our HTML structure. We will put in some core HTML tags, as shown here:

<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <title><?php bloginfo('name'); ?></title>

As you can see, we have DOCTYPE, an html, head, body, and title tags. Now, if you consider starting at the top, we have our <html> tags; sometimes, you want to include a language here, and WordPress has a function that we can actually include in this file to make it dynamic. We can add php language_attributes, which is a function that will determine the language we want the theme to display. You probably want to make your titledynamic, or you want to add your site name; to do that, we can sayphpand use a function calledbloginfo, as shown in the preceding code block. This is really useful because it has a bunch of things that you can get, such as the site name, the description, the character set, URLs, and the list goes on. You can actually look at the documentation to see exactly what it includes. However, what we'll use is name.

Once you save this, you can go back and reload the page. You can see that the title says

WordpressDEV

, as shown here:

If you remember, this is what we named the site.

Let's go back to our

head

tag and continue. We'll need a character set, so we'll enter

meta charset

. Then, we can use

bloginfo

here as well, and just pass in

charset

:

<!DOCTYPE html> <html <?php language_attributes(); ?>> <head>

<meta charset="<?php bloginfo('charset'); ?>">

<title><?php bloginfo('name'); ?></title>

Let's save this, and take a look at our source code. Using

Ctrl

+

U

, you can look at both the language attributes; it says that we're using English US and the character set is

UTF-8

, as shown here:

These things can now be controlled from within WordPress.

Working with the style sheet

The next thing we will do is include our style sheet:

Open the

style.css

file and enter the following code:

body{ background:#000; }

Save this and reload; we'll not get a black background as the style sheet is not being read:

In order for that style sheet to be seen, we'll enter the following code:

<!DOCTYPE html> <html <? php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <title><?php bloginfo('name'); ?></title>

<link rel="stylesheet"

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

The preceding code will get the style sheet from the correct location.

Save this code and reload. We can now see a black background:

So whatever we put in our style sheet will now be registered.

Adding a function in the head tag

We will next see how to enter a function called wp_head() in the <head> tag. This puts any additional information that is needed into the head tag. For example, when you install a plugin and, let's say, it needs to include a style sheet, or it needs to do something in the head, to do this we need to enter the following code. So when you create plugins, you can have stuff pop out right in the head:

<!DOCTYPE html><html <? php language_attributes(); ?>><head> <meta charset="<?php bloginfo('charset'); ?>"> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

<?php wp_head(); ?>

In the following source code, we have a bunch of other stuff now, and this is all coming from that wp_head() function:

If I go ahead and take the wp_head() function out, and then go back and reload, it just gives us what we have in the index.php file. So we're going to need the wp_head() function:

In the next section, we'll start to build out the body. We will see how to grab posts, create menus, and so on.

Building the HTML body

We will now see how to add basic HTML tags in the body:

We'll create a

<header>

tag, which is an HTML5 tag. We will enter an

<h1>

tag, and in this tag we will add the website name:

<header> <h1><?php bloginfo('name'); ?></h1> </header>

We can actually take the dynamic code from the

<title>

tag, which we saw earlier, and put that in

<h1>

as well. Now if we save that and look at our frontend, we get

WordpressDEV

:

Now, if we wanted to change the frontend output, we could go to

Settings

, and change

Site Title

to

My Website

:

Save the settings. Now, we can see the change.

In addition to the name, we can also include a

Tagline

. To do this, we will enter the

<small>

tags, but instead of using

name

, we will use

description

, as shown in the following code block:

<header> <h1><?php bloginfo('name'); ?></h1>

<small><?php bloginfo('description'); ?></small>

</header>

When you reload it, you can see that we get

Just another WordPress site

:

We can make the changes in the settings. We'll enter

The Best Website Ever

in the

Tagline

textbox:

Save the changes and put

description

in the

span

tag, as shown in the following code block:

<h1><?php bloginfo('name'); ?></h1>

<span><?php bloginfo('description'); ?></span>

When we reload, we get this:

Now let's add more HTML tags, as shown in the following code block:

<header> <h1><?php bloginfo('name'); ?></h1> <span><?php bloginfo('description'); ?></span> </header>

<div class="main">

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

post found

<?php else : ?>

<?php echo wpautop('Sorry, No posts were found'); ?>

<?php endif; ?>

</div>

</body> </html>

Here, we go under the <header> tag and enter the div class as main. We'll fetch our blog posts; WordPress uses something called the loop, or the main loop, which will fetch every blog post that you have, regardless of the category or whatever it may be. Without specifying any restrictions, it's going to get every post. So, the first thing we'll do is check to see whether there are any posts. We'll use an if statement for that, and then use the shorthand. We will use the syntax that will help us go quickly in and out of php. We'll then use if(have_posts) to see whether there are any posts in WordPress. We'll also put an else statement here, so that if there are no posts, then we just want to let the user know that. Now, instead of just spitting out text, we'll use a function. We'll say echo wpautop; what this does is that it takes double line breaks and automatically makes them into paragraphs. It's a good function to use when you just want to output text. We'll say,