WordPress custom post type admin page layout

So I am creating a plugin which uses custom post types and I want to create custom layout/UI

I am aware of meta boxes, but I believe this is not the way forward.

Read More

Currently I am using this:

add_action('edit_form_advanced', 'my_add_to_core');

function my_add_to_core() {
    global $post;
    if ($post->post_type == 'my_post_type') {

        $tabs = [
            'General',
            'Settings',
            'Extras'
        ];

        ?>
            <div class="my-container">
                <div class="tab-group">
                    <nav>
                        <ul>
                            <?php $i = 0; foreach ($tabs as $tab) { ?>
                                <?php
                                    $i++;
                                    $title = $tab;
                                    $slug = sf_safestring($tab);
                                    $classes = '';
                                    if ($i == 1) $classes .= 'active';
                                ?>
                                <li class="<?= $classes; ?>"><a href="#<?= $slug; ?>"><?= $title; ?></a></li>
                            <?php } ?>
                        </ul>
                    </nav>
                </div>
                <div class="tabs">
                    <?php $i = 0; foreach ($tabs as $tab) { ?>
                        <?php
                            $i++;
                            $title = $tab;
                            $slug = sf_safestring($tab);
                            $classes = 'tab tab_'.$slug;
                            if ($i == 1) $classes .= ' active';
                        ?>
                        <div class="<?= $classes; ?>">
                            <h3><?= $title; ?></h3>
                        </div>
                    <?php } ?>
                </div>
            </div>
        <?php
    }
}

This doing what I expect, adding my HTML to the core page layout.

Heres the outputted layout:

Out putted html

But I feel this is not the right way to do it. It feels a little hacky.

Can anyone advise?

Related posts

1 comment

  1. Custom Meta Boxes is the correct way to setup your layouts for Custom Post Types.

    Meta boxes are fully supported, portable groups of content. They have an array of pre-designed styles you can use just by inspecting and copying different class names from the core meta boxes. End users can also reorganize the meta boxes if they are not layed out in a way they are comfortable working. Beyond that, from the screens dropdown people can enable and disable the visibility of each meta box. You can also program default locations for each meta box to “start at”.

    If you want to make things a little faster for development you can use a a framework thats very powerful, popular and commonly used in the WordPress community. Its called ACF or Advanced Custom Fields. It can help you build your custom meta boxes for a premium CPT workflow.

    http://www.advancedcustomfields.com/

    I personally don’t use it, as upgrading major versions can require a large update on all projects using the code. That said, it will shave days of development time off your plate and does some pretty amazing things out of the box.

Comments are closed.