Meta Box Script 4.0 Needs Your Collaboration

collaboration Meta Box Script 4.0 Needs Your Collaboration

It’s been a while since the version 3.2.2 of Meta Box Script was released. I was working on this script for refactoring, making a good architect for it so that users and developers can easily use and customize it. The result of refactoring (which I call v4.0 beta) is put on GitHub. There’re many major changes in this version:

1. Make it a plugin

Although the script can work as a stand-alone package, making it a plugin can help it uses plugin advantages (such as functions to detect plugin’s path, URL). It also helps submitting the script to WordPress repository to make it’s easy to update (this is planned, and will be done after the v4.0 is completed).

2. Separating field functions (enqueue scripts and styles, add actions, show, save) into separated classes

Wrap all field things in one file can make us easy to have an overview of the structure, but it makes the process of optimizing, improving or fixing bugs more difficult. I decided to separate all these things into their own files to avoid those problems.

3. Use filters to let user change HTML of fields

As you know, in previous version the only way to change HTML markup of a field is overwrite it. That’s not a good approach, at least for end users, and it’s not the WordPress way! I decide to use filters to make it more easy to handle that thing.

4. Use filters to validate/change field values instead of validation class

For the same reason as #2, using filters to change/validate field values makes the process of validating more WP-friendly and easier. But I still haven’t found a way to show validate messages.

5. Don’t use Ajax on image upload as it’s buggy and complicated. Revert to default upload

While the image upload with Thickbox is good, it causes many problems of inserting images. So many many comments complaint about this. I also received some request that change the uploader back to normal upload, just for simplicity. So, in this version, I decide to drop Thickbox uploader (it’ll be dropped in WordPress 3.3 anyway).

6. Use local JS/CSS libs instead of remote files for better control if conflict occurs

Using jQuery UI at Google CDN is good, but not the best. We don’t use all the modules of jQuery UI, and the redundancy may make our script conflicts with others. Keep everything simple can help us detect the problems if they present.

I must say that, only the architect of the script is change. The way it works or the way users define meta boxes remain unchanged. So, at the point of view of end-users, you don’t need to change anything.

There’re many works around this version: check (optimize) the code architect, fix bugs that have been reported, write documentations. And I really need your help! All you need is fork the project on GitHub, create patch and send pull requests.

There’re 3 things that you can help me on collaboration:

  • Bug hunting: using the Issues of GitHub to report
  • Code collaboration: using the pull request to send your patch
  • Documentation: I’m not sure the Wiki on GitHub helps

Not only me, but hundreds of users appreciate your help! So, let’s do the great work now.

Visit the Meta Box Script on GitHub

