Easy Posts Loop Templates in Oxygen

le 26/10/2021

In the WPDevDesign’s Facebook group a user asked:
Hello[I’m coming from Elementor]I like the repeater from Oxygen. But in Elementor i created a Saved Template (inner item loop) to embed in the Grid Loop.Is it possible to do that on Oxygen ?So i can in one template/Re useable change the css/position and it will be change to every page who “embed” this template…ThxIn Elementor I can make Loop item Template (Globally) so when i create a loop i can embed this template. So if i change my mind i can change this template and it will change all around the website where this loop item it used.
Whilst not a Repeater, this can be done by defining a custom function that returns a preset loop content and calling this function in the Easy Posts Template PHP, then converting the Easy Posts component into a Re-usable followed by inserting editable instances of this Re-usable.
The built-in presets feature of Easy Posts is not ideal in this scenario since it is not possible to edit a preset at one place and have all Easy Posts components that use that preset get automatically updated.
Let’s take a look at the details in this premium members-only tutorial.
Step 1
Create a function that returns our desired loop content – in this example, linked image and linked title.
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: [Function] EasyPosts Template PHP – Image and Title

function wpdd_ep_template_php_image_title() {
ob_start(); ?>

Templates create a re-usable titled say, “EP – Image + Title”.
Edit it with Oxygen.
Add a Easy Posts component.
Template PHP:

Template CSS:
%%EPID%% .oxy-posts {
display: flex;
flex-direction: row;
flex-wrap: wrap;

%%EPID%% .oxy-post {
display: flex;
flex-direction: column;
text-align: left;
align-items: flex-start;
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(
#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-title {
font-size: 1.5em;
line-height: 1.2em;
Step 3
Now wherever you want to insert and use an instance of “Image + Title” Easy Posts, simply add your re-usable from +Add in Oxygen.
Select the editable option since it is highly likely that each instance has its own query.
The loop portion of all this Re-usable instances will be coming from the function defined in Step 1 and hence making a change in there will update all the instances.

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.
Lire les 51 avis
Brieuc Pauly

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!

Amaury Tardier

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


Votre conseiller

I will be back soon

Une question ?

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