My Personal Junkyard

WordPress Custom Fields Plugin Snippet

A little snippetto show how customer fields works in WordPress Expected Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
new SY_Custom_Fields(array(
    'page_title' => 'Admin Settings',
    'menu_title' => 'SY:: Admin Settings',
    'slug' => 'sy_admin_settings',
    'icon' => 'dashicons-admin-plugins',
    'add_to' => 'settings',
    'section_title' => 'Theme Settings',
    'section' => 'admin_theme_settings',
    'options' => array(
        array(
            'uid' => 'enable_admin_theme',
            'label' => 'Enable Admin Theme',
            'type' => 'checkbox',
            'options' => array(
                'true' => '',
            ),
            'default' => array(
                'false'
            ),
        ),
    )
));

Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
class Custom_Fields {
 
    // ========== Variables ===========
    public $page_title = '';
    public $menu_title = '';
    public $capability = '';
    public $slug = '';
    public $callback = array();
    public $icon = '';
    public $position = 0;
 
    // custom variables
    public $add_to = array();
    public $options = array();
    public $section_title = '';
    public $section = '';
 
    public $parent_slugs = array(
        'dashboard' => 'index.php',
        'posts' => 'edit.php',
        'media' => 'upload.php',
        'pages' => 'edit.php?post_type=page',
        'comments' => 'edit-comments.php',
        'custom_page_types' => 'edit.php?post_type=your_post_type',
        'appearance' => 'themes.php',
        'plugins' => 'plugins.php',
        'users' => 'users.php',
        'tools' => 'tools.php',
        'settings' => 'options-general.php',
        'network_settings' => 'settings.php'
    );
 
    /**
     * Constructor
     * @param String $args['page_title']
     * @param String $args['menu_title']
     * @param String $args['slug']
     * @param String $args['icon']
     * @param String $args['add_to']
     * @param String $args['section_title']
     * @param String $args['section']
     * @param Array $args['options']
     */
    public function __construct($args) {
 
        // initialize variables
        $this->init($args);
 
        // register CSS
        wp_register_style( 'sy-custom-settings-css', plugins_url( 'sy-custom-settings/sy-custom-settings.css' ));
        wp_enqueue_style( 'sy-custom-settings-css' );
 
        // Hook into the admin menu
        add_action( 'admin_menu', array( $this, 'create_plugin_settings_page'));
 
        // Add Settings and Fields
        add_action( 'admin_init', array( $this, 'setup_sections' ) );
        add_action( 'admin_init', array( $this, 'setup_fields' ) );
    }
 
    /**
     * ========== Initialize variables ==========
     * @param String $args['page_title']
     * @param String $args['menu_title']
     * @param String $args['slug']
     * @param String $args['icon']
     * @param String $args['add_to']
     * @param String $args['section_title']
     * @param String $args['section']
     * @param Array $args['options']
     */
    public function init($args){
        $this->page_title = $args['page_title'];
        $this->menu_title = $args['menu_title'];
        $this->capability = 'manage_options';
        $this->slug = $args['slug'];
        $this->callback = array( $this, 'plugin_settings_page_content' );
        $this->icon = $args['icon'];
        $this->position = 100;
 
        // custom
        $this->add_to = $args['add_to'];
        $this->options = $args['options'];
        $this->section_title = $args['section_title'];
        $this->section = $args['section'];
    }
 
    /**
     * ========== Plugin Settings ==========
     * Add option under a parent if it exists
     * Otherwise, create a new option menu
     */
    public function create_plugin_settings_page() {
        // add_submenu_page( $slug, $page_title, $menu_title, $capability, $slug . '-sub', $callback );
 
        // check if parent slugs exists in the array already
        $parent_slug_exists = in_array($this->add_to, array_keys($this->parent_slugs));
 
        // add it under parent slug
        if($parent_slug_exists){
            $parent_slug = $this->parent_slugs[$this->add_to];
            add_submenu_page($parent_slug, $this->page_title, $this->menu_title, $this->capability, $this->slug, $this->callback );
            return;
        }
 
        // add itself as a parent slug
        add_menu_page( $this->page_title, $this->menu_title, $this->capability, $this->slug, $this->callback, $this->icon, $this->position );
 
    }
 
    /**
     * ========== Display ===========
     * The HTML side of the option page
     */
    public function plugin_settings_page_content() {?>
        <div class="wrap">
            <h2><?php echo $this->page_title; ?></h2>
            <hr>
 
            <!-- Display admin notice ---->
            <?php
            if ( isset( $_GET['settings-updated'] ) && $_GET['settings-updated'] ){
                  $this->admin_notice();
            } ?>
 
            <!-- form -->
            <form method="POST" action="options.php">
                <?php
                    settings_fields( $this->slug );
                    do_settings_sections( $this->slug );
                    submit_button();
                ?>
            </form>
        </div> <?php
    }
 
    // =========== Admin Notice ===========
    public function admin_notice() { ?>
        <div class="notice notice-success is-dismissible">
            <p>Your settings have been updated!</p>
        </div><?php
    }
 
    // =========== Setup Sections =============
    public function setup_sections() {
        add_settings_section( $this->section, $this->section_title, array( $this, 'section_callback' ), $this->slug );
        // add_settings_section( 'theme_settings', 'Theme Settings', array( $this, 'section_callback' ), $this->slug );
        // add_settings_section( 'our_third_section', 'My Third Section Title', array( $this, 'section_callback' ), $this->slug );
    }
 
    // ========== Section function callback ===========
    public function section_callback( $args ) {
        switch( $args['id'] ){
            case $this->section:
                // echo 'Settings for your Live TV';
                break;
            // case 'theme_settings':
                // echo 'This one is number two';
                // break;
            // case 'our_third_section':
            //  echo 'Third time is the charm!';
            //  break;
        }
    }
 
    // ========== Setup Fields ===========
    public function setup_fields() {
 
        $fields = $this->options;
 
        foreach( $fields as $field ){
            add_settings_field( $field['uid'], $field['label'], array( $this, 'field_callback' ), $this->slug, $this->section, $field );
            register_setting( $this->slug, $field['uid'] );
        }
        // foreach( $fields as $field ){
        //  add_settings_field( $field['uid'], $field['label'], array( $this, 'field_callback' ), $this->slug, $field['section'], $field );
        //     register_setting( $this->slug, $field['uid'] );
        // }
    }
 
    // =========== Field functions callback ==========
    public function field_callback( $args ) {
 
        $value = get_option( $args['uid'] );
 
        if( ! $value || !isset($value)) {
            $value = isset($args['default']) ? $args['default'] : null;
        }
 
        switch( $args['type'] ){
            case 'text':
            case 'password':
            case 'number':
                printf( '<input class="sy_custom_input" name="%1$s" id="%1$s" type="%2$s" placeholder="%3$s" value="%4$s" />', $args['uid'], $args['type'], $args['placeholder'], $value );
                break;
            case 'textarea':
                printf( '<textarea name="%1$s" id="%1$s" placeholder="%2$s" rows="5" cols="50">%3$s</textarea>', $args['uid'], $args['placeholder'], $value );
                break;
            case 'select':
            case 'multiselect':
                if( ! empty ( $args['options'] ) && is_array( $args['options'] ) ){
                    $attributes = '';
                    $options_markup = '';
                    foreach( $args['options'] as $key => $label ){
                        $options_markup .= sprintf( '<option value="%s" %s>%s</option>', $key, selected( $value[ array_search( $key, $value, true ) ], $key, false ), $label );
                    }
                    if( $args['type'] === 'multiselect' ){
                        $attributes = ' multiple="multiple" ';
                    }
                    printf( '<select name="%1$s[]" id="%1$s" %2$s>%3$s</select>', $args['uid'], $attributes, $options_markup );
                }
                break;
            case 'radio':
            case 'checkbox':
                if( ! empty ( $args['options'] ) && is_array( $args['options'] ) ){
                    $options_markup = '';
                    $i = 0;
                    foreach( $args['options'] as $key => $label ){
                        $i++;
                        $checked = !isset($value) ? false : checked( $value[ array_search( $key, $value, true ) ], $key, false );
                        $options_markup .= sprintf( '<label for="%1$s_%6$s"><input id="%1$s_%6$s" name="%1$s[]" type="%2$s" value="%3$s" %4$s /> %5$s</label><br/>', $args['uid'], $args['type'], $key, $checked, $label, $i );
                    }
                    printf( '<fieldset>%s</fieldset>', $options_markup );
                }
                break;
        }
 
        if(isset($args['helper'])){
            printf( '<span class="helper"> %s</span>', $args['helper'] );
        }
 
        if(isset($args['supplimental'])){
            printf( '<p class="description">%s</p>', $args['supplimental'] );
        }
 
    }
}

