Property CPT with Custom Fields using ACF in Oxygen

le 26/10/2021
JAG

This members-only tutorial for Oxygen covers:
registering a `property` Custom Post Typecreating a field group having Price (Number), Address (Google Map), ZIP (Text), Square Feet (Number), Number of Bedrooms (Select), Number of Bathrooms (Select), Property Photos (Gallery) custom fields and attached to the property CPTsetting up Google maps to work in WordPress with ACF and in Oxygensetting up a template for the CPT single pages to show title, featured image, content, property meta, google map and a gallery of photossetting up a template for the CPT archive page with each entry showing the featured image, price, title, meta and a link to view the listing
Screenshot of the custom fields:

Screenshot of a CPT single page:

Screenshot of CPT archive page:

Watch the video for a walkthrough of the setup:

Step 1
Let’s register property custom post type.
Install and activate Custom Post Type UI plugin.
Step 2
Go to CPT UI > Add/Edit Post Types and create the CPT.

In the Settings section, set Has Archive to true.
You may want to set the archive slug to properties so that the listing page will be example.com/properties rather than example.com/property.
If you would like to import the demo data from my test site, complete the next step and import this the xml file. Go to Tools > Import to import.
Step 3
Install and activate Advanced Custom Fields Pro.
Go to Custom Fields > Tools and import this (mirror) field group.
This will import the Property Meta group having 7 custom fields.
Make sure that this group is set to appear on posts of type Property.

Step 4
Let’s enable ACF’s Google Maps field and Oxygen’s Google Map element to use the ACF’s field value.
a) Obtain an API key for Google Maps at https://developers.google.com/maps/documentation/javascript/get-api-key.
Enable Places.
Screenshot from my account:

You may want to restrict your key’s use to your website only. Click here for info on this.
b) Install and activate Code Snippets plugin.
Create a new Snippet having a name of say, “Function to return location from ACF Maps field” having the following code:
function sk_acf_location() {

$location = get_post_meta( get_the_ID(), 'property_address', true );

return $location['address'];

}

Set the snippet to run only on frontend.
c) Enter the Google Maps API key on the Oxygen > Settings page in your WordPress admin panel.
d) Create a new Code Snippet with a title of say, “Google API Key for ACF Pro” having the following:
function my_acf_google_map_api( $api ){

$api['key'] = 'xxx';

return $api;

}

add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
Replace xxxx with your API key.
If you are using ACF Pro, use this code instead:
function my_acf_init() {

acf_update_setting('google_api_key', 'xxxx');
}

add_action('acf/init', 'my_acf_init');
Set the snippet to run in admin only.
Step 5
If you have not already, go to Properties > Add New and add your CPT entries.

Make sure to add the featured image and fill the custom fields.
Step 6
Go to Oxygen > Templates.
Add a new template named say, Property Single.
Set it to inherit the design from your Main template so it will have your sitewide elements like a header and footer.
Set it to be applied on Properties singular pages.
Hit Publish and edit it with Oxygen.
By the end of this step, you should have the Structure like this:

It is possible to paste shortcodes on the template edit page to import all the content from my test site. This does not work all the time in my testing though. If you would like to give it a try, here’s the link to the shortcodes.
Watch the video to learn more about how the template is built.
Code in the left Code Block:
Price: $' . $property_price . '
';
}

if ( $property_address ) {
echo 'Address: ' . $property_address['address'] . '
';
}

if ( $zip ) {
echo 'ZIP: ' . $zip;
}
?>
Code in the right Code Block:
Square Feet: ' . $square_feet . 'ft
';
}

if ( $number_of_bedrooms ) {
echo 'Number of Bedrooms: ' . $number_of_bedrooms . '
';
}

if ( $number_of_bathrooms ) {
echo 'Number of Bathrooms: ' . $number_of_bathrooms;
}
?>
Function name for Google maps element: sk_acf_location.
Code in the last Code Block for the gallery:

Here we are fetching the raw value of property_photos field as an array of image IDs.
Then we are constructing a WordPress gallery shortcode with comma-separated image IDs.
link="file" ensures that the images in the gallery link to direct image URLs and not to media attachment pages.
Step 7
Go to Oxygen > Templates.
Add a new template named say, Property Archive.
Set it to inherit the design from your Main template.
Set it to be applied on property post type’s archive.
Hit Publish and edit it with Oxygen.
If you would like to try importing my demo site’s content for this template, here’s the link to the shortcodes.
Easy Posts > Templates > Template PHP:

$' . $property_price . ''; ?>

View Listing

