Hello again…
Continuing with our first WordPress site, now we’ll understand how WordPress allow you to customize themes.
If you didn’t read the first post about WordPress Thinking the WordPress Way – First Steps and want to learn how WordPress works, take a look.
You don’t have to change your layout or using specific techniques to create your own layout. I suggest you create the basic layout the way you want, using CSS (or LESS), Javascript, HTML, images and what you want.
File Structure
Our new theme will called grossi. Every theme you create will be stored in the /wp-content/themes/grossi.
First, you need to create the grossi folder and put a style.css file inside it with some content. This file is used by WordPress to see your new theme. After that you’ll can activate your new theme in your Administration Panel.
What should I have to put inside style.css file?
WordPress will see that file if you write some code inside it, in the CSS comments format.
/* Theme Name: Grossi Theme URI: http://juniorgrossi.com Description: Theme developed for Junior Grossi's blog Author: Junior Grossi Version: 0.8 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: clean, white, small Text Domain: grossi */
You don’t need to fill all data, but at least “Theme Name” and “Description”.
After that you can log in your Administration Panel and activate the “Grossi” theme. After activated the new theme if you access your website url you see an empty page, because we don’t have anything yet.
Creating the Home Page file
Create a index.php file inside our grossi folder. I’ll consider that you already created your own template (the way you want) file, using just a PHP file and images and CSS you want, for example.
You can put all your template file content you created in our index.php file. Just pay attention with the paths. To get the path to our grossi folder you can use:
<?php echo get_template_directory_uri() ?>
So, if your CSS file is application.css and it is inside the css folder you’ll have:
<link rel="stylesheet" type="text/css" href="/css/application.css?x30813" media="all" />
You must update all path inside your file and if you visit your website know you’ll see what you created before.
Creating header.php and footer.php files
This is the way that WordPress works like (very like) a layout engine. I assume you have parts of your HTML that you want to use a lot of times around your website.
Let’s take a index.php file example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/css/application.css" media="all">
</head>
<body>
<div id="header">
<img src="<?php echo get_template_directory_uri() ?>/img/logo.png" alt="Logo" class="logo">
<ul class="nav">
<li>
<a href="#">About Us</a>
<a href="#">Customers</a>
<a href="#">Services</a>
</li>
</ul>
</div>
<div id="content">
<h1>First Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="footer">
Created by <a href="http://juniorgrossi.com">Junior Grossi</a>
</div>
</body>
</html>
So now we have to put what is header inside the header.php and what is footer in the footer.php file. Both inside grossi, our theme folder.
Now we must call header.php and footer.php inside our index.php file. It’s pretty simple. Just use some custom WordPress functions to get that. Take a look how our index.php will contain.
<?php get_header() ?> <h1>First Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <?php get_footer() ?>
What we did here is tell to WordPress “Hey, using get_header() you’ll get what exists inside my header.php file and using get_footer() what exists inside the footer.php file. Just that!
Every time you want to get the header.php content you just put on the top of the page. Simple like that!
In the second part we will see: Go to the second part
- Create Page templates
- Retrieve posts to a page or post file
Hi! Like your articles, very pedagogic!
This link is dead: http://juniorgrossi.com/thi…
Is there a way to access this article?
Thanks
Hi @Lionel!
Thanks for the comment. You can access the article using this link: http://grossi.io/2012/think…
Sorry about that, but the URL has changed some years ago.
Thank you again and welcome!