Posted 3 months ago #
I am looking to make a mobile prices display only website in wordpress, so I need a hack which diplay posts thumbnails in a gallery grid layout.
Please note that I only need to show a small 75px X 100px thumbnail and Price tag only. Actually I don't want to use any ecommerce plugin/theme because it would be an overkill.
Please guide me how to do this in wordpress.
Example site.
whatmobile.com.pk
Posted 3 months ago #
You can get something very similar with Gallery_Shortcode. Not good enough? The gallery code is a hookable function so you can copy it, edit it to your heart's content, then patch it in by filter so your version is used instead.
Posted 3 months ago #
^ bcworks, Dear i am not looking for an image gallery. I need to show posts in a grid view just like the link i posted in first post.
1 2 3 4 5 6
7 8 9 10 11 12
...................
...................
...................
.................50
The first post (1) on the Top-left side always have the Highest Price Value sord order and the last post (50) is the lowest price value.
I don't know how to add the price value in each post and query that value in categories and Home Page.
Please help.
what theme are you using?
is each 'mobile' a post?
review:
http://codex.wordpress.org/Class_Reference/WP_Query
- http://codex.wordpress.org/Class_Reference/WP_Query#Custom_Field_Parameters
http://codex.wordpress.org/Function_Reference/the_post_thumbnail
http://codex.wordpress.org/Custom_Fields
Posted 3 months ago #
^ Sir, I am a php noob, the review links you posted have a lot of coding instructions which blowed my mind.
Q).....what theme are you using?
I am using the default Twenty Twelve theme.
Q).....is each 'mobile' a post?
Yes, each mobile is seperate post in its own brand category.
I don't know how to perform these tasks.
1) How to add these Custom Values in posts.
a) Add a Custom Short Name eg. Nokia XYZ 123 (Custom short name of post title)
b) Add a Numeric Price Value. (500)
c) Add a Released Year Value. (2013)
d) Add True or False Values. (Wifi Support---- Yes / No)
2) Make a grid view layout of posts with following parameters respectively.
* Featured Image Thumbnail(75x100)
* Custom Short Name
* Price Value
3) Change post order to Highest Price first by default for each and every category.
Kindly give advise for the specific tasks.
Thanks in advance.
2) Make a grid view of posts in each category and each post should display its thumbnail (Featured Image) and Price value
Posted 3 months ago #
Your changes will require significant changes to your theme. Your first task is to create a Child Theme so your changes are protected when the theme is updated.
Your theme already displays posts by category, including a featured image and title, so some of your work is done for you. You just need to change how it's displayed and add in a few custom values. Displaying custom values is easy. You get all the post values at once in an array with something like $custom = get_post_custom(); You can then display a single value by it's key name like so: echo $custom['key_name'];
The custom field data would go on your child theme's template used for category display. It's difficult determining which template is used where. I like to put template names in <!-- HTML comments --> near the top of likely twentytwelve templates, outside of PHP blocks. When you view the page source in your browser, you can see by the comments where each template is used. Copy the proper template to your child theme and start editing.
Now you need to get the grid layout. This is mainly just ensuring the post containers are all identical size and keeping track of which column is being output. After the last column in each row, just do something like echo '<br style="clear: both" />'; Controlling container size is just a matter of the proper CSS styles. A browser based CSS explorer tool is almost essential for WP CSS work. Most browsers have something built in. For firefox, download the firebug plugin.
That's really the bulk of it, though there will be all sorts of little details to resolve. Just focus on one small element at a time and you should get through it. Happy coding!
You must log in to post.
