Frontend posting to CPT using ACF in Oxygen

le 26/10/2021
JAG

This members-only tutorial provides the steps to use Advanced Custom Fields to build a form that logged in users can fill on the front end to submit news i.e., populate a Custom Post Type as drafts in Oxygen.
Admin can then review and publish the entries which can be easily set to appear on the front end using Easy Posts component.
There are various ways in which frontend posting can be set up. I shall cover a few other methods in future tutorials.

Non logged-in visitors will see

Step 1
Let’s create the News CPT.
Install and activate Custom Post Type UI.

Step 2
Install and activate ACF or ACF Pro.
Add a new field group titled say, “News Fields”.
In this example, since we want the users to enter the URL of their news source, add a Url type field (news_source).
Also, add an Image type field (news_image) that will be mapped later to the featured image of the News CPT entry.

Set the field group to appear on News CPTs.
Step 3
Let’s map the image custom field to the CPT entry’s featured image.
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: Set uploaded image as featured image for news articles
Code:

add_filter( 'acf/update_value/name=news_image', 'acf_set_featured_image', 10, 3 );
/**
* Set Featured Image from ACF Field.
*
* @param int|string|array $value The value of the field as found in the $_POST object
* @param int $post_id The post id to save against
* @param array $field The field object
*
* @return int|string|array The modified value of the custom field
*/
function acf_set_featured_image( $value, $post_id, $field ) {

if ( $value !== '' ) {
update_post_meta( $post_id, '_thumbnail_id', $value );
}

return $value;

}
Set the snippet to run only on front-end.
Save and activate.
Step 4
Create a Page titled say, “Add News” where you want the field group to appear as a form.
Edit the Page with Oxygen.
Add a Section.
Add a Text component that reads something like
Fill in the form below to submit a news article. It will be published as soon as we review it.
Below that, add a Code Block.
PHP & HTML:
'new_post',

'new_post' => array(
'post_type' => 'news',
'post_status' => 'draft',
),

'post_title' => true,

'post_content' => true,

'submit_value' => __( "SUBMIT NEWS ARTICLE", 'acf' ),

'updated_message' => __( "Your news item has been successfully submitted. It will be published as soon as we review. Thanks for your patience!", 'acf' ),
));
} else {
printf( 'News submission form is restricted to members only. If you are already a member, log in here.', wp_login_url() );
}

?>
CSS:
.acf-form .acf-fields>.acf-field {
border-top: none;
}

.acf-form .acf-fields>.acf-field {
padding-left: 0;
padding-right: 0;
margin-bottom: 20px;
}

.acf-field .acf-label label {
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}

.acf-form .acf-field input[type="text"] {
padding: 20px 10px;
border-radius: 5px;
border: 1px solid #ccc;
}

.acf-form .acf-editor-wrap .wp-editor-container {
border: 1px solid #ccc;
}

.button {
border-radius: 2px;
padding: 14px 40px;
color: #ffffff;
border-color: #0274be;
background-color: #0274be;
}

.button:hover {
border-color: #3a3a3a;
background-color: #3a3a3a;
}

.acf-field .acf-button.button {
margin-left: 10px;
background-color: rgba(0,0,0,0.05);
border: 1px solid #ccc;
color: #333;
padding: 10px 20px;
}

.acf-form-submit {
margin-top: 40px;
}

.acf-form-submit .button {
border-radius: 5px;
cursor: pointer;
}

#message {
background-color: #DFF0D8;
border: 1px solid #DFF0D8;
border-radius: 4px;
padding: 15px;
color: #468847;
}

#message p:last-child {
margin: 0;
}
Step 5
You should now have a working frontend posting system in place.
When your site’s members visit the Add News page and fill in the form, new entries will be created in draft status.
Visit the News link in the WordPress admin to review and publish.
Resources

Create a front end form


https://itsmereal.com/frontend-post-submission-edit-advanced-custom-fields/

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