So I found this background on a website I was browsing. So I downloaded the image and it was my background for a while. Then I realized the hat and mustache were the same color as a WordPress logo I had sitting on an external hard drive. So I opened Photoshop, and made some changes. I hope you enjoy it.
Anyways, it’s free for you to download.
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 “< ?php popperception_the_talent_rating($post_id); ? >” 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.
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.
So the other day I was browsing one of my good friends blog. He speaks at the WORDPRESS MEET UP GROUP, and he is a great teacher of WordPress. His name is John Hawkins. His site runs on Genesis and A great child theme. So I was thinking about wanting to update my website’s blog. To be honest, I had to change the ways I ran my design shop and Support Site. So I got thinking about how I have seen others develop their process. That lead me to Twitter, and then that lead to reading a few tweets and then I wound up on Johns Blog.
I had a responsive theme on this blog before the update, but it wasn’t doing what I need it to do. And before changing the CSS, and so on, I thought I could look around for a few blog designs. After a few hours of searching and so on, I decided that I am building a responsive Genesis Child Theme. So with a few Genesis hooks, filters and a very up to date framework I am fond of, followed by a clod of Hookah Smoke, I give to you my new site design.
Its kind of simple, and that is how it needs to be. I plan on adding in some new post types and a few portfolio items down the road. But for now it so works! I am very excited by this and I can not wait for the future updates.
So I am sitting inside of a basics of WordPress Plugins Skill Share Class inside the classroom of the Usr/Lib. John Hawkins is talking about the plugins that he likes and showing everyone how to configure the plugins. Awesome. I am learning a lot about speaking in public and teaching people a skill. So why post this then?
I had this question for John about a plugin. Before I had a chance to ask the question, he was already covering what I wanted to know. It’s called “Attention To Details”. Good to know. I guess for the most part, when dealing with computers, you know that at least someone is going to bring their computer and follow along. So if you provide a page with links to all of the plugins you are going to talk about, that person is going to click on them and ask about the advanced features that you were not going to cover in the first place.
Hello World is always the first blog post you will see when you install WordPress for the first time. I have decided that I am going to keep the title and the url, but re-write the article. I am curious to find out if there will be any SEO advantage to it. I imagine there will be none, since I am removing the contents of the article. When you first read the Hellow World Post, the content of the WordPress Post reads: “<i>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</i>”. Now that I think about it. Maybe a long way down the road there could be some SEO advantages since I just included the actual content. The other “default” thing that come with WordPress would be the Sample Page. The last “default” thing about WordPress is the Comment by Mr. WordPress that can be found at the very bottom of this posting.
Why does WordPress do this? Well it’s because the writers of WP decided so, and they wanted to have some sample data in the site. So when you first log into your dashboard, you see that there is already one post and one page and one comment already in place. It is kind of a “Here is where to look for Pages, Post & Comments sections.” That is just one of the basic reasons I would sell someone on the idea of using WordPress as a Content Management System. Being able to have some default setting make it easier to understand what is going on and that is why I use it. Saving time one you learn something to do more productive things. Which is another post I want to Link you to. Vegasgeek.com. John Hawkins is a WordPress developer that builds WP sites off of the Genesis Framework. His stuff is amazing. You should go to his site and read his blog about Knowing When To Say When. It’s a great read.
Did you know that most of the websites that I have built are “Responsive”? That means that this blog, and the rest of my work, fits onto a smart phone, tablet and computer with out having to have a different website template for each browser width. Try it. Shrink the width of this browser and watch what happens. This concludes the first blog of my brand new site.