4elements, web design and consultancy

  1. A Beginners Guide to Titan Framework: Adding a Date Type Option

    In this article, we will explore the date type option in Titan Framework: how it works and what parameters it offers. Find out how you can create a date picker inside a custom WordPress admin panel, a metabox or a customizer section.

    The Date Type Option in Titan Framework

    In Titan Framework, there is a date type option which allows end users to input date and time settings dynamically in their themes. This option loads the entire calendar, and you can set any date of your choice. Here is the layout of this option:

    Adding Date Type Options in Titan

    Let's take a look at the list of parameters which this option supports:

    • name: It defines the display name of the date type option.
    • id: This parameter specifies a unique name which helps to get the saved values.
    • desc: It displays a brief description with the option name.
    • default(Optional) It sets the default date settings. This parameter takes up a specific format of values, i.e. Y-m-d for the date, H:i for the time, and Y-m-d H:i for both date and time.
    • date: (Optional) If false, this option is not shown. It is set to true by default.
    • time: (Optional) If true, this option will appear. It is set to false by default.

    The parameters date and time are boolean by type, whereas the rest are of type string

    Available Containers for the Date Type Option

    The date type option can be created inside: 

    • Admin Panel
    • Admin Tabs
    • Metabox
    • Theme Customizer Section

    This option is created by following a similar code routine irrespective of the container type:

    • Get a unique instance via the getInstance() function.
    • Add an option via the createOption() function.
    • Get the saved values via the getOption() function. 

    However, if you want to learn how these containers are created with Titan Framework, then you can find the details in my previous articles in this series.

    Creating a Date Type Option Inside an Admin Panel

    Example Declaration

    First I'll create this option type inside an admin panel.

    date type option is created inside an admin panel $aa_panel via the createOption() function (line #7). I've defined the parameters id, type, name, desc and default. The ID (i.e. aa_date) should always be unique. 

    The date option in the dashboard

    You can see that the option named My Date Option exists inside an admin panel Neat Options. The default date setting also appears in the above screenshot. 

    Example Usage

    Let's get the saved options values.

    In line #3, an instance is acquired via the getInstance() function, which takes a unique parameter, preferably your theme name (I've used neat). The saved values are retrieved via the getOption() function in line #6, which registers the ID aa_date as a parameter and saves its value in a new variable $aa_date_val.

    The last part of the code prints values at the front-end. In most cases the server can return us an epoch value, which we'll need to convert by using PHP's date() function. Discussion of epoch values is out of the scope of this tutorial, but you can read more about it here.

    Displaying the Result at the Front-End

    Now I'll set any demo date value and save it. For example, I choose 2015-08-20.

    Select a date option

    Let's see its output at the front-end.

    Displaying the date on the front-end

    The saved date setting is correctly printed, with the time. As the parameter for time is disabled for now, no time settings are shown. How do you set the time? I'll come to that in a bit.

    Creating a Date Type Option Inside an Admin Tab

    Example Declaration

    Now I'll add this option in an admin tab, but it will show both date and time settings.

    This time I'm adding a date type option in an admin tab $aa_tab1. Its ID is aa_date_in_tab1_panel2. Look at the parameters list. It shows time is set to true. This means that the time selection is enabled. Note the value format for default, which is set for both date and time.

    Displaying the date option in a tabbed interface

    You can find My Date Option in Tab 1 of admin panel Neat Options 2.

    Example Usage

    Let's retrieve the values.

    There's really nothing new in this code.

    Displaying the Result at the Front-End

    Suppose my demo date and time values are 2015-09-06 and 08:45. There is also a Now button which sets the current time value in one click.

    Selecting a date in the tabbed interface

    The front-end appears like this:

    Displaying the date on the front-end

    Creating a Date Type Option in a Metabox

    Example Declaration

    Let's write its code.

    The createOption() function adds a date type option in a metabox $aa_metbox (line #5). But this code displays only time settings because the date is set to false. That's why I've changed the name and default values of this option accordingly.

    Adding a date option to a meta box

    The above screenshot displays a time selector named Select Time Settings inside a metabox. This appears on all page and post editing screens.

    Example Usage

    Let's get the saved time values.

    I just retrieved the value of time and then converted it with the date() function.

    Displaying the Result at the Front-End

    My demo time value is 13:03.

    Selecting a time from the meta box

    The output prints like this:

    Displaying the result of the time on the front-end

    Creating a Date Type Option in a Theme Customizer Section

    Example Declaration

    In the end, I'll add this option in a theme customizer section.

    Finally, I've added this option following the same procedure in a theme customizer section.

    Adding the date to the Customizer

    The screenshot shows it clearly.

    Example Usage

    Let's get its saved options values.

    I'll get its saved values in the header.php file. So, first get an instance and register the unique ID inside the getOption() function. Next create a div and print the output of variable $aa_sec_date_val via the date() function (line #13).

    Displaying the Result at the Front-End

    Here's a screenshot of the changes which take place.

    Selecting a time and date from the Customizer

    Conclusion

    This is how you can add dynamic date and time settings in your WordPress themes and plugins. This option can come in handy whenever you want the end user to input the date and time for whatever reason. 

    For example, I was building this WordPress theme where I wanted to add an Events custom post type (via a plugin). At that time, I had the option to add any of the most commonly used Event plugins or code a neat little plugin myself. 

    So, instead of providing my client with an event plugin that might have looked like an airplane's cockpit, I used Titan Framework. I used the date type option twice in two different metaboxes for event dates.

    Integrate this option in your project and lessen the burden of writing lengthy code. In my next article, we'll explore the radio type option in Titan Framework.

    Do you have any questions? Post them in the comments below, or reach out on Twitter.

     

    0 Comments

    Leave a comment › Posted in: Daily

0 Comments

Got anything to add?

(Basic HTML is fine)