This stylesheet is a must to include if you build a theme or a plugin that incorporates jQuery UI Date Picker.Whether to add the inline script before the handle or after. Thankfully, the X-Team developers have done all the hardwork for you. In my experience, creating a customised theme for jQuery date picker could be really daunting. It will change accordingly to the user’s selected theme. Now, as you can see below, the theme matches WordPress “Default” admin theme. Wp_enqueue_style('wp-jquery-ui-datepicker', get_template_directory_uri(). Then, add this line below within the hkdc_admin_styles to load the stylesheet in the WordPress admin screen. Copy the CSS stylesheet and put it in the css directory of your theme. You can download the source from its Github repository. It also comes LESS and Sass format which makes it easily customizable. It comes with eight WordPress admin color scheme namely Fresh, Light, Blue, Coffee, Ectoplasm, Midnight, Ocean, and Sunrise (do check out our previous post, Customize WordPress Admin Color Scheme). This Date Picker theme we are going to use is developed by X-Team Developers. But, at least, this code could help you get started. The function uses the ispagetemplate function to check if the current page is using a specific page template (in this case, 'my-page-template.php'). You will be needing some more codes to make that happen. In this example, the enqueuemyscript function is hooked to the wpenqueuescripts action, which is called by WordPress when it is loading scripts and stylesheets. The new input field is not fully functioning yet the input will not pass the data to the database yet when you click the Update button. Please note that this is merely for demonstration. You should now see the Data Picker pop up when you put the cursor in the new input field. Wp_enqueue_script( 'wp-jquery-date-picker', get_template_directory_uri(). Then add the following line under wp_enqueue_script( 'jquery-ui-datepicker' ) to load the admin.js. So let’s create a new JavaScript file named admin.js, and add the following JavaScript codes. But nothing will yet to happen, as we have to initiate the jQuery Date Picker to the input field. '">' Īdd_meta_box('entry_post_date', 'Date', 'hkdc_post_date_field', 'post', 'side', 'default') Īdd_action('add_meta_boxes', 'hkdc_post_date_meta_box') Īfter adding the lines above, a new meta box along with an input field should appear in your WordPress post-editing screen. Then we add a Meta Box that will show the calendar.Įcho 'ID, 'entry_post_date', true ). Wp_enqueue_script( 'jquery-ui-datepicker' ) Īdd_action('admin_enqueue_scripts', 'hkdc_admin_scripts') Wp_enqueue_style( 'jquery-ui-datepicker-style', '///ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css') Īdd_action('admin_print_styles', 'hkdc_admin_styles') Add these codes below in your theme’s functions.php file. To begin, we load the jQuery UI script and styles in WordPress admin screen. Recommended Reading: Customizing And Theming JQuery UI Datepicker Adding jQueryīefore proceeding, first let me show you how I added Date Picker in the WordPress post area like what you’ve seen above. If you hae the same problem, follow this article as we are going to show you how to adjust this to make your customized UI look more unified with the latest WordPress admin theme. And as you can see below the calendar’s UI seems a bit out of place. It means, if you have a built theme or plugin that used a customized UI, it is time for a makeover.Īs an example, here I have added Data Picker in the post editing screen. Following the masses, the WordPress admin UI now looks flatter, removed of gradients and shadows. WordPress has changed a lot since version 3.8, especially the admin UI theme.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |