Probably you’re right and it has nothing to do with the_content
filter.
I adopted that idea from similar posts of people having the same issue.
Problem is -although the form is being displayed- it just doesn’t works. But if the shortcode was placed in the default WYSIWYG WordPress editor it would.
In the example test page provided ( http://galo.prompt-dev.com ) the Jetpack form is being inserted via an ACF WYSIWYG field.
What could it be then?
Thanks, Elliot. This is helpful. What are the other parameters we can use here? For example, can we target a specific field by name or all fields within a specific repeater?
To get some insight, here is our current code that works well, but not sure if it is the best way about it. For example, if you decide to change the class names (which you did in a recent update, this approach will break):
acf.add_action('load', function($el){
// Loop through each ACF field
acf.get_fields().each(function(){
// Specific for Repeaters
var table = $(this).parents('.acf-table-wrap'), // Get the table wrapper for the repeater
row = table.parent('.acf-row'), // Get the acf-row containing everything
hidden = table.find('[data-name="<?php echo self::UNIQUE_ID_FIELD_NAME; ?>"] input'); // Get the unique_id hidden field
// Check if the unique_id field has a value
if(hidden.length != 0 && hidden.val().length != 0){
// We are looking at a parent item since the unique_id is set
var remove_row = row.find('.acf-repeater-remove-row'),
input = $(this).find('.acf-input'), // Get the input wrapper for the field
field_name = $(this).data('name'),
field_type = $(this).data('type'),
field = null,
data = null;
if(field_type == 'wysiwyg'){
field = input.find('.acf-editor-wrap');
data = field.find('textarea').val();
} else {
switch(field_name){
case '<?php echo self::ACF_TOPIC_TITLE; ?>':
field = input.find('input');
data = field.val();
break;
}
}
if(field != null){
// Hide the entire WYSIWYG field
field.hide();
// Hide remove icon/ability
remove_row.css('visibility', 'hidden');
// Display the data from the WYSIWYG field
input.append(data);
}
}
// End Repeaters
});
});
Hi @KornDev
Looking at your code, I can see that you are searching for all fields each time a new repeater row is appended to the page. To get around this issue, please make use of the ‘$el’ parameter:
acf.get_fields('', $el).each(function(){
If you only want wysiwyg fields, try this:
acf.get_fields({ type : 'wysiwyg'}, $el).each(function(){
Disregard this, I was looking at the “text” tab of the wysiwyg, rather than the “visual”. My (incredibly stupid) mistake.
i cant say how you add this with a filter.
but i can offer a workaround if you dont use core content-WP-wysiwyg (anyway or are able to dont use it.)
if you meet this requirement than look at my post inside this thread
with that “workaround” you should be able to find everything that you save like that with core-search, because you use searchable core as hidden placeholder. 😉
i think it is possible,
but i also think that you need to create your own shortcode-plugin. because gallery is a array;
and because you use repeater it will became even more difficult than without. because you have a array(gallery) inside a array(repeater). but it should still be possible.
for easier work you may need an additional field for each gallery that is used as identifier for your shortcode.
you can work with get_field/get_sub_field inside your shortcode plugin if you do it correct.
easier way would maybe be:
work with flexible content field, that contains a wysiwyg and a gallery layout, and create a frontend layout for it.
Hi
Or Do I just create a wysiwyg field, add image and link it to wordpress page?
I hope not, their must be a simpler way?
Thanks
ACF has a filter for controlling what buttons are shown in the TinyMCE WYSIWYG editor:
http://www.advancedcustomfields.com/resources/customize-the-wysiwyg-toolbars/
WP 4.1.1 + ACF 5.1.9.1. Still have this issue on attachment pages slash attachment permalinks. Somehow the attachment image gets included/injected in all following wysiwyg fields after the attachment (as in the footer in my case). This is really weird and if I remember correctly this actually have been solved in a earlier version, so I suspect it’s a bug that has come back.
Let us know if you can have a look on this issue..
Thanks!
As a workaround, you can use this excellent plugin (developed by Eliot Condon itself) :
https://github.com/elliotcondon/acf-wordpress-wysiwyg-field
Hey @Elliot Condon, thanks again for looking into this.
I’m using this code to print the value of the field in the test page:
http://galo.prompt-dev.com
<?php the_content();
// ACF
$wysiwyg = get_field('editor');
echo $wysiwyg; ?>
<hr><br>
<code>print_r($wysiwyg):</code>
<br><br>
<pre><?php print_r($wysiwyg); ?></pre>
When printing the value the form is being displayed, it contains the shortcode’s result (?).
Also both ACF(v5.1.9) and Jetpack(v3.3.2) plugins are running latest versions.
If ever needed I can give you access to the test page.
Cheers!
Tim, You were right. Using your code I realized it was prepending the outer array. After changing the code to target the inner array like this:
add_filter( 'acf/fields/wysiwyg/toolbars' , 'my_toolbars' );
function my_toolbars( $toolbars ) {
array_unshift( $toolbars['Basic' ][1], 'forecolor' );
return $toolbars;
}
The Font Color appeared in the Basic Toolbar.
So that seemed to work! Thank you Tim! Your code was spot on and helped me realize there was another nested array.
I think it might require an extra array. Try debugging with this code. Does the after print look right?
add_filter( 'acf/fields/wysiwyg/toolbars', 'my_toolbars' );
function my_toolbars( $toolbars )
{
// dev
echo "<pre style=\"padding:10px;border:1px solid red;background-color:#fff;color:#111;font-family:Courier;\">";
print_r( "\n\n"."before we change stuff ▼\n" ); print_r( $toolbars['Basic'] );
echo "</pre>";
array_unshift( $toolbars['Basic'], 'forecolor' );
// dev
echo "<pre style=\"padding:10px;border:1px solid red;background-color:#fff;color:#111;font-family:Courier;\">";
print_r( "\n\n"."after we change stuff ▼\n" ); print_r( $toolbars['Basic'] );
echo "</pre>";
return $toolbars;
}
I’ve decided to come at this from a different angle and found a solution. All I need to save is the Post Title and Post Content which is really simple to do with v5 acf_form
. But I want to use a “Basic” wysiwyg editor and remove the ability to upload media.
Here is the solution I came up with
Here is the code on the Create Post page template:
acf_form( array(
'post_id' => 'new_post',
'new_post' => array(
'post_status' => 'publish',
'post_type' => 'post',
'post_title' => $_POST['acf']['_post_title']
),
'post_title' => true,
'post_content' => true,
'submit_value' => __('Publish', 'ppt-church'),
'updated_message' => __('Your post has been published', 'ppt-church')
));
Here is the code on the Edit Post page template:
$post_id = $_GET['post_id'];
acf_form( array(
'post_id' => $post_id,
'post_title' => true,
'post_content' => true,
'submit_value' => __('Update Post', 'ppt-church'),
'updated_message' => __('Your post has updated', 'ppt-church')
));
I use $_GET
to get the post ID from the URL
Here is the code in the functions.php
file:
// Change Post Content Type
add_filter( 'acf/get_valid_field', 'change_post_content_type');
function change_post_content_type( $field ) {
if($field['type'] == 'wysiwyg') {
$field['tabs'] = 'visual';
$field['toolbar'] = 'basic';
$field['media_upload'] = 0;
}
return $field;
}
I hope this helps anyone
I just found the solution to my problem. Here is the working code:
// Change Post Content Type
add_filter( 'acf/get_valid_field', 'change_post_content_type');
function change_post_content_type( $field ) {
if($field['type'] == 'wysiwyg') {
$field['tabs'] = 'visual';
$field['toolbar'] = 'basic';
$field['media_upload'] = 0;
}
return $field;
}
I just found a solution to my problem. Here is the working code:
// Change Post Content Type
add_filter( 'acf/get_valid_field', 'change_post_content_type');
function change_post_content_type( $field ) {
if($field['type'] == 'wysiwyg') {
$field['tabs'] = 'visual';
$field['toolbar'] = 'basic';
$field['media_upload'] = 0;
}
return $field;
}
@JiveDig Thanks for the reply. I’m rethinking my needs for this project. All I need to save is the Post Title and Post Content which is really simple to do with v5 acf_form. What I want is to use a “Basic” wysiwyg editor and remove the ability to upload media.
Based on This Post, it looks as it might be possible using the acf/get_valid_field
or acf/get_valid_field/type=
functions.
Even though the following code is not valid, this is my thought process:
if( $field['type'] == 'wysiwyg' ) {
$this->defaults = array(
'toolbar' => 'basic',
'media_upload' => 0
)
}
Any ideas?
@passatgt This is a great solution for the labels, but here is a different twist to this. Is it possible to change the WYSIWYG Editor to basic and media upload to false?
if( $field['type'] == 'wysiwyg' ) {
$this->defaults = array(
'toolbar' => 'basic',
'media_upload' => 0
)
}
I know this is not working code but it’s the idea I’m looking for. Any ideas?
Need this solved as well! Causes information loss with ACF WYSIWYG fields when using mqTranslate.
This is really a general WP question and not specific to ACF. I built a plugin that does this using shortcodes https://github.com/Hube2/blunt-snippets. There are other plugins available that work the same way, like this one: https://wordpress.org/plugins/allow-php-in-posts-and-pages/
As far as entering PHP directly into a WYSIWYG editor, I don’t know how you’d do that and to be honest I don’t think it’s a good idea.
@Hube2 I’m going to build somethings.
Example
I would like to display “10 menus”
I write code in text tab of WYSIWYG filed
<?php echo $count_menu; ?> menus
and then update.
It doesn’t display but code is <!--?php echo $count_menu; ?--> menus
How could I do it?
You’re going to need to use a plugin to put PHP code into a WYSIWYG field, or build something yourself.
Thanks @Elliot Condon
I put this little test page up http://galo.prompt-dev.com where:
Debug is enabled: define('WP_DEBUG', true);
Inside functions.php
I’ve got:
add_filter('acf/format_value/type=wysiwyg', 'format_value_wysiwyg', 10, 3);
function format_value_wysiwyg( $value, $post_id, $field ) {
$value = apply_filters( 'the_content', $value );
return $value;
}
Also tried to apply_filters
directly when printing the $value
but not in combination with the previous function, like this:
(like suggested here http://support.advancedcustomfields.com/forums/topic/wysiwyg-editor-jetpack-contact-form/ )
$wysiwyg = get_field('editor');
echo apply_filters('the_content', $wysiwyg);
But still haven’t got it working… I’m trying to add a working Jetpack Contact Form from a WYSIWYG Editor within a Flexible Content Field. The example page is a stand-alone test case using just a WYSIWYG Editor field.
Find some print screens attached.
Ok, now it’s clearer.
My question would be: if you just need to output text in a WYSIWYG field, why dont you just write the text in the_content() and attach the audio to that field as well? Why two fields?
But try this code and tell me if it works:
<div class="chapo">
<?php the_field('chapo'); ?>
</div>
<div class="content">
<?php the_content(); ?>
</div>
If it doesn’t, can you inspect the html with chrome or firefox and tell me what’s being displayed inside these divs?
1) what are you puting in the chapo field.
<p>WYSIWYG content from get field</p>
2) what are you putting in the content editor
<audio><!-- attachment audio stuff... --></audio>
(this really is the media file)
3) where / how is the attachment being added
From the media library (wp-admin/media-new.php)
4) whats the code in your php file
page.php
<?php
get_header();
while (have_posts())
{
the_post();
if ( get_post_type() == 'attachment' )
{
get_template_part( 'attachment', 'single' );
}
else
{
get_template_part( 'content', 'page' );
}
}
get_footer();
attachment-single.php
<div class="chapo">
<?php
if ( get_field( 'chapo' ) )
{ ?>
<?php echo get_field( 'chapo' ); ?>
<?php
} ?>
</div>
<div class="content">
<?php the_content(); ?>
</div>
5) what should be the desired output?
<div class="chapo"><p>WYSIWYG content from get field</p></div>
<div class="content"><audio><!-- attachment audio stuff... --></audio></div>
6. What actually appears?
<div class="chapo"><audio><!-- attachment audio stuff... --></audio><p>WYSIWYG content from get field</p></div>
<div class="content"><audio><!-- attachment audio stuff... --></audio></div>
Note: This happens with any media file, not just audio.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.