Easy Posts > Templates > Template CSS:
%%EPID%% .oxy-posts {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

%%EPID%% .oxy-post {
display: flex;
flex-direction: column;
text-align: center;
margin-bottom: 3em;
width: 33.33%;
padding: 1em;
}

%%EPID%% .oxy-post-image {
margin-bottom: 1em;
position: relative;
background-color: grey;
background-image: repeating-linear-gradient(
45deg,
#eee,
#eee 10px,
#ddd 10px,
#ddd 20px);
width: 100%;
}

%%EPID%% .oxy-post-image-fixed-ratio {
padding-bottom: 100%;
background-size: cover;
background-position: center center;
}

%%EPID%% .oxy-post-image-date-overlay {
position: absolute;
top: 1em;
right: 1em;
font-size: .7em;
color: white;
background-color: rgba(0,0,0,0.5);
padding: .7em 1em;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

%%EPID%% .oxy-post-title {
font-size: 1.3em;
line-height: 1.2em;
margin-bottom: 20px;
}

%%EPID%% .oxy-post-meta {
margin-top: 0.5em;
font-size: .8em;
display: flex;
flex-direction: row;
}

%%EPID%% .oxy-post-meta-item::after {
content: "0b7";
margin-right: .5em;
margin-left: .5em;
}

%%EPID%% .oxy-post-meta-item:last-child::after {
content: "";
display: none;
}

%%EPID%% .oxy-post-content {
margin-top: 1em;
margin-bottom: 1em;
}

%%EPID%% .oxy-post-content p {
margin: 0;
}

.property-price {
display: inline-block;
margin: -30px auto 12px;
font-size: 24px;
border-bottom: 1px solid #e5e5e5;
position: relative;
background-color: #fff;
padding: 12px 32px;
}

.oxy-property-meta {
margin-bottom: 20px;
font-size: 0.9em;
}

%%EPID%% .oxy-read-more {
border: 1px solid #333;
padding: 1.2em 1.5em !important;
}

@media (max-width: 1120px) {
%%EPID%% .oxy-post-meta {
display: none;
}
}
Watch the video to learn more about how the template is built.
Step 7
If you would like the photos in the gallery to open up in a lightbox, install and activate ARI Fancy Lightbox.
Add this CSS:
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 40px;
}

.gallery figure {
margin: 0;
}
That’s it!
Credit: Content from my demo site was taken from AgentPress Pro demo.
References
https://codex.wordpress.org/Gallery_Shortcode

ARI Fancy Lightbox – WordPress Popup

Gallery

How to display ACF’s Google Map field via Oxygen’s Google Maps element

https://stackoverflow.com/a/4521389/778809
http://www.php.net/manual/en/function.number-format.php

Nos experts se tiennent à votre disposition
pour répondre à vos questions et vous conseiller
dans votre projet digital.

Vous souhaitez développer une application ?

Envie d’échanger avec l’un de nos experts ? Besoin d’en savoir plus ?
En savoir plus

Recevez notre newsletter

La protection des données nous tient à cœur. JAG utilise les informations que vous fournissez afin de vous proposer des informations et du contenu pertinent sur nos produits et services. Vous pouvez vous désinscrire de ce type de communications à tout moment. Pour plus d'informations, consultez notre politique de confidentialité
© 2022 JAG Consulting, sas. Tous droits réservés.
© 2022 JAG Consulting, sas. Tous droits réservés.
4.8
Lire les 51 avis
google
Brieuc Pauly
08/09/2022

Créative, dynamique et très professionnelle, c'est à mon sens les piliers qui soutiennent cette équipe talentueuse ! Une agence à taille humaine qui privilégie la qualité et le résultat. Alors si vous souhaitez le meilleur pour votre communication adressez vous les yeux fermés à ces passionnés, plus que compétents ! (Translated by Google) Creative, dynamic and very professional, these are in my opinion the pillars that support this talented team! A human-sized agency that favors quality and results. So if you want the best for your communication, turn your eyes closed to these enthusiasts, who are more than competent!

google
Amaury Tardier
08/09/2022

Merci à Julien et son équipe, plus que satisfait par le travail fourni ! Je recommande vivement ! (Translated by Google) Thanks to Julien and his team, more than satisfied with the work provided! I highly recommend !

Ravi de travailler avec l'équipe JAG pour la gestion de mon site de e-Commerce. Equipe réactive et toujours pleine de bonnes idées pour améliorer les performances du site (Translated by Google) Glad to work with the JAG team for the management of my e-Commerce site. Responsive team always full of good ideas to improve the performance of the site

Merci à Julien pour son accompagnement dans mon projet, je recommande à 200% c est le Top (Translated by Google) Thanks to Julien for his support in my project, I recommend 200% it is the top

Excellente agence. Equipe est très pro, à l'écoute et de bon conseils. (Translated by Google) Excellent agency. The team is very professional, attentive and gives good advice.

Temps de réponse hors pair quand il y a eu un pb sur mon site, je vous recommande chaleureusement Julien :-) (Translated by Google) Unparalleled response time when there was a problem on my site, I warmly recommend Julien :-)

Charger plus
listarrow-right
Julien

Julien

Votre conseiller

I will be back soon

Une question ?

Julien
Bonjour ! Je suis Julien.
Comment puis-je vous aider?
Démarrer la conversation:
chat Live Chat