Retro theme tutorials (part III): How to create a proper portfolio pageSun, Mar 1, 2009 in Tutorials, WP templates
I noticed that a couple of you have a problem with creating portfolio page without sidebar and project overview with slideshow gallery. I want to thank mdusing for showing so much interest in this theme and giving me a couple new ideas for my tutorials.
Step 1: Preparing the layout
First, let’s create a new page and enter data for page title (”My portfolio”) and page content (page description).
Now, we insert a custom field:
- name: template
- value: “wide”
This will remove sidebar from content layout and give more content space. Update your post.
Step 2: Add project to your layout
Let us add projects to prepared layout. Create new page, enter project title, description and place it under “My Portfolio” page.
Now, we insert first custom field that will say this is a project page and replace standard sidebar with portfolio navigation:
- name: template
- value: “project-view”
Our second custom field will add a thumbnail to portfolio page:
- name: thumb
- value: html image tag (enter your own image source)
Third custom field add a short description on portfolio page and in portfolio navigation on project page:
- name: clean-desc
- value: short project description (enter your project description)
And finally, fourth custom field adds image slideshow on top of project page:
- name: gallery
- value: html image tags (enter your own image sources)
Do not forget to add a css class “thumb” to gallery images.
Related posts:
- Retro Theme v3.0
- A Classy Theme (first preview)
- A Classy Theme
- Inspiredblog theme
- Retro theme tutorials (part I): How to position the navigation menu below the header image?
mdusing March 2nd, 2009 at 8:27 pm
Thank you for the post. I will try it out and report back soon.
mdusing March 2nd, 2009 at 8:51 pm
Does this work the same if you do it with the TimThumb addon installed as well? Not having any luck on my projects page.
admin March 4th, 2009 at 12:41 am
No, I forgot about projects page. I’ll update my TimThumb add-on to work with projects thumbnails as well.
mdusing March 6th, 2009 at 3:46 pm
I got this to work by going back to before installing TimThumb add-on. It took me a while to realize that on the Project page at the right you choose the parent page and that is how you get it under the My Portfolio. Thank you again for creating a great theme.
mdusing March 9th, 2009 at 7:46 pm
After uninstalling Tim Thumb to make this work, my front page with the thumbnails is screwed up now. Could use some help. I know the code that is causing the problem but I can’t get rid of it.
admin March 10th, 2009 at 6:20 am
But you didn’t uninstall TimThumb. It’s still there.
Open ‘index.php’ file and replace TimThumb code with old one.
mdusing March 10th, 2009 at 11:47 am
Thats interesting because I re-downloaded the original theme and wrote over those files with the first ones. I did it again and then had to reinsert the image to get it to work but now it is fixed. I have it displaying the way I want.
The problem is that I have the thumb code in order to show the picture on the homepage and then the regular wordpress image insert to show the image on the permalink page. o I have the same thing twice.
Is there a way to only insert the image once and have it show up on both pages?
mdusing March 17th, 2009 at 1:04 pm
How can I change the color of the background behind the dropdown pages? Also for the hover on the drop downs?
mdusing March 17th, 2009 at 1:20 pm
I’m still confused as to whether this is the way to set things up so that you get what is in you Demo of the theme. You have a page that shows all the different projects, on that page it has one image for each. Then when you click into the project pages you have the rest for the images for that project and more info. I am trying to do the same. As of right now I have my Portfolio page showing all the images from the projects and not just one. Not sure what I am doing wrong I’ll work on it some more.
admin March 17th, 2009 at 4:27 pm
How to change the color of the background behind the dropdown pages:
Open /css/superfish.css file and edit these lines.
For second level manu:
.sf-menu li li {
background: #000;
}
Third level menu:
.sf-menu li li li {
background: #555;
}
Hover style:
.sf-menu li li:hover, .sf-menu li li.sfHover,
.sf-menu li li a:focus, .sf-menu a:hover, .sf-menu li li a:active {
background: #cc0000;
outline: 0;
}
mdusing March 19th, 2009 at 11:50 am
THANK YOU THANK YOU!! Can I ask for one more thing that is driving me nutz? When I switched the navigation to below the header image I lost the white image above the header with the rounded corners, which file should I be inserting that into? I tried to put it back in the headerimage.php but either I put the wrong code or that is the wrong place. PLEASE HELP. Thank you again for the help with the submenus.
Jeff Keeme April 16th, 2009 at 1:27 pm
I have 30 projects to show and only 12 show up in the Project page. How do I increase to 30? Thanks.
admin April 22nd, 2009 at 8:57 am
This is my fault andbug in Retro Theme.
Open “page.php” file and delete line 48 (’numberposts’ => 12,).
I’ll fix this in my next update.
Luis December 2nd, 2009 at 1:44 am
The new theme doesn’t seem to be displaying all of the projects in the “wide” template. I already checked the page.php file from the previous comment, but my site only displays 5 out of 9 projects.
Here’s the link http://test.panamagreatadventures.com/accomodations/