So In tonight’s meetup, I am going to be talking about WordPress Loops and Templates. I am going to be using the site Pop Perception
“Welcome to PopPerception! You ever wonder what people REALLY think about celebrities? Here you’ll find that insight for over 2,000 public figures – not to mention the opportunity to throw your thoughts & opinions in the mix!”
So if you head over to the home page, you can see that we have created the theme for the site, and it is pretty simple to break down. There is the header file that shows the Logo, Login/Logout and Register Links, and then the main menu or navigation. Dont forget the Search Bar. Then we have the body of the template. It shows a Nivo Slider, Jquery Tabs that are running a series of loops. Then we have the Today In Pop Culture tabs that again, are running a series of loops. Then to the right, we have a Sidebar that displays some widgets and a few more loops. Then at the very bottom we have the footer file that displays a custom menu and the copyright information.
All together, you can see that the home page is pretty simplistic or minimal if you will. Nothing to fancy. This site is more function than anything else. That’s wont be for long, but you can see how it looks right now. Below is a gallery of the separate sections of the home page.
So if we were to break this down, and look at the home.php file, You would see the code for how this is laid out. It’s just the same as I described above, but with some extra div ID’s, Classes and Jquery Tabs. Now the loops that make up the TOP 5 widgets are all the same, except for they are calling in some specific information before running the loops. Lets take a look at that.
The home.php template is our main page. We didn’t have to go into wp-admin > Settings > Reading to display the home page. In your theme, when you have home.php or index.php and inside the Reading Settings you have the “Your Latest Posts” option selected, WordPress looks for those files first. And if they are not there, it looks for the main blog loop. So since we have a home.php template, WordPress is using this template. We did give this template a name though, so if we wanted to set a static page, we can. If you want to know how to name a template, you can visit the WORDPRESS CODEX PAGE.
Looking at the home page now (see the image above), you can see how I have the home.php page laid out. You can see that I start with the Get Header code, to get the header.php file. Next is 2 Div ID’s and one Div Class. The first ID puts everything in the left side of the template into one main div. Then the next Div sets the div for the content. The Div Class sets the div for the NIVO SLIDER. After the NIVO SLIDER, We run our first loop. The loop is querying posts, or searching for all posts in the “POSTS” post type and then we are showing only one post. So basically the loop is getting the most recent or latest post in the “POSTS” post type. We only have one, so that is all that it shows. It doesnt matter what category the post is in, because we did not set an parameter that gets a specific category. But we could if we wanted to.
Now the Jquery Tabs. Since our theme is running the latest version of Jquery, I was able to go to the JQUERY UI Documentation pages and get the code for displaying tabs. You can view the source link and they spit out code for you so you can make your own template if you wanted to. Since the Jquery reference links are in our header files, I can include the function and the html code into the actual home.php file. It is good practice to put the Tabs Function into the header.php file, but since I am only using the tabs on the home.php template, I included the function into the temaplate. After that, you can see that we define the div for the Tab Titles. We put them in a Unordered List and then we defined the List Items and the links to each div for when they are clicked upon. So when you click on an tab title, it shows the div was assigned it to. Below that, we build the Tabs and the Top 5 Widgets.
Inside the tabs, I wrap each widget into a div class. Either “nono” or “yesyes”. Each class has some CSS styles to make it look like it should. Then I have some inline CSS to make the title of the widget stand out. Then we get into the first part of the loop for each widget. The owner of the site had a plugin created for him, that creates a new post type called Celebrities. Each Celebrity has certain specific information to each post. Each Celebrity has a Number Of Votes, Level Of Attraction, Talent, Personality, and number of Crushes Rating Column. We have these columns so now we can pull specific information into posts if we would like. The plugin creator was nice enough to include some short codes for us, as well as writing some specific wp_query strings. This allows us to sort and get specific posts from the post type called “Celebrities”. First what we are doing is saying that before we show the loop, we want to only show posts that have a specific number of votes. As the site grows and more users rate celebrities, we can up that number.
Next comes the wp_query string we have determining what kind of posts we want to grab. So we are querying, or getting all of the posts that have a Talent Rating, then we show them in s Descending order (1st to Last), and then we grab the posts in the post type called “Celebrities” and then the category called Pop Music, and then only show 5 at a time. So now that we have set a limit on how many votes a post must have in order to be considered, and then we search for posts with our specific requests, now we can run a loop called “talent”. The rest of the tabs run the same way. We set a number of votes a post must have, and then depending on the widget, we get the post column we want to filter, and then the post type, category and number of posts to show. We created a loop for each widget, because we are displaying different results in the light box that shows when you hover the images of the celebrities.
The Talent Loop is a file in it’s own. It’s called loop-talent.php. So after the query for the posts we want, we get the template and we define the name we want. so we can ask for a loop and then define the name of the loop we want called talent. The talent loop does its own specific thing.
What we did was set a variable that says “$i = 0 ;”. This variable allow us to count the numbers of the posts, and display the number next to the post. Then we create a While statement that says, While we have the posts, get the posts and do this. So an “If” function was created to get the images. Then we create an else statement that returns the look of the widget or loop. We wrap the entire loop into a div class called “homehomehome”. Then we wrap everything in a DIV ID.
Now we have an H2 Class, and a span class that basically styles the information we are getting. So we display our Ranking Number, then the post title. Then we get the post Thumbnail, Or featured Image. We created a div called “rate-me-attract” that shows up when you hove over the post thumbnail. Inside of that div, we pull in the information that we want to show. So since we are in the first tab called POP MUSIC, and we are in the first widget called Top 5 Talent, we asked the plugin author to write a short code for us to show the rating in the column we want to show. So for us to show the posts Talent rating, the short code looks like “” and then we followed it with the max number the post could have, which is a 4.0. Then we close the div called “homehomehome” and then end the loop.
After all of this, this is how I was able to create a home template, then drop in some JQUERY TABS, and in each tab, show a widget. Each widget has a vote limit and then we query the post for specific’s and then we run the loop.
In conclusion
Creating a loop is really simple to do. Your theme should already have some loops created, and you can go into them and add in new information, or remove things, or modify them as you would like. and then you select the page template you want to show the loop on and you are golden.