WP SITES

Log in

PHP Code For Adding Custom Meta Box With WP Editor

—

by

Brad Dalton

There’s no real need to create meta boxes for use with custom fields because WordPress already includes a custom field meta box.

You can use the native custom fields meta box with unlimited custom fields however creating your own is pretty special once you know how it all works.

So lets take a look at all the code you need to make your own meta box.

Firstly, here’s the finished product which the code generates from your child themes functions file.

custom meta box

You’ll need at least 4 separate functions to generate this box and 5 if you’re not using a theme like Genesis.

Note: Always backup your database before adding PHP code which saves new data.

Register for full access

How The Code Works

  1. The code firstly registers a meta box with up to 7 parameters hooked into add_meta_boxes. You could also use the add_meta_boxes_post hook.
  2. It then uses a callback function with wp_create_nonce so data isn’t duplicated in the database and displays the meta box on your Edit Post screens.
  3. After this it runs through several checks, uses wp_verify_nonce to make sure the nonce is valid and not a duplicate as well as checking the capability of the user using current_user_can before using save_post for saving your content to your database. Also uses update_post_meta if you change the value for your custom field on a specific post.
  4. The last 2 code snippets basically create a function which you can use with a hook and/or conditional tag to display your custom fields content on the front end if NOT using Genesis.

In this example i’ve added a small editor because it makes it easy to add any type of content and generates HTML.

The name of the custom field is custom_field_box which you can replace with your own.

Related Tutorials

Comments

6 responses to “PHP Code For Adding Custom Meta Box With WP Editor”

  1. Hand Coded Meta Box for Genesis

    […] PHP Code For Adding Custom Meta Box With WP Editor […]

  2. Beginners Guide To Adding Custom Fields In WordPress

    […] the code for a custom meta box and we'll also take a look at some plugins that do the same job for non […]

  3. AndyiBM Avatar
    AndyiBM

    Hi Brad – this works brilliantly (for posts), although I can only get it to work with ‘posts’ and no other post types I use.

    I have added additional ‘add_meta_box’ for each post type (this has always been enough for meta boxes I use currently), and the WYSIWYG Meta Box is being displayed on each post type’s edit screen, but the content is not getting saved.

    I have looked at editing the ‘save_meta_box_content’ function, adding my post types in with the post, but this doesn’t work.

    Is there another snippet I need to be adding? (I’m not using Genesis)

    Many thanks,

    Andy

    1. Brad Dalton Avatar
      Brad Dalton

      Hey Andy

      I did test the code which is written for posts not custom post types so it won’t work in all cases unless its modified correctly.

      You need to create a custom field using the native meta box first and save it before using the custom meta box with editor.

      There’s another snippet i coded recently however it to will need to be modified correctly to work properly.

      1. AndyiBM Avatar
        AndyiBM

        I really appreciate the prompt reply, Brad 🙂

        I’ve been doing some further digging, and it does seem that the wp_editor can be a little breakable – at least when adding to client/public themes… I found this code here: https://core.trac.wordpress.org/ticket/19173 which works pretty well for my immediate purposes on my own site, but I wouldn’t want to add it to anything I handed over to clients.

        Your ‘Add Custom Meta Box For Text Area’ solution appears to be very robust and a perfect alternative (if and when the WYSIWYG plugin breaks) – easy enough for me to use HTML in order to add content for each post outside of the displayed loop.

        Many thanks, Brad.

        Andy

        1. Brad Dalton Avatar
          Brad Dalton

          No worries Andy.

          Always trying to write better code and the 2nd snippet is better in my opinion which you can also modify and add the editor too.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.