Now that I have described the concept of the WordPress file structure it is time to make a few files to get the site started. We will first make the basic files to get a blog running. Keep in mind you will have to do lots of research to get the advanced features of your site working. The process of finalizing your site can be never-ending. I find myself always tweaking my CSS file and know that it will change almost daily. But if you weren’t up for that challenge then you wouldn’t have gotten this far in creating a custom theme. You would have already downloaded a theme template and had your site up and running. So for now let’s get our basic files created and the theme working so that we can get back to the overall mission of this tutorial of merging WordPress and Zenphoto.
Once again I am using Textwrangler and will refer to that as my text editor during this post. Have Textwrangler open and start your local server with MAMP.
1. Theme Folder
Create a folder for the Theme files in Finder or, if using Windows, Explorer. This folder should be in your local server and in: server\wordpress\wp-content\themes\Mytheme
Note: You can choose any name for the folder, I used Mytheme as an example.
Open Textwrangler and create these basic files:
To do this, simply go to File, then New, and then Save As the names above. You should now have the six basic files.
Now in the style.css file add the following code to the top of the file.
/* Theme Name: Mytheme Theme URI: http://yoursite.com Description: The WordPress Theme you made. Author: Your Name Author URI: http://yoursite.com/ Version: 1.0 Tags: descriptive words about your theme separated by commas. For instance: custom theme, two column layout, etc. License: License URI: General comments (optional). */
WordPress.org describes this style header here. Make sure you include the CSS comments, or the /* and */, to comment out this section. Otherwise your browser will think this is CSS code and get confused. Replace all the information with your specific names and URLs. When done save all your work. What this code does is identify the theme so WordPress will recognize it and let you activate it. As mentioned above I am using Mytheme as the example name.
Now we need to setup the basic HTML that will form each page. The first section of code is our header. In you header.php file paste the following code.
<html> <head> </head> <body> <div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> <div id="branding"> </div><!--#branding--> <div id="access"> </div><!--#access--> </div><!--#masthead--> </div><!--#header--> <div id="main">
Note: make sure to keep the comment code next to the close of the DIV. This will help you identify specific DIVs when editing each file.
Copy and Paste the following code into your footer.php file. If you have referenced Ian Stewart’s tutorial then you will recognize that I am doing the footer a little different. I am placing my footer outside the wrapper. If you want the footer to be the same width and be in line with everything else on the page then I suggest doing it the same way Ian has in his tutorial. I did mine a little different because I wanted the footer to have the freedom do be as wide as the content I wish to put into it.
</div><!-- #main --> </div><!--#wrapper--> <div id="footer"> <div id="colophon"> <div id="site-info"> </div><!--#site-info--> </div><!--#colophon--> </div><!--#footer--> </body> </html>
Copy and Paste the following code into your sidebar.php file.
<div id="primary" class="widget"> </div><!--#primary .widget--> <div id="secondary" class="widget"> </div><!--#secondary .widget-->
Copy then Paste the following code into your index.php file. Notice the php get_ code. What this does is get the code from the header.php and loads that before loading the rest of the code. It then does the same for the sidebar.php and footer.php at the end of the file. This is how all the files come together as one when a single page is loaded. In essence the header.php, footer.php, and sidebar.php files are like code storage files and the page, or index.php, file retrieves the code from each and builds the specific page dynamically.
<?php get_header(); ?> <div id="container"> <div id="content"> </div><!--#content--> </div><!--#container--> <?php get_sidebar(); ?> <?php get_footer(); ?>
Here is an example of what this will all look like when it comes together to form a single WordPress page. It builds a regular HTML file.
<html> <head> </head> <body> <div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> <div id="branding"> </div><!--#branding--> <div id="access"> </div><!--#access--> </div><!--#masthead--> </div><!--#header--> <div id="main"> <div id="container"> <div id="content"> </div><!--#content--> </div><!--#container--> <div id="primary" class="widget"> </div><!--#primary .widget--> <div id="secondary" class="widget"> </div><!--#secondary .widget--> </div><!-- #main --> </div><!--#wrapper--> <div id="footer"> <div id="colophon"> <div id="site-info"> </div><!--#site-info--> </div><!--#colophon--> </div><!--#footer--> </body> </html>
Visually it should be very similar to the image from the last post.
8. Activate Theme
This step could be done at any time, but now might be a good point so you can see what you’ve created. Of course at the moment there is no content and everything is blank, however the files are there. Login to your WordPress installation via your web browser.
Once in your Dashboard select Appearance > Themes on the left column. You should see your theme listed here. In my case it is called Mytheme. Select Activate and your perfectly blank theme is ready to go. If you view your site the only way to tell you have anything there would be to right click and select “View Page Source”.
Your basic WordPress theme files are now structured. The next step is to write code so that the structure we just created is filled with content. I know this might seem like a silly point to stop this post, but trust me you’ll be happy in the end that I broke it down this way. The next step is a lot to absorb, so be ready!
For more insite on WordPress and blogs check out WordPress.org’s description of a Blog. This might help guide you with the direction of your website.
Next Step: Functions and Loops
- Site Design: Part 1 – Vision
- Site Design: Part 2 – Domain & Hosting
- Site Design: Part 3 – Content Management Systems
- Site Design: Part 4 – CMS Installation
- Site Design: Part 5.1 – WordPress Layout
- Site Design: Part 5.2 – WordPress Files
- Site Design: Part 5.3 – Functions and Loops
- Site Design: Part 5.4 – Cascading Style Sheet
- Site Design: Part 6 – Zenphoto Integration
- Site Design: Part 7 – Remaining Files
- Site Design: Part 8 – Analytics
- Site Design: Part 9 – Conclusion