WordPress show when article was published – x hours ago, Yesterday, and date

WordPress show when article was published x seconds ago 2 mins ago 14 hours ago Yesterday or date

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
    /**
     * Get post date in three different format
     * If in the pass 24 hours, then show x hours ago
     * If it was yesterday, then show Yesterday
     * Else show date
     * @param String $date
     */
    public function _date($date){
 
        // get timestamp for post date
        $post_timestamp = strtotime($date);
 
        // get timestamp for current date
        $current_timestamp = strtotime(date('Y-m-d H:i:s'));
 
        // get the differnce
        $diff = $current_timestamp - $post_timestamp;
 
        // get 24 hours in seconds
        $twenty_four_hours = 86400;
 
        // get 48 hours in seconds
        $fourty_eight_hours = $twenty_four_hours * 2;
 
        if($diff <= 60){
            return $diff . ' seconds ago';
        }
 
        if($diff > 60 && $diff <= 3600){
            return round($diff / 60) . ' minutes ago';
        }
 
        // if the difference is less than 24 hours
        if($diff < $twenty_four_hours){
            return round($diff / 3600) . ' hours ago';
        }
 
        // if it's yesterday
        // eg. if it's more than 24 hours but less than 48 hours
        if($diff > $twenty_four_hours && $diff < $fourty_eight_hours){
            return 'Yesterday';
        }
 
        return date("j F Y", $post_timestamp);
    }

WordPress class to update meta key

Expected usage

1
2
3
4
5
6
7
8
9
include(get_stylesheet_directory() . "/MetaKey.php");
$my_meta = new MetaKey(array(
    'meta_key' => 'post_views_counter',
    'modifier' => function($counter){
        return $counter + 1;
    }
));
 
$context['post_counter'] = $my_meta->get();

Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
 
/**
* Class for getting the value of a meta key
* of each post / article
*/
class MetaKey{
 
    public $key;
 
    /**
     * Constructor
     * Set meta key
     */
    public function __construct($args){
        $this->key = $args['meta_key'];
        $this->set($args['modifier']);
    }
 
    /**
     * Return the value of the meta key
     * @return Int value of a meta key
     */
    public function get(){
        return get_post_meta(get_the_ID(), $this->key, true);
    }
 
    /**
     * Modify the value using the modifier callback function
     * to edit the meta value
     * @param Function modifier function
     * @return Void
     */
    public function set($modifier){
        $post_id = get_the_ID();
        $value = (int) get_post_meta($post_id, $this->key, true);
        $value = $modifier($value);
        update_post_meta($post_id, $this->key, $value);
    }
}

Vue.js as Distributable Library

Vue.js as Distributable Library Github: https://github.com/Ansonhkg/distributable-vue-library/ Demo Cheat sheet Expected Usage Your Project Foo index.html Inside <head>

1
2
3
4
    <!-- your built vue library -->
    <script src="https://unpkg.com/vue"></script>
    <script src="./v/0.0.1/configure.umd.min.js"></script>
    <link rel="stylesheet" href="./v/0.0.1/configure.css">

before </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- place this before </body> -->
<div id="configure-app">
    <configure-app></configure-app>
</div>
 
<script>
    const vm = new Vue({
      components: {
        configureApp: configure
      }
    }).$mount('#configure-app');
 
    const configureApp = vm.$options.components.configureApp.methods;
</script>

Your Vue APP Build your app with this command

1
yarn build --target lib --inline-vue --name configure --dest v/0.0.1

Reference: https://cli.vuejs.org/guide/build-targets.html#library

WordPress template with Timber and advanced custom fields.

Seting up WordPress development environment Git clone my repository git clone https://github.com/Ansonhkg/docker-wp-sql.git –branch bakery Run docker-compose up and wait for 20 seconds. Go to localhost and follow the installation. Install essential wordpress plugins Timber Github Git clone the theme to your themes directory.

