{"id":30019,"date":"2022-09-27T09:54:02","date_gmt":"2022-09-27T09:54:02","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=30019"},"modified":"2023-07-28T12:40:15","modified_gmt":"2023-07-28T12:40:15","slug":"adding-custom-controls-and-columns-to-related-items","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/","title":{"rendered":"How to Add WordPress Custom Controls and Custom Columns to Related Items"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"element-with-one-object\">Element with One Object<\/h2>\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">Before proceeding with the tutorial\u2032s steps, create a backup or replicate the actions on the staging site. The backup ensures the website restoration if an error occurs. To learn more, proceed to the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-backup-restore-wordpress-website\/\">How to Backup and Restore a WordPress Website with a Plugin<\/a> article.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading item-1 mb-40\" id=\"paste-the-following-code\">Paste the following code<\/h3>\n\n\n\n<p class=\"offset\">Head to the <strong><em>WordPress Dashboard &gt;<\/em><\/strong> <strong><em>Appearance &gt; Theme Editor<\/em><\/strong>. Open the <strong>Theme Functions <\/strong>tab of your currently active WordPress theme.<\/p>\n\n\n\n<script src=\"https:\/\/gitlab.com\/-\/snippets\/2412120.js\"><\/script>\n\n\n\n<p class=\"offset\">Let\u2019s take a closer look at the code components.<\/p>\n\n\n\n<p class=\"offset\">This code adds a new text field to the \u201cAdd New \u2026\u201d pop-up for the specified relation and saves the data typed in the field.<\/p>\n\n\n\n<p class=\"offset\">The &#8216;jet-engine\/relations\/types\/posts\/create-fields&#8217; hook should be changed depending on the data type. This particular hook works with posts.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/hook-for-posts-full.png\" alt=\"hook for posts\">\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">New fields can also be added to the new related CCT item creation pop-up. However, these settings can be found by following the WordPress Dashboard <i><b>JetEngine<\/b><\/i> tab and <i><b>Relations<\/b><\/i> pathway and proceeding to the needed relation and its <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-related-custom-content-type-items\/#content-type-related-settings\">Content Type Related Settings<\/a>. <\/p><\/div><\/div>\n\n\n\n<p class=\"offset\">The hook for terms:<\/p>\n\n\n\n<pre class=\"wp-block-code offset\"><code>jet-engine\/relations\/types\/terms\/create-fields<\/code><\/pre>\n\n\n\n<p class=\"offset\">The hook for users:<\/p>\n\n\n\n<pre class=\"wp-block-code offset\"><code>jet-engine\/relations\/types\/mix\/create-fields\/users<\/code><\/pre>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/text-field-code-components-full.png \" alt=\"text field component\">\n\n\n\n<ul class=\"offset\">\n<li><strong>\u2018tour\u2019<\/strong> \u2014 a value that stands for the post type to which you want to add additional fields;<\/li>\n\n\n\n<li><strong>\u2018_duration-time\u2019<\/strong> \u2014 a name that was used during the meta field creation;<\/li>\n\n\n\n<li><strong>\u2018Duration Time\u2019<\/strong> \u2014 a title label that will be displayed in a pop-up;<\/li>\n\n\n\n<li><strong>\u2018text\u2019 <\/strong>\u2014 a type of field shown in a pop-up while adding a new item.<\/li>\n<\/ul>\n\n\n\n<p class=\"offset\">Hit the \u201c<strong>Update File<\/strong>\u201d button and proceed to the post where the new field can be seen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading item-2 mb-40\" id=\"proceed-to-the-post\">Proceed to the post<\/h3>\n\n\n\n<p class=\"offset\">For instance, we go to the \u201cCountry\u201d CPT as we have set it as the parent post type. And, as the child \u201cTour\u201d post type is related to it, we can see the pop-up for creating new related items in the parent post type posts.<\/p>\n\n\n\n<p class=\"offset\">Hover on any post and click the \u201c<strong>Edit<\/strong>\u201d button to see the changes.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/cpt-post-edit-button-full.png\" alt=\"cpt post edit button\">\n\n\n\n<p class=\"offset\">Click the \u201c<strong>Add New \u2026<\/strong>\u201d button in the related items editor. Now you can see the field we have added; let\u2019s complete it with some data and push the \u201c<strong>Add New \u2026<\/strong>\u201d button to save the result.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/new-added-text-field-full.png\" alt=\"new added text field\">\n\n\n\n<p>The new item appears on the list. Let\u2019s push the \u201c<strong>Edit<\/strong>\u201d button to see if the completed data has been saved.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/new-related-item-in-the-list-full.png\" alt=\"new related item in the list\">\n\n\n\n<p>Once the post is opened, check that the meta field is filled with data.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/text-field-in-the-new-post-full.png\" alt=\"text field in the new post\">\n\n\n\n<p>Remember that you can add other meta fields with similar code besides the text meta field.<\/p>\n\n\n\n<p class=\"offset\"><strong>NOTE.<\/strong> &#8216;text&#8217;, &#8216;media&#8217;, &#8216;date&#8217;, &#8216;time&#8217;, &#8216;textarea&#8217;, &#8216;datetime-local&#8217; values to output these fields in the pop-up.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">Use  \u2032text s steps, create a backup or replicate the actions on the staging site. The backup ensures the website restoration if an error occurs. To learn more, proceed to the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-backup-restore-wordpress-website\/\">How to Backup and Restore a WordPress Website with a Plugin<\/a> article.<\/p><\/div><\/div>\n\n\n\n<p class=\"offset\">For instance, let\u2019s check the media field.<\/p>\n\n\n\n<p class=\"offset\">We add the following example. Don\u2019t forget that you should change the type to \u2018media\u2019 in this case.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/media-field-code-full.png\" alt=\"media field code\">\n\n\n\n<p>Click the \u201c<strong>Update File<\/strong>\u201d button and head to the post. Once the \u201c<strong>Add New \u2026<\/strong>\u201d button is clicked, you can see the newly added media field.<\/p>\n\n\n\n<p class=\"offset\">Now you can easily upload files right in the related items editor. Push the \u201c<strong>Select or upload image<\/strong>\u201d button to choose the picture and save the changes by pressing the \u201c<strong>Add New \u2026<\/strong>\u201d button.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/new-added-media-field-full-1.png\" alt=\"new added media field\">\n\n\n\n<p>The data will also be saved in the new post.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"element-with-several-objects\">Element with Several Objects<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<p>There is also a possibility to add some fields that contain several components. You can add &#8216;checkbox&#8217;, &#8216;select&#8217;, and &#8216;radio&#8217; fields with similar codes. For instance, let\u2019s add the code of the Checkbox field.<\/p>\n\n\n\n<h3 class=\"wp-block-heading item-1 mb-40\" id=\"paste-the-code\">Paste the code<\/h3>\n\n\n\n<p class=\"offset\">Go to <strong><em>WordPress Dashboard &gt;<\/em><\/strong> <strong><em>Appearance &gt; Theme Editor<\/em><\/strong>, and open the <strong>Theme Functions <\/strong>tab of the currently active WordPress theme. Add the following code:<\/p>\n\n\n\n<script src=\"https:\/\/gitlab.com\/-\/snippets\/2412685.js\"><\/script>\n\n\n\n<p class=\"offset\">Now let\u2019s check the code components. The first part of the code includes such changeable elements:<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/checkbox-code.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/checkbox-code-full.png 2x\" alt=\"checkbox code\">\n\n\n\n<ul>\n<li><strong>&#8216;jet-engine\/relations\/types\/posts\/create-fields&#8217;<\/strong> \u2014 a hook that can be changed depending on the source. You can change it into the hook for terms (jet-engine\/relations\/types\/mix\/create-fields\/users) or users (jet-engine\/relations\/types\/terms\/create-fields) depending on your needs;&nbsp;<\/li>\n\n\n\n<li><strong>&#8216;tour&#8217;<\/strong> \u2014 a post type;&nbsp;<\/li>\n\n\n\n<li><strong>&#8216;included&#8217; <\/strong>\u2014 the checkboxes meta field value;<\/li>\n\n\n\n<li><strong>&#8216;Included&#8217; <\/strong>\u2014 label you want to be displayed as the checkboxes title in the pop-up;<\/li>\n\n\n\n<li><strong>&#8216;checkbox&#8217;<\/strong> \u2014 a field type that you are currently adding;<\/li>\n\n\n\n<li><strong>&#8216;accommodation&#8217; <\/strong>\u2014 a checkboxes option value;<\/li>\n\n\n\n<li><strong>&#8216;Accommodation&#8217;<\/strong> \u2014 the title of the value displayed in the pop-up.<\/li>\n<\/ul>\n\n\n\n<p>Add the needed &#8216;array&#8217; options to create the options of the checkboxes.<\/p>\n\n\n\n<p class=\"offset\">The second part of the code saves the data ticked in the checkboxes.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/checkbox-code-full.png\" alt=\"checkbox code\">\n\n\n\n<p>As you have implemented all the changes to the code, don\u2019t forget to push the \u201c<strong>Update File<\/strong>\u201d button.<\/p>\n\n\n\n<p class=\"offset\"><strong>NOTE.<\/strong> If you want to add the Checkbox field, you need to enable the <strong>Save as array <\/strong>toggle. Otherwise, the options you tick in a pop-up will not be saved in the post.<\/p>\n\n\n\n<p class=\"offset\">To do so, head to <strong><em>JetEngine &gt; Post Types <\/em><\/strong>and open the CPT with which you are working by pressing the \u201c<strong>Edit<\/strong>\u201d button.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/checkbox-code-for-saving-data-full.png\" alt=\"checkbox code for saving data\">\n\n\n\n<p>Scroll down to the <strong>Meta fields <\/strong>tab and open the needed Checkbox field settings.<\/p>\n\n\n\n<p class=\"offset\">Switch on the <strong>Save as array <\/strong>feature and push the \u201c<strong>Update Post Type<\/strong>\u201d button.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/checkbox-save-as-array-option-full.png\" alt=\"checkbox save as array option\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"head-to-the-post\">Head to the post<\/h3>\n\n\n\n<p>Open the desired post and click the \u201c<strong>Add New \u2026<\/strong>\u201d button below the <strong>Child \u2026 <\/strong>title. In the newly appeared pop-up, you can tick all the needed options.&nbsp;<\/p>\n\n\n\n<p class=\"offset\">Hit the \u201c<strong>Add New \u2026<\/strong>\u201d button and look if the new item has appeared in the field.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/popup-with-custom-checkbox-full.png\" alt=\"pop up with custom checkbox\">\n\n\n\n<p>Proceed to the post editor by clicking the \u201c<strong>Edit<\/strong>\u201d button next to the new item.<\/p>\n\n\n\n<p class=\"offset\">Now the result is saved in the post meta field.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/ticked-checkbox-in-newly-added-post-full-1.png\" alt=\"ticked checkbox in the newly added post\">\n\n\n\n<p>Don\u2019t forget that you can also create some other fields with several objects and save the picked result in the post right during the post creation.&nbsp;<\/p>\n\n\n\n<p class=\"offset\">Now let\u2019s check how to add custom columns to the related items.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"custom-columns-in-the-related-items-editing-ui\">Custom Columns in the Related Items Editing UI<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading\" id=\"find-out-the-relationship-id\">Find out the relationship ID<\/h3>\n\n\n\n<p>Firstly, find out the ID of the relation you are working with. To do so, proceed to the <strong><em>JetEngine &gt; Relations <\/em><\/strong>directory and press the \u201c<strong>Edit<\/strong>\u201d button next to the desired relation.<\/p>\n\n\n\n<p class=\"offset\">Look at the page URL and copy the number in the slug. We will use it in the code.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/relationship-id-full.png\" alt=\"relationship id\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"paste-the-code\">Paste the code<\/h3>\n\n\n\n<p>Go to <strong><em>WordPress Dashboard &gt; Appearance &gt; Theme Editor <\/em><\/strong>and open the <strong>Theme Functions<\/strong> tab.<\/p>\n\n\n\n<p class=\"offset\">Copy and paste the code:<\/p>\n\n\n\n<script src=\"https:\/\/gitlab.com\/-\/snippets\/2412960.js\"><\/script>\n\n\n\n<p class=\"offset\"><strong>NOTE<\/strong>. The meta field values should be separated with the \u201c_\u201d sign, not the \u201c-\u201d. In the second case, the code will not be saved.<\/p>\n\n\n\n<p class=\"offset\">Let\u2019s look at the code components that can be changed according to your requirements.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/custom-column-code-full.png\" alt=\"custom column code\">\n\n\n\n<p>Open the post.<\/p>\n\n\n\n<ul class=\"offset\">\n<li><strong>&#8216;jet-engine\/relations\/types\/posts\/create-fields&#8217;<\/strong> \u2014 a hook for the posts. Mind that you can also use hooks for terms (jet-engine\/relations\/types\/mix\/create-fields\/users) and users (jet-engine\/relations\/types\/terms\/create-fields);<\/li>\n\n\n\n<li><strong>&#8216;child_object\u2019<\/strong> \u2014 a relation object we want to add a custom column. Change into the \u2018parent_object\u2019 if you&#8217;re going to add columns to the table that displays parent items;<\/li>\n\n\n\n<li><strong>&#8216;_duration_time\u2019<\/strong> \u2014 a column identifier;<\/li>\n\n\n\n<li><strong>\u2018Duration Time\u2019<\/strong> \u2014 a visual column title;<\/li>\n\n\n\n<li><strong>&#8216;Not set&#8217; <\/strong>\u2014 a value returned once the meta field is left empty.<\/li>\n<\/ul>\n\n\n\n<p class=\"offset\">Move to the parent object post. Now, next to the \u201cTitle\u201d column, the \u201cDuration Time\u201d and \u201cDeparture\u201d columns will be displayed.<\/p>\n\n\n\n<p class=\"offset\">As you can see, the empty columns show the \u201cNot set\u201d and \u201c&#8211;\u201d values as we specified in the code.<\/p>\n\n\n\n<p class=\"offset\">Push the \u201c<strong>Edit<\/strong>\u201d button next to the item to open the post editor.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/custom-column-in-the-cpt-post-full.png\" alt=\"custom column in the cpt post\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"complete-the-field\">Complete the field<\/h3>\n\n\n\n<p>Fill in the <strong>Duration Time<\/strong> field. Press the \u201c<strong>Update<\/strong>\u201d button to save the changes and return to the parent post.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/completed-duration-time-field-full.png\" alt=\"completed duration time field\">\n\n\n\n<p>Now the column is completed with just entered data.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/completed-duration-time-column-full.png\" alt=\"completed duration time column\">\n\n\n\n<p>This way, you can add the output of any fields in a separate column.&nbsp;<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"offset\">Mind that the codes mentioned in the article can cooperate or work separately. You can find the code example by following <a href=\"https:\/\/gist.github.com\/MjHead\/f215cfbf4e5b1d003d94de63e353d18f\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">the link<\/a>.<\/p>\n\n\n\n<p class=\"offset\">For instance, we can add the fields in the pop-up but not display them in columns. Or show columns in the table for which there are no fields in the creating items pop-up.<\/p>\n\n\n\n<p class=\"offset\">That\u2019s it; now you know how to add WordPress custom controls for new related items and in which way you can add custom columns to the relation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add the desired custom fields for quick customization besides the given Title field in the \u201cAdd New \u2026\u201d pop-up in the related items via the JetEngine hooks. <\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[399],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding Custom Controls and Custom Columns to Related Items | Troubleshooting<\/title>\n<meta name=\"description\" content=\"Learn how to add custom controls and custom columns to related items editing UI with the JetEngine plugin for your WordPress site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Custom Controls and Custom Columns to Related Items | Troubleshooting\" \/>\n<meta property=\"og:description\" content=\"Learn how to add custom controls and custom columns to related items editing UI with the JetEngine plugin for your WordPress site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T12:40:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/hook-for-posts-full.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/\",\"name\":\"Adding Custom Controls and Custom Columns to Related Items | Troubleshooting\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2022-09-27T09:54:02+00:00\",\"dateModified\":\"2023-07-28T12:40:15+00:00\",\"description\":\"Learn how to add custom controls and custom columns to related items editing UI with the JetEngine plugin for your WordPress site.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add WordPress Custom Controls and Custom Columns to Related Items\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Custom Controls and Custom Columns to Related Items | Troubleshooting","description":"Learn how to add custom controls and custom columns to related items editing UI with the JetEngine plugin for your WordPress site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/","og_locale":"en_US","og_type":"article","og_title":"Adding Custom Controls and Custom Columns to Related Items | Troubleshooting","og_description":"Learn how to add custom controls and custom columns to related items editing UI with the JetEngine plugin for your WordPress site.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/","og_site_name":"Help Center","article_modified_time":"2023-07-28T12:40:15+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/hook-for-posts-full.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/","name":"Adding Custom Controls and Custom Columns to Related Items | Troubleshooting","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2022-09-27T09:54:02+00:00","dateModified":"2023-07-28T12:40:15+00:00","description":"Learn how to add custom controls and custom columns to related items editing UI with the JetEngine plugin for your WordPress site.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/adding-custom-controls-and-columns-to-related-items\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Add WordPress Custom Controls and Custom Columns to Related Items"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/30019"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=30019"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=30019"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=30019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}