Today we’ll learn how templates work pertaining to categories and how to format those custom fields on our live site.
Part A - ID Lookup & Create a New Page:
The first thing we need to do is to learn which id numbers go with which categories. Manage » Categories (in the WP Admin) will show you a list of your current categories and their ID numbers. In this example, we will take note of ‘Listings’ with the ID #3. If you navigate to this ‘wp-content/themes/default2′ directory (assuming you downloaded this theme from earlier and are using it), you will find a series of files including page.php. Open ‘page.php’ and save it as ‘category-3.php’. Where 3 is the category id number of the ‘Listings’ category in this example. We will be working on this new ‘category-3.php’ file soon, but first we need to grab a new plugin.
Part B - Install a New Plugin:
Download and install the Get Custom Field Values plugin. We will be using this plugin to display our extra data on our new ‘category-3.php’ file or rather our new Listings page.
Part C - Finding & Adding Code:
Find this line of code: <?php the_meta() ?> in your file and remove it. If you do not find this, make yourself some room right after this piece of code:
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
by entering some new lines.
Now we can add this code:
<?php echo c2c_get_custom('Price', '<strong>Price:</strong> ', '<span>|</span>'); ?>
Repeat this process for your other custom fields.
Your final category-3.php file may look like the following:
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php echo c2c_get_custom('Price', '<strong>Price:</strong> ', ' <span>|</span>'); ?> <?php echo c2c_get_custom('Location', '<strong>Location:</strong> ', ' <span>|</span>'); ?> <?php echo c2c_get_custom('Agent', '<strong>Agent:</strong> ', ''); ?><br />
<?php echo c2c_get_custom('Beds', '<strong>Beds:</strong> ', ' <span>|</span>'); ?> <?php echo c2c_get_custom('Baths', '<strong>Baths:</strong> ', ' <span>|</span>'); ?> <?php echo c2c_get_custom('Acres', '<strong>Acres:</strong> ', ' <span>|</span>'); ?> <?php echo c2c_get_custom('Status', '<strong>Status:</strong> ', ''); ?><br />
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Save this page and upload it to your the ‘wp-content/themes/default2′ directory. You should end up with something similar to the screen shot below if you navigate to this address…. ‘yoursite.com/category/listings/’
Tips:
- Visit this page to learn more about the Wordpress template system.
- Make sure all of your new real estate listings are assigned to your ‘Listings’ category when you create a new post.
- Make sure your new category-#.php has the same ID as your ‘Listings’ category and is uploaded to your current themes directory.
- Your new code consists of 3 parts. P1 - the name of your custom field; P2 - the contents before the value of the field; P3 - the contents after the value of the field.
<?php echo c2c_get_custom('P1', 'P2', 'P3'); ?> - Put your questions on the comment section of this post. You might have a similar problem or question that I can post the answer to!
Just went through your tutorial…thanks.
You might want to mention adding an .htaccess file and permalink settings.
Good Point, I believe this setting is turned off in Wordpress and (in my opinion) it shouldn’t be.
To get this tutorial to work properly, go to Options » Permalinks, select ‘Date and name based’, then click ‘Update Permalink Structure’.
Now instead of having this address: yourname.com//index.php?cat=3
you can have this address: yourname.com/category/listings/
This is also good practice to make your pages more url and search engine friendly!
Ok now that I have gone through all three steps I get it all!
I was able to customize my own template.
The permalink tip Matthew suggested was a lifesaver.
This is a GREAT little tutorial. I love WordPress and this has allowed me to stick withit for a slightly different project.
Matt
This series of posts has been absolutely brilliant!!!! Thank you very much. Your insight into how this all comes together is quite marvellous.
One question that I would like to ask - is there any way to display custom field data before the tag is inserted. I was thinking along the lines of how a traditional directory is displayed. For example, an image on the left hand side with some information such as address, website and telephone details on the RHS followed by a read more link which takes you through to a description of the listing.
Much respect
Joe
Hello:
I have tried implementing your plugins and code into my own page (my page.php looked almost identical to the page in your template) but the fields are not being displayed on my posts.
the only thing i did different from your tutorial was to use my listing category named “Featured Listings”
are there some additional things i need to do since i am using my own template???
Thank you in advance
Rob Fleming
If I understand your question correctly, why not just make more custom fields. For example, have a custom field for image… and then just don’t have anything in the P2 and P3 parts. Simply use P1 as a filename value, and put that php code inside an image tag. Is that what you’re looking for?
Is this a post or page you’re trying to accomplish this with? Are you sure you switched the template number… for example… you might need a file called ‘category-5′ or ‘category-23′ to have it display as your custom template. Be careful of the ID and make sure that post is assigned to that category AND that you are viewing that categories posts. Does this help?
GREAT tutorial! Thanks so much for the tips. This can be tedious, but you have simplified it down nicely. Thanks again
I’m wondering, can the custom fields be used to input images (at least an uploaded location) so that if you wanted to pull the post title and custom-field image out onto lets say a homepage or something for the last 3 posts…. could it work for that as well?
hmmm…
You can do alot of things with custom fields. Remember, this custom field is storing data/text. So you can store the name of an image, the title of something, or a number. In your wordpress theme, you could have an image tag pulling the custom field of an image name. I hope this makes sense.
Great work but I have a question: Is there a way to list multiple listings? It’s only showing the most recent post. Thanks!
Do you have an example URL? You can set in wordpress how many posts display on a page.
Thanks for the prompt response. http://www.erachappell.com/category/listings
Oops, never mind. I’m an idiot. For some reason, I thought the number of results had to do with the code, when it actually was set in the options in WordPress.
Hey, great work. I’m trying to incorporate it on a website for a coworker which can be found at:
http://idahosbestrealestate.com/home/index.php/category/featured-listings/
I was wondering how I could get the same info to show up for the individual post for each listing. Right now it’s only showing up when someone views my “featured listings” category (#3). I’d like for each post to display the data as well.
Also, how would I place the “view more” button after the info but still have the info before the contents of the post?
Any help would be greatly appreciated. Look forward to see what else you come up with.
Thanks!
Dustin
Well the same code that you use for a specific category would apply to a custom page template. Please review: http://codex.wordpress.org/Pages more specifically the part about ‘Creating your own Page Templates’.
I would also look at: http://codex.wordpress.org/Using_Themes which explains which pages load and host to customize the template. Does this help?
It’s my understanding but I may be wrong, that Page Templates are different then Post templates (single.php). By placing the code… into the single.php post template file it then puts that info in EVERY single posts whether it’s in the featured listings page or not.
So for an example, at the bottom of a “Recent news” post it would say:
Price:
Agent:
Location: …etc.
I’m just trying to figure out how to add the info to the individual posts but not every other post (only posts in listings category).
Sure, then you would just need an IF statement. For example:
< ?php if ( in_category(3) ) {?>other text/code < ?php }?>
Place the above in your template.
could you in a few words inform me how to make the more info link to go to a page that is not shown on the sidebar, with all the info of an estate??
I’m not sure exactly what you’re getting at. Do you have an example page you can show and explain what you want to accomplish?
Matt, I am trying to change the output of one of the fields into a link for google maps, here is what I have so far, what else do I need?
<a href=”http://maps.google.com/?View this on a map: ‘, ”); ?>
Cheers,
Steve
Sorry not sure how to put the full code in, I’ll try this.
[code]<a href=”http://maps.google.com/?
View this on a map: ‘, ”); ?>[/code]
Ok I have obviously made a mess here. I was wondering if you could show some code on this post in order use the code like displaying an image or linking to a googlemap with the output of a field being a postcode/zipcode (example http://maps.google.com/output here]
That would be most helpful.
Cheers,
Steve
Sure… if you have a link:
<a href="http://www.google.com/" rel="nofollow">Map</a>
You would then add this in:
<a href="http://www.google.com/?q=<?php echo c2c_get_custom('Zip'); ?>">Map</a>
Obviously there’s more code Google has in the url string, but the main point is that if you have a zip code or address setup, you can pull it right into the link. Does this help?
Spot on dude, I suggest you put this in the readme file or something, key bit of functionality, very powerful.
Thanks for the tutorial, can create just about anything now!!
Cheers,
Steve
I don’t know if this is out of scope or not, but do you think you’d be able to bring back all the posts (or houses) where for example (beds=3)?
Cheers,
Steve
Hmmm… very good question. Obviously could filter by category and assign a category with number of bedrooms… but there’s probably a better way. Let me think about this some more.
Hi Matt,
Quick question, is it possible to make this all happen for pages, as opposed to posts? My client’s site http://www.NWColorado.com is using pages (for misc. reasons) for all of their listings. I would love to use the functionality and tips you’ve provided to use on their web site, granted I can use ‘em for pages. Any info would be appreciated.
Much appreciation for putting forth the time to not only create the code, but also for the tutorials and consistent help I see here.
Thanks.
Hey Matt,
I just followed your tutorials, and dang, it frickin’ worked like a charm. I’m am sooooo stoked!!! My client will be extremely happy too as it’s going to make adding properties MUCH easier on them now (using pages before, as opposed to posts). Once I get it solid, I’ll post a link, if that’s cool.
Thanks again for putting for all the time. You’re a good man!
JHouse
Matt, what happened to you? Haven’t seen you on here in quite some time. Hopefully you’re alive and well.
Still around… I’m planning on doing some upgrades to my site and hopefully some new posts as well.
Awesome, I’m glad you’re still around ’cause what you’re doing here is much needed and very appreciated.
Based on what you’ve done thus far, along with the help of the plugins you listed, I added a couple things people may want to use:
Agent:
Instead of creating a new field for “Agent” like I initially did, I had it just grab the author tag, since, chances are, the author will be the agent. This way the client doesn’t always have to input their agent name for each listing.
<a href=”http://maps.google.com/maps?hl=en&q= , “>Map
I took your map tag a little bit further and added Address, City, and State fields to the conf.ini file, as well as added the respective tags above, to the listing detail. This pulls up the exact location and photo of the desired property, via Google Maps, as opposed to the general area.
The only issue I’m having now is pulling up a photo for each summary listing. I read what you posted above regarding this, but I’m still not grasping it. Would you mind writing out the tag on how to grab this data and display it in the summary?? I already created the photo field, just don’t know what data to add. I’m using NextGen for the photo gallery, which works extremely well, it’d just be great if I can make it so each listing summary automagically grabs the first photo of the gallery and subsequently adds a link to the detailed listing. Any ideas?
Thanks again for your well written tutorials and help.
Peace.
Thanks for the tutorial, it helped me out a lot when developing a realty site for a client, http://www.reedrealty.ca
I went a little further and made each post flaggable for sale or sold to seperate entries, as well as implement an image gallery into the custom fields. I think I will try and make some more reality sites as there are so many crappy ones out there.