Reply To: Associate title field from the post admin

• Keith Lock

• September 3, 2017 at 12:22 pm

Hello @m-civita

Rather than create a new custom title, and attempt to associate it with the WP Title in some way, would you rather just move the WP Title to a different spot amongst your ACF fields? Otherwise the rabbit hole can get very deep. For example, you might then need to alter how your lists of Posts are displayed in the Admin, etc.

I have ran into scenarios where the Post Title would be handy to use still, but being at the top of the page, it wasn’t within the proper flow for data entry. If that’s the case for you as well, below are the steps to go about moving the WP Title to a different location.

This link has an example of how to move the Content Editor, and the process is very similar for that of the Title.

STEP 1: The first step is to create a Placeholder Field for the Title. Use the Message field type with default settings for that.

See the screenshot below for an example in practice. I moved the WP Title, and used it as “Job Name” within a “Projects” Custom Post Type.

https://imgur.com/6AOwTqW

STEP 2: The next thing you will need to do is locate the “Field Key” for the Message Placeholder Field from Step 1. The simplest way to do that is:

a) Go to the ‘Edit Field Group’ screen where that field is located.

b) Click ‘Screen Options’ at the top of the page, and put a check next to ‘Field Keys’ if it isn’t already checked. You will then see a new ‘Key’ column in your list of fields.

c) Copy the Field Key, but only the portion after field_ (see the screenshot below)

https://imgur.com/du7faLq

STEP 3: Now, you will need to include some custom code. I generally create custom plugins for this. A very simple way to create a custom plugin is by using the free plugin Pluginception.

Below is sample code to move the Title.

You will need to replace XXXXXXXXXXXXX with the value you copied from Step 2c above.

In addition, the following line may not be necessary in your situation. I wanted to make the title a required field, so I included it. If you choose to keep the line, additional code will be required, which I will display below.

$('.acf-field-XXXXXXXXXXXXX .acf-label > label').append(' <span class="acf-required">*</span>');

Also, the second style ( namely: .acf-field-XXXXXXXXXXXXX #titlediv #title ) that I added in the code below is optional. I included it because the WP Title text box by default has different styles than the ACF text boxes.

Include this code within your custom plugin or functions file:

<?php
/* START: Moves the WP Title text box to a more appropriate place when adding/editing Projects */
function cc_move_wp_title_for_projects() {
?>
<script type="text/javascript">
  (function($) {
    $(document).ready(function(){
      $('.acf-field-XXXXXXXXXXXXX .acf-input').append( $('#titlediv') );
      $('.acf-field-XXXXXXXXXXXXX .acf-label > label').append(' <span class="acf-required">*</span>');
    });
  })(jQuery);
</script>
<style type="text/css">
  .acf-field #wp-content-editor-tools {
    background: transparent;
    padding-top: 0;
  }
  .acf-field-XXXXXXXXXXXXX #titlediv #title {
    height: 28px!important;
    font-size: 14px!important;
    line-height: 1.4!important;
    padding: 3px 5px!important;
    margin: 0!important;
  }
</style>
<?php
}
add_action('acf/input/admin_head', 'cc_move_wp_title_for_projects');
/* END: Moves the WP Title text box to a more appropriate place when adding/editing Projects */
?>

Optional STEP 4: Now, if you decided to keep the line in the code above to make the title a “required” field, below is some more code to use within your custom plugin or functions file.

Initially, you will want to alter the following lines to match the post type(s) you are working with:

  $post_types = array(
    'projects',
    'customers'
  );

If just using regular posts for example, you can use:

  $post_types = array(
    'post'
  );

Finally, here is the code… keeping in mind the changes for post types, described above…

<?php
/* START: Require Post Title (i.e. Job Name) for Projects */
function cc_require_post_title( $post )  {
  $post_types = array(
    'projects',
    'customers'
  );
  if ( ! in_array( $post->post_type, $post_types ) ) {
    return;
  }
?>
<script type='text/javascript'>
  ( function ( $ ) {
    $( document ).ready( function () {
      $( 'body' ).on( 'submit.edit-post', '#post', function () {
        if ( $( "#title" ).val().replace( / /g, '' ).length === 0 ) {
          if ( !$( "#title-required-msj" ).length ) {
            $( "#titlewrap" )
            .append( '<div id="title-required-msj"><em>Field is required.</em></div>' )
            .css({
              "padding": "5px",
              "margin": "5px 0",
              "background": "#ffebe8",
              "border": "1px solid #c00"
            });
          }
          $( '#major-publishing-actions .spinner' ).hide();
          $( '#major-publishing-actions' ).find( ':button, :submit, a.submitdelete, #post-preview' ).removeClass( 'disabled' );
          $( "#title" ).focus();
          return false;
        }
      });
    });
  }( jQuery ) );
</script>
<?php
}
add_action( 'edit_form_advanced', 'cc_require_post_title' );
/* END: Require Post Title (i.e. Job Name) for Projects */
?>

Optional STEP 5: Another optional step is to replace the placeholder text for this field. Remember, by default, WordPress uses the Placeholder: Enter Title Here

The example below shows how to Blank it out, but you can change the text to whatever you like. Also, you can make certain that it is only for specific post types. As you can see in the example, I am blanking out the Placeholder text for both the ‘customers’ and ‘projects’ post types.

<?php
/* START: Blanks the 'Enter title here' text when adding Customers/Projects */
function cc_change_title_text_for_cpts($title) {
  $screen = get_current_screen();
  if ('customers' == $screen->post_type || 'projects' == $screen->post_type) {
    $title = '';
  }
  return $title;
}
add_filter( 'enter_title_here', 'cc_change_title_text_for_cpts' );
/* END: Blanks the 'Enter title here' text when adding Customers/Projects */
?>

I hope this was helpful for you. I know that it isn’t precisely what you were asking. I will subscribe to this thread and get email alerts if you need further help. But, if it works for you, please let me know!