{"id":1973,"date":"2024-08-11T06:35:00","date_gmt":"2024-08-11T00:35:00","guid":{"rendered":"http:\/\/directorist.com\/blog\/?p=1973"},"modified":"2024-12-01T13:07:14","modified_gmt":"2024-12-01T07:07:14","slug":"directorist-custom-fields","status":"publish","type":"post","link":"https:\/\/directorist.com\/blog\/directorist-custom-fields\/","title":{"rendered":"Directorist Custom Fields – Elevate Your Directorist Experience with Custom Fields"},"content":{"rendered":"\n

WordPress is much like Disneyland because as a CMS, one can imagine every design or functionality to embellish their website anytime anywhere. This holds even if you are making a directory website<\/a> using Directorist.<\/p>\n\n\n\n

Now, you may probably be wondering why you need to implement custom fields on your directory website, right? Well, the answer is preference varies from person to person, that is, one needs a particular feature while others don’t. with the Custom Fields option in Directorist, you can reflect your preference on your directory website like a pro.<\/p>\n\n\n\n

In this article, we will show how you can make your directory submission form personalized exactly the way you want. No more flapdoodles, let’s jump right in.<\/p>\n\n\n\n\n\n

Directorist Custom Fields – How They Benefit You<\/span><\/h2>\n\n\n\n

Simply put, custom fields will help you customize the submission form of add listing page and other pages like the single listings page and even the search filter form. We assume that you are already using Directorist and you have the following submission form on your add listing page for your users:<\/p>\n\n\n

\n
\"directorist<\/figure>\n<\/div>\n\n\n

As you can see, it contains default options such as General Option, Contact Information, Map, Images and Video. <\/p>\n\n\n\n

Suppose you want to customize the preset fields of General Section with custom fields. And the current General Section includes the following fields:<\/p>\n\n\n\n

    \n
  • Title <\/li>\n\n\n\n
  • Description<\/li>\n\n\n\n
  • Tagline<\/li>\n\n\n\n
  • Pricing <\/li>\n\n\n\n
  • Location<\/li>\n\n\n\n
  • Tag<\/li>\n\n\n\n
  • Category<\/li>\n<\/ul>\n\n\n\n

    How can you customize? Simply follow these steps:<\/p>\n\n\n\n

    Customizing Submission Form with Custom Fields<\/span><\/h2>\n\n\n\n

    In this article, we will only walk you through the process of customizing the submission form with custom fields. That’s because the customization process is more or less the same in the case of other pages. Now, let’s begin:<\/p>\n\n\n\n

    Step 1: Go to the Custom Field Options<\/span><\/h3>\n\n\n\n

    Next, up, you need to navigate to the WP Admin Dashboard > Directory Listings > Directory Builder<\/strong> ><\/strong> Submission Form > Form Fields.<\/strong> Here you will be able to see both preset fields and custom fields. <\/p>\n\n\n

    \n
    \"navigate<\/figure>\n<\/div>\n\n\n

    Step 2 : Start Customizing the Fields<\/span><\/h3>\n\n\n\n
      \n
    • Deleting a preset field:<\/strong><\/li>\n<\/ul>\n\n\n\n

      Now, let’s delete the tagline field for example. You can do it either by clicking on the delete sign located on the right side of the field.<\/p>\n\n\n

      \n
      \"\"<\/figure>\n<\/div>\n\n\n

      Or by dragging and dropping the field from left to right section under the Preset Field option. After you delete an active field from the menu it will appear at the Preset Field section.<\/p>\n\n\n

      \n
      \"preset<\/figure>\n<\/div>\n\n\n

      Adding a custom field:<\/strong><\/p>\n\n\n\n

      To add custom field, hover your mouse over the Custom Fields area and click on any field or simply drag and drop them to the General section. Here for instance, we are selecting the text field:<\/p>\n\n\n

      \n
      \"custom<\/figure>\n<\/div>\n\n\n

      you can also customize the parameters of the text field like changing the Label, Key, Placeholder, Description, Required, Only for Admin Use, etc. In this example, we are going to change the Label to “Test Field” from ‘Text’.<\/p>\n\n\n

      \n
      \"change<\/figure>\n<\/div>\n\n\n

      Now, save changes by hitting the “Update” button from below.<\/p>\n\n\n

      \n
      \"update<\/figure>\n<\/div>\n\n\n

      That’s it! You have customized the Submission Form of Add Listing.<\/p>\n\n\n\n

      Seeing the Custom Field from the Frontend<\/span><\/h3>\n\n\n\n

      Now, reload the add listing page to see the changes we have made just now. After that, you will be able to see that the Tagline has gone and the new “Test Field” has been added there.<\/p>\n\n\n

      \n
      \"frontend<\/figure>\n<\/div>\n\n\n

      That’s Not the End! You Can Add an Entire Section too!<\/span><\/h2>\n\n\n\n

      However, if you want to add and entire section, feel free to use the Custom Field option. To do so, select the Add Section option from the Submission form. <\/p>\n\n\n\n

      \"add<\/figure>\n\n\n\n

      After selecting the “Add Section” option, you will see a pencil icon to change the Group Name:<\/p>\n\n\n

      \n
      \"Change<\/figure>\n<\/div>\n\n\n

      Now, click the pencil icon again to hide the Group Name option. <\/p>\n\n\n\n

      Next up, let’s take the URL field and File Upload field to the Extra Section area:<\/p>\n\n\n

      \n
      \"select<\/figure>\n<\/div>\n\n\n

      You can also change the attributes of these fields. For example:<\/p>\n\n\n\n

        \n
      • Label<\/li>\n\n\n\n
      • Key<\/li>\n\n\n\n
      • Choose a File Type<\/li>\n\n\n\n
      • File Size<\/li>\n\n\n\n
      • Description<\/li>\n\n\n\n
      • Required<\/li>\n\n\n\n
      • Only for Admin Use<\/li>\n<\/ul>\n\n\n
        \n
        \"attributes<\/figure>\n<\/div>\n\n\n

        Don’t forget to hit the Update button to save the changes.<\/p>\n\n\n\n

        Now, let’s see from the frontend if this Extra Section do appear:<\/p>\n\n\n

        \n
        \"add<\/figure>\n<\/div>\n\n\n

        There you go! The Extra Section appears at the end of the Submission form.<\/p>\n\n\n\n

        \n