Uncategories aaa

aaa


Table of contents

  1. Theme installation
  2. Setting up the home page
  3. Setting up menus
  4. Adding your logo
  5. Retina images in ListingPress
  6. Assigning templates to pages
  7. ListingPress page templates overview
  8. Adding featured images (thumbnails) to a post
  9. Listing management
  10. Services management
  11. Theme customization tips
If you are a developer and you are looking for guides and documentation on how to customize ListingPress by developing your own child themes, please visit advanced guides section of ListingPress knowledgebase.

Theme installation

When downloading a WordPress theme from ThemeForest you will be offered with two choices - you can either download an "Installable WordPress file" or "Main file".
If you choose the former you'll download a theme-only ZIP file named listingpress.zip that you'll later upload to your WordPress installation.
If you choose the latter ("Main file") you'll end up with the entire package that includes an installable WordPress theme, PSD files and a help file. This package needs to be unzipped first - do not upload this entire package to your WordPress installation. There you will find a listingpress.zip file, which is the same as "Installable WordPress file" downloaded from ThemeForest.
Once you have found the correct file you can proceed with following installation steps:
  1. With WordPress installed on your web server, log in to your WP Dashboard and head to the Appearance / Themes section.
  2. Go to Install Themes tab and choose Upload below.
  3. Click the Choose File button and browse your computer for the theme-name.zip file (the one determined at the top of this article). Click Install Now button.
  4. Wait few moments for the theme to upload. Once it's uploaded successfully click the Activate link.
Your theme should now be ready to go!

Setting up the home page

First thing you will probably want to the after installing your new theme is set up its home page. To do this, you will have to create a page with Home or Homepage template (the naming depends on your theme), the set that page to be your "Front page" in WordPress Reading settings. If you are not yet familiar with how to do that, here's step by step guide:
  1. In your WordPress admin panel, go to Pages / Add New.
  2. Add a title to your page (probably "Home") and add some content to your page.
  3. On the right-hand side you will see a Page Attributes section - choose Home or Homepage from Template menu.
  4. Publish your page by clicking a blue button in the top-right side of your screen.
Selecting Page Template Now that you have successfully created your home page, head to Settings / Reading in your WordPress admin panel. In the Front page displays setting choose the A static page (select below) option. Select the page you have just created from Front page select menu.
Setting a page as front page

Retina images in ListingPress

ListingPress is fully compatible with retina (hidpi) screens. That means that not only the layout and icons will render crisp on your iPhone, high resolution Android or Retina MacBook, but also the images that you upload will be displayed in high resolution on these devices.
In order to get the most out of hidpi screens that you or your website's visitors may use, please always follow recommendations from this article.

Images that you upload should be at least 1960px wide

And close to 16:10 format for the best results. Most images generated automatically by ListingPress (like post thumbnails or listing gallery images) will be cut to 16:10 ratio. Some of the smaller thumbnails will have a 1:1 ratio.
The width of 1960px is the maximum width of the entire page layout on retina-enabled desktop/laptop devices. This means that if you want to place an image in a page with full-width template, and you want that image to take entire layout width, it has to be at least 1960px wide to appear crisp.
If you, however, know up front that particular image will never be used in full-width page template, but rather as a listing gallery image, then there's no need for such a huge image. Listing gallery images and images placed into the post/page content with a "medium" size selected need to be only 1450px wide in order to appear crisp on all devices.

Always optimize your images

This is true when dealing with any kind of web images, but particularly important when dealing with these huge images for high resolution devices. An unoptimized image of 1450px by 920px (size of a listing gallery image on hidpi desktop/laptop) may take up to 1MB. Couple it with 6 images in listing gallery slider, and we are talking about 6MB in one page load for images only! This could take forever to load, and will be noticeable even on fast connections.
An optimized image of the same size should end up being only 200KB or 300KB in size, without any visible quality loss.
The way that I optimize images (and what I did for ListingPress demo) was opening them up in PhotoShop and saving as JPG with a Quality setting set to 7 or 8, depending on an image. If you do not own PhotoShop, I'm sure that there are other great and free tools to optimize images for web. Google is your friend here.

High-res images placed manually into post/page content

High-res / responsive images that you place manually into post content are disabled by default. You can enable this feature by changing a setting in Appearance / Theme Options / General. Please read the following explanation on why you have to enable this setting manually.
All images that are automatically pulled by ListingPress will be retina-ready out of the box. The problem I encountered when developing ListingPress was with images that are placed into posts/pages manually by you, the user.
Usually what will happen when you place an image in post content is the WordPress editor will paste raw HTML code containing an image tag. With this method it is not possible to determine which image needs to be loaded by the browser, since the image source is already set in stone. To overcome this I came up with a method to tell WordPress to put a shortcode with image ID instead of raw HTML code into post content. This shortcode will then be converted into multiple image sources that can be swapped by the browser depending on the screen size/pixel ratio of the device.
The only drawback to this method is that when you switch to any other theme, the shortcode will no longer be available to you and all images that you have manually placed into your post content will not be displayed. This is why this feature is disabled by default. It has to be manually enabled by you in Appearance / Theme Options / General. Please do it only once you are absolutely sure that ListingPress is a theme of your choice and you won't be switching to any other theme anytime soon.
Sorry for all this technical jargon, but I want to make sure that you understand what is involved with changing the mentioned setting and I don't want you to feel disappointed that some of your images are not displayed correctly when you decide to switch to any other theme in a week or two.