42 Comments

  1. Hi Rilwis,

    I’m using the metabox script 3.2.2 on a website for my client. The website has been built, with lots of custom metboxes using the metabox script.

    i’d like to upgrade the metabox script to version 4 to fix a minor bug. Can you please confirm it’s OK to upgrade to version 4? Is the way data is stored in the database exactly the same as before? (I’m afraid that when I upgrade, all my old metabox data might suddenly disappear).

    Thanks,
    David.

    Reply
    • Hi David, yes, you can upgrade to version 4.0. All the changes I made is only in the backend. Nothing changes from the API or how the meta fields are saved.

      Reply
  2. Hello,

    For some reasons I use the previous version of this script but anyway, there is an issue I’m sure it will interest everbody there… The way the file uploader handle the data, saving the ID of the attachment in a custom field, is a matter of conflict with the Wordbooker plugin (auto-publish to a FB account) which uses to look for a custom field data containing the URL of a an image to generate a Facebook post’s thumbnail.
    Actually, I wonder if there is a way to store the URL of any attachment uploaded from the metabox in a custom field in place or in addition of the existing method. Thanks!

    Reply
  3. Another good meta-box has had an update and has managed to include the new media uploader and also managed to make it so images are not just individual to that post…

    http://www.billerickson.net/custom-metaboxes-0-point-7/

    Only negative compared to this script is you cannot add more than one image… :(

    Perhaps someone can combine the two as i wouldn’t know where to start….

    (ello Kai)

    Reply
    • If I’m not wrong, this script is based on my script v2.x or 3.x. I’ve just looked at the code on GitHub and found many similar parts, even the comments. There’s still no credits though.

      As the WP 3.3 hasn’t officially released, and there’re many people still using WP 3.2.1, I think the new media uploader isn’t a good choice at the moment. I’m waiting for WP 3.3, and when it’s ready I’ll update script to support new media uploader and new WYSIWYG editor.

      Reply
  4. Hi Rilwis,

    just tried to contact you through your contact form but the required captcha didn’t show up :/ Didn’t find an email adress either.

    I’d like to share an idea and some thoughts with you.
    To give you a hint what I’d like to talk about please refer to this video on Screenr: http://www.screenr.com/Whoops/NoScreencast

    Short explanation: ‘Kontentblocks’ are similar to WordPress widgets, but on a per-post /per-page basis (or any custom post type).

    If this sounds interesting to you I’d be glad if you contact me via Twitter ( @ungestaltbar ) or simply write an email.

    kind regards
    kai

    PS: oh, and hey jez! :)

    Reply
  5. First of all, It is a great plugin. One question: It is possible to create Custom HTML for complex meta boxes? Could you please show an example?
    thanks.

    Reply
    • In the demo/demo.php file there’s an example. Please see the method html() of the class Taxonomy_Term

      Reply
      • I checked the demo.php. In this file you create custom HTML for specific input types (checkbox and select). How to create a costom HTML for a meta-box, it is possible? I have some different inut fields in a Meta box and I would like to organize them into coulmns and so.

        Reply
      • Now I use your 1.0 script because there I can create custom HTML for meta boxes. :)

        Reply
  6. In version 3.3 WordPress seems to be using Plupload, a JQuery UI plugin that switches the way it uploads depending on what is available; whether it be HTML5, Flash, Silverlight, etc.

    Reply
  7. Count me in on the dev team, I’ve already created a fork.

    As for the ThickBox image loader, I think this could be still viable. I had debugged the code on v3.2 and was getting close to a solution. The main issue was that the html returned from the interface needed refactoring before being appended to UL. So don’t completely write it out as a v4.0 feature, I’ll work on adding it into my fork.

    Finally, I had changed all the table rows/cells into inline-blocks- This allowed greater flexibility on doing things like having multiple fields on one line, or creating columns and fieldsets.

    Reply
    • Thanks Andrew! I’m also reviewing the code and if you can help, I really appreciate! Just submit a pull request when you’ve done something.

      Reply
  8. hi

    in this version are the images uploaded together still saved in an array Like version 3.2.2 – or does each image have its own ID?

    Reply
    • All the back-ends (i.e. how the plugin works) is the same as version 3.2.2. All I do is make the code better and easier to extend.

      Reply
      • ok thanks.

        Is the advanced script version of 3.2.2 still available? the download link isnt working?

        Reply
  9. Dear Rilwis, could you please show some exaple how the validation works? I know the message will not show up, but it is ok.

    Reply
    • Hi Nattila. In version 4.0 I use filters to change/validate/normalize meta value. Please see the code below and you’ll got it.

      /**
      * Use filter to change field value
      * 1st filter applies to all fields with the same type
      * 2nd filter applies to current field only
      */
      $new = apply_filters( “rwmb_{$field['type']}_value”, $new, $field, $old );
      $new = apply_filters( “rwmb_{$field['id']}_value”, $new, $field, $old );

      Reply
  10. First of all, I love the way things are going with this. Separating the fields as their own classes is a stroke of genius and embodies OOP pretty well. I learned a lot just gleaning off your code.

    I have a question for you. Looking at the new code base, I’m seeing a lot of use of static methods. I was wondering what constitutes the use of static vs. regular methods in a class. I’ve never found the need or use of them but I’ve been itching to figure out where to use them in code.

    Reply
    • Using static method have some cool advantages:
      – Avoiding multiple instances of a class method for many objects (meta boxes): If you have 1 meta box, this is ok. But if you have 2 or more meta box, the methods of the class will be duplicated. Using static functions instead of normal ones can help us use only one method for all class instances.
      – Ability to call class methods outside the class: this is how I set up the static methods in all field classes, and call them in the main class. Please see the apply_field_class_filters() function for detail.

      Reply
  11. Im on Macbook pro, WP is Version 3.2.1 on a fresh install with no other plugins added and using twentyeleven and twentyten themes. This is the error I get:

    “Fatal error: Class ‘RW_Meta_Box’ not found in /Applications/MAMP/htdocs/maek-marley/wp-content/themes/twentyeleven/demo.php on line 242″

    I then just downloaded WP 3.3 Beta 2 and installed. activating the plugin nothing happens at all – nothing appears on the post or pages.

    If I deactivate the plugin and use the demo file – add include ‘demo.php'; to functions and place demo.php in the theme file I see this Fatal error: Class ‘RW_Meta_Box’ not found in /Applications/MAMP/htdocs/wp33/wp-content/themes/twentyeleven/demo.php on line 242

    Then I just noticed on WP 3.2.1 and 3.3 If I activate the plugin AND use the demo script I do see the Survey meta box on the page. On this posts I get these errors below, but the meta boxes do appear below the errors.

    Notice: Uninitialized string offset: 0 in /Applications/MAMP/htdocs/wp33/wp-content/themes/twentyeleven/demo.php on line 57

    Notice: Uninitialized string offset: 0 in /Applications/MAMP/htdocs/wp33/wp-content/themes/twentyeleven/demo.php on line 59

    Notice: Uninitialized string offset: 0 in /Applications/MAMP/htdocs/wp33/wp-content/themes/twentyeleven/demo.php on line 61

    Notice: Uninitialized string offset: 0 in /Applications/MAMP/htdocs/wp33/wp-content/themes/twentyeleven/demo.php on line 61

    Notice: Uninitialized string offset: 0 in /Applications/MAMP/htdocs/wp33/wp-content/themes/twentyeleven/demo.php on line 65

    Notice: Uninitialized string offset: 0 in /Applications/MAMP/htdocs/wp33/wp-content/themes/twentyeleven/demo.php on line 72

    Reply
      • Hey

        I downloaded the updated version and replaced the old. One thing, and let me know if this is correct. If I activate the plugin AND add demo.php to my theme, twentyeleven, and add include ‘demo.php'; everything works.

        If I dont activate the plugin, and only add demo.php to my theme, twentyeleven, and add include ‘demo.php'; to the functions file I get the error: Fatal error: Class ‘RW_Meta_Box’ not found in /Applications/MAMP/htdocs/maek-marley/wp-content/themes/twentyeleven/demo.php on line 242

        If I only activate the plugin nothing happens at all.

        PS: u in Vietnam? Im in Singapore

        Reply
        • Hi Rob,

          1st way is correct. As this script is a plugin now, you must activate it before using.

          After activating, you have to copy ‘demo.php’ to theme folder, and include it in ‘functions.php’ file. That’s all ;)

      • You might also add a line to the end of demo.php to check if the class exists, that way you won’t get an error message. Something like:


        if (class_exists('RW_Meta_Box')) {
        foreach ( $meta_boxes as $meta_box ) {
        new RW_Meta_Box( $meta_box );
        }
        }
        else {
        echo 'Meta box plugin not found!';

        }

        Reply
  12. Hey

    Just downloaded and tried on a fresh install of WP 3.2.1 and activating the plugin simply does nothing – nothing appears on pages or posts. Adding the demo file to my themes folder – twentyeleven and twentyten – and the include code in functions causes the admin to disappear. Looking forward to using this new version though as Ive used the previous versions of the Meta Box script. Keep up the great work!

    Reply
    • Do you see any errors when turn on the WP_DEBUG? I’m testing it on my localhost and don’t see the problem :(. Anyway, have you followed the instruction in the Wiki (at GitHub)?

      Reply
      • Hey

        I turned on wp_debug in the config file and added the include code in functions and get this message “Fatal error: Class ‘RW_Meta_Box’ not found in /Applications/MAMP/htdocs/maek-marley/wp-content/themes/twentyeleven/demo.php on line 242″

        When I just activate the plugin, no error but nothing appears in the admin on posts or pages.

        Thanks

        Reply
  13. One thing it needs (and i’m trying to work it out at the second…) is toggle wysiwyg editor between visual and html..

    Reply
    • Karl! I was crazy searching for a way to have this too, and accidentally (after days trying) I came across a nice solution. There is a simple AD_FILTER function that adds a HTML button to the end of the row of buttons of your TinyMCE (the WYSIWYG editor). Pressing it opens a quick thickbox window with the HTML field on it.

      I am at home right now and I don’t have access to my files, so please email me at cosme [at] falejazz [dot] com and tomorrow I will be glad to share with you. And to post here too!

      Regards,
      C.

      Reply
  14. Good work!

    I find the metabox script invaluable in all of the themes I build – it’s a really important part of how I build websites using WordPress and I’d gladly pay for a license, so having it for free is amazing.

    I’m excited to hear it’s continuing to evolve, but one thing I’d like to feed back to you is that it’s really important for me to be able to use the script as part of the theme instead of as a plugin, so I hope this is something that isn’t dropped in future versions in favour of making it 100% a plugin.

    Thanks again :)

    Reply
    • Hi David. I’m glad that you use it in all of your themes! And don’t worry about the plugin version, you can easily continue using it as a stand-alone script just by including its file.

      Reply
      • I agree with David invaluable, great work.

        Would it be possible to add some simple install instructions for the version (4.0) on GitHub?

        As the instructions on the project page, seem to be out of date now since you updated it all..

        Reply
        • I assume because its still a kind of beta, but it doesn’t work out of the box, using the instructions on the wiki.

          A few errors in the demo.php… :(

Leave a Reply