1
git clone https://github.com/timber/starter-theme.git .

Change the folder name. Change the Theme Name from style.css Change […]

My published shared components

Shared UI components https://github.com/Ansonhkg/bit-collection or https://bit.dev/ansonhkg or https://my-collection.now.sh Shared Javascript libraries https://github.com/Ansonhkg/utils or https://www.npmjs.com/package/@ansonhkg/utils

WordPress REST endpoint to accept special characters

WordPress REST endpoint to accept special Issue: unrecognized character in URL

1
2
3
4
5
6
7
8
{
    code: "rest_no_route",
    message: "No route was found matching the URL and request method",
    data: {
        status: 404
    }
}
 

Expected Usage

1
2
3
4
5
// type this to address bar
http://localhost/wp-json/search/posts/this is a test
 
// once entered, it will turn into url encoded string
http://localhost/wp-json/search/posts/this%20is%20a%20test

Output

1
"this is a test"

WordPress register custom REST API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
    /**
     * Initialize APIs
     */
    public function init_APIs(){
        add_action('rest_api_init', array($this, 'register_route'));
    }
 
    /**
     * Register API route
     * Setup API at /wp-json/search/posts/{value}
     */
    public function register_route(){
 
        $args = array(
            'methods' => 'GET',
            'callback' => array($this, 'api_get_posts'),
        );
 
        register_rest_route(
            'search',
            '/posts/(?P<value>[\w+].+)',
            $args
        );
    }
 
    /**
     * API callback:: get posts by string
     * @param Array $args['value']
     * @return JSON
     */
    public function api_get_posts($args){
        $value = str_replace('%20', ' ', $args['value']);
        return $value;
    }

Structuring CSS for HTML Components. Separation of concerns.

Structuing CSS/HTML (Separation of concerns) First, I will divice CSS into categories: Settings

1
2
/** ========== settings ========== */
$font-family: 'Tahoma';

Color Scheme

1
2
3
4
/** ========== color scheme ========== */
$black: black;
$white: white;
$grey: whitesmoke;

General (eg. *, body, Scrollbar, etc.)

1
2
3
4
5
6
/** ========== general ========== **/
*, body{
    padding: 0;
    margin: 0;
    font-family: $font-family;
}

Rows (or wrapper components)

1
2
3
4
5
6
7
8
9
10
/** ========== row/wrapper components ========== **/
.row{
 
}
.row-full{
 
}
.row-fixed-width{
 
}

Layout (or grid components)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** ========== layout/grid components ========== **/
.content{
    background: $white;
    padding-left: 30px;
    padding-right: 30px;
}
 
// ----- default content
.content-default{
 
}
 
// ----- other types
.content-black{
 
}

Content components A default content-default style Different types of content eg. content-title, content-description

1
2
3
4
5
6
7
/** ========== content components ========== **/
.content-title{
 
}
.content-description{
 
}

Spacing components

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/** ========== spacing components ========== **/
.line{
  border-bottom: 0;
  width: 100%;
  height: 0.1em;
  margin: 10px 0;
 
  &-no-bottom{
    margin-bottom: 0;
  }
 
  &-no-top{
    margin-top: 0;
  }
 
  &-4-top{
    margin-top: 4px;
  }
}

Individual components

1
2
3
4
/** ========== individual components ========== **/
.logo{
 
}

Quick VUE workflow for a HTML/CSS Template.

My quick VUE workflow for a HTML/CSS template. Create a project vue create hello-world Using Pre-Processors yarn add sass-loader node-sass Add scripts on mounted Expected Usage

1
2
3
4
  mounted(){
    // font awesome script
    this.addScript("https://kit.fontawesome.com/a076d05399.js", 'js');
  },

method

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  methods: {
    addScript(url, type='js') {
 
      if(type === 'js'){
        let script = document.createElement("script");
        script.setAttribute("src", url);
        document.head.appendChild(script);
      }
 
      if(type === 'css'){
        let script = document.createElement("style");
        script.setAttribute("rel", 'text/css');
        script.setAttribute("type", 'stylesheet');
        script.setAttribute("href", url);
        document.head.appendChild(script);
      }
    }
  }

Back to top