Assigning templates to pages

When reading some more in-depth you may stumble upon an instruction that tells you to "create a page with xyz template" or "assign xyz template to a page". Page templates are basically special layouts which you can assign to each page you create. Most of them (like Blog page template) will automatically pull some kind of content and won't accept any user content. Some will let you input your own page content but will add something (like contact form on Contact templates) to your page. Others are just different page layouts (Default vs Full-width page template).
You can select a template by changing a Template setting in Page Attributes panel on the right side of your screen while creating new or editing existing page.
Selecting Page Template

ListingPress page templates overview

This article is an overview of page templates available in ListingPress theme. Below you'll find a list of all templates and their function and special features.

Home

This is one of the most important templates in ListingPress. It is meant to be used as your website's home page. Please follow Setting up the home page article to learn how to set your page as home page.
Home template mainly generates content automatically, based on services that you've added and featured listings. It also accepts page content. Here's what you'll find on your home page:
  • Simplified listing search form with locations autocomplete field; the form will show number of results for the selected search query
  • Page content and custom background (made from featured image, this feature can be disabled in theme options)
  • Featured listings slider - listings that were set as Featured listing in Property Attributes when adding a listing
  • Services, which can be added in Services in your admin panel (it can display 1-4 services)

Listing browser

Another very important aspect of ListingPress. Page with this template assigned will be the main page where search magic happens. In addition to that, users will be redirected to this page when using search form on home page or clicking on an advanced search button. This makes the Listing browser template required, meaning that in order for the search functionality in ListingPress work, you must have a page with Listing browser template assigned. Please never assign this template to more than one page.
This template doesn't accept any content. It automatically displays an advanced search form, a toolbar where you users can switch views or save/load their searches and, of course, the listings. If the user comes to this page from a listing search form (on home page), the template will display the results of their search. If someone leaves this page and comes back to it later, it will display the results of their last search. Users can also save and load their searches from Search tools in the to toolbar.
It is also possible to toggle between three listing views - grid, list and map by using switches on the right side of the toolbar. Once the view is switched it will be saved as a cookie, so when the user comes back to a listing browser page (or a listing category archive) he will be presented with his last view.

Sitemap

This template is important for your website's SEO.  It will display links to all your listing category archive pages (from all taxonomies), and that will greatly help search engines understand and index your listings. It will also display your news categories and all your pages. Your users may benefit from this kind of page too.
Sitemap template will display the page content above all the category links.

Agents

Agents page will list all your users (agents) with their name, avatar and number of listings added with a link to their profile. This page template will display the page's content above agent list.

Contact

Contact page is almost the same as Default page template, but displays an AJAX contact form below page's content. It is important to note that your users will be sometimes redirected to page with this template after clicking on an "Contact agent" button on single listing pages or agent profile. This makes the contact template a required template, which means that you must have at least one page with this template assigned in order for ListingPress functions to work properly.

Blog

This template will display all your regular posts. It doesn't accept any page content.

Default

This is just a regular page with sidebar. Displays a title and page content.

Full-width

Another regular template, but doesn't display a sidebar, meaning that your page content takes up the entire layout width.

Adding featured images (thumbnails) to a post

Featured image is the main post image that will automatically be added as a thumbnail for the post on pages like archives, in sliders, or in the beginning of the post itself. Follow these simple steps to add a featured image to a post:
  1. In the Featured Image box click the Set featured image link. A media library popup will appear.
  2. You can now choose any previously uploaded image from your media library or upload a new one.
  3. Highlight the image of your choice and hit the blue Set featured image button in the bottom.

Listing management

You can add and manage your listings and listing taxonomies in Listings section of your WordPress admin panel. Adding a listing should be pretty straight forward - all the custom listing fields are described very well, but still there are some important points you should remember.

Listing gallery

Listing gallery is created automatically from all photos that are attached to particle listing entry. An image gets attached to a post when you upload an image from within the post's edit screen.
When writing a post (Listings / Add New), click the Add Media button (just above editor) - a media library popup will be displayed.You can now upload some images, and all these images will become attachments of the current post. If you want to revisit images attached to particular entry later, just hit the Add Media button again and select Uploaded to this post from dropdown menu.
listing-attachments

Location taxonomy

Adding locations to listing taxonomy should be done from within Listings / Location in you WordPress admin panel. This way you will have control over name and slug for each location. This is particularly important when dealing with states. States should be added as top-level locations. Location name should be state's full name, but location slug should be an abbreviation. Here's an example:
listing-state Why is it so important? When dealing with address formatting, you would probably want the state to be displayed as an abbreviation, but you'd like to display the full state name in search forms. The coding of ListingPress will always take the slug for all top-level locations when formatting addresses.
In case of adding a top-level location from listing editor, the slug will be created automatically by WordPress, and will look something like this: new-york. This is why you should always be in control of the location slug.
Another thing to remember about location taxonomy is that you should create a proper hierarchy of locations. Let's take a country with state / city / ZIP code administrative division, like United States, as an example. In this case you would create a state, let's say Florida, as a top-level term. You'd then create a city, say Miami, term with its parent set to Florida. Lastly you'd create a ZIP code term, 33134, with its parent set to Miami. You can then add another ZIP code, 33135, and it would be a child term to Miami too.
With this nice hierarchy in place, you should always put any particular listing in all locations that it belongs to. A "3502 Grenada Blvd" listing should be placed in "33134" category, as well as Miami and Florida categories. This way you'll ensure that when your client searches for properties in Miami the "3502 Grenada Blvd" is going to show up as a result. Here's an example of how your location classification for a listing should look like:
listing-location

Listing map

Listing map will be created automatically based on listing address. An address consists of listing title (street address), its location taxonomy (state, city, ZIP code) and the country setting from Appearance / Theme Options / Internationalization. To give you an example: a listing title is "17 Central Park West", it has been put into following locations (each being a child of the previous): "New York", "New York", "10009", and the country setting from Theme Options is set to "United States". In this case, the following string will be sent to Google Map geolocator: "17 Central Park West, NY, New York, 10009, United States". The geolocator will geolocate this address string into latitude and longitude coordinates, which will then be used by ListingPress to place a pin on map.
In case the location pin has been misplaced on the map or you do not wish to use listing title as property street address, you can manually input latitude and longitude coordinates of the place in which you want the marker to appear. You can do this in Google Map box when editing a listing. An example of what you'd input into the Latitude and Longitude field is "40.2218, -90.8536", without quotes.

Featured property

A listing set as Featured property in Property Attributes box will appear as an slider item on your home page.

Listing thumbnail

Please always attach at least one image to every listing and set that image as featured image. Read the Adding featured images to a post guide if you don't know how to do that.

Services management

Services in ListingPress are currently only used as call to action areas on home page. Up to 4 services can be displayed. You can add and manage your services in Services section of your WordPress admin panel.
Each service will be represented by a post featured image followed by post title, post content and custom call to action link, which can be set in Service Properties box. Please visit Adding featured images to a post guide to learn how to set featured images.
You can control the order in which your services appear by editing the Order field in Attributes box on the right-hand side of your editor. The smallest number goes first, while the biggest number indicates which service will be displayed last.

Theme customization tips

This article consists of general customization tips for beginners. If you are a developer and want to perform some more in-depth customizations (like turning ListingPress into car dealer website or a search system for an online shop) please visit ListingPress advanced guides Orbital Themes Knowledgebase.
ListingPress is a very flexible theme. It has a simple HTML/CSS class structure and all the backend PHP code is well commented.
Most PHP functions a pluggable, meaning the you can overwrite/expand them with your own counterparts in your child theme.
The CSS file is divided into several sections and you will find the CSS table of contents in the beginning of style.css file. Despite the stylesheet being divided into sections, it is still a huge stylesheet, so if you have any problems finding CSS rules - my recommendation would be to use some sort of code inspector. Most browsers come with their own code inspectors nowadays, so they should do a very good job in pointing the exact line where the rule that you're looking is.
Please keep in mind that some CSS rules from style.css may be overwritten by responsive rules in style-responsive.css file. After doing any CSS/HTML customizations you should check them in tablet/mobile layout to make sure that everything is displayed correctly.
Never edit theme files directly, even if this is a smallest possible change. Use child themes instead. Read Child Themes article on WordPress.org for more info.
I cannot stress the above statement enough. Never edit theme files directly, unless you want to redo all your changes when the theme gets updated (and it may be pretty often). Again, read Child Themes article on WordPress.org, it explains the process of creating child themes very well. Creating your own child theme will take only few minutes, but will save you some serious headaches in the future, once the theme gets updated with bug fixes or new features.
When using a child theme you never actually touch parent theme files. This way, once the theme gets updated, you will still keep your customizations in form of a child theme.
If you cannot follow that simple guide, which generally consists of creating a folder and a file, populating the file with few lines of code and uploading it to your web server, you probably shouldn't attempt any theme customizations at all. Sorry for the harsh words, but they are very true. I do not want you to open a theme support request that you have lost all your customizations every time I issue a theme update. This is the way WordPress works, and this is the way computers work. :) If you edit a file and that file then gets overwritten with my file, you will loose all your edits.
Please have fun with ListingPress  - Matt from Orbital Themes
Unknown

Một Blogger nghiệp dư thích tìm hiểu về blogspot và các thủ thuật blog. Hy vọng từ cái nhìn của một người không chuyên có thể giúp bạn dễ dàng hơn trong con đường xây dựng Blog.

Share this

Related Posts

Next
« Prev Post
Previous
Next Post »