Forbidden Access to Website Resources

When you begin developing a website, I know how frustrating it is to encounter plenty of problems, one of those problems you will inevitably encounter is file permission issue. Moreover, you will encounter dialog box of messages as follows:

You don’t have permission to access this resource. Server unable to read htaccess file, denying access to be safe.

Read more..

Converting Linked Resources to HTTPS Upon Loading the Document Page Using jQuery

This is just a separate post to modifying linked resources to HTTPS when using DOM.

jQuery( document ).ready(function($) {
    // This will find links for `href` attributes and substitute url value
    str.replace(/(href[^http://]+)(?<=['\"])http(?=://)/gi, "$1https")

   // This will look for `src` attributes particularly images, JS scripts and replace the URL value
    str.replace(/(src[^http://]+)(?<=['\"])http(?=://)/gi, "$1https");

    // Find forms and look for `action` attributes and replace url value
    str.replace(/(action[^http://]+)(?<=['\"])http(?=://)/gi, "$1https");
Read more..

Forcing Resources to HTTPS for Better Security via htaccess

If you are running a website be it a personal blog or corporate website, most browsing client like Chrome and Mozilla are requiring you to use a secure web protocol HTTPS. Moreover, Google will be giving priority to those sites that are already in HTTPS from Search Engine Optimisation aspect.

Amending your website resources to use a secure protocol is a bit tricky but this article will guide you to do some tricks in Apache configs in .htaccess file.

The regex codes below are using mod_substitute apache module:

This will find links for href attributes and substitute url value

Substitute "s|(href[^http://]+)(?<=['\"])http(?=://)|$1https|"

This will look for src attributes particularly images, JS scripts and replace the url value

Substitute "s|(src[^http://]+)(?<=['\"])http(?=://)|$1https|"

Find forms and look for action attributes and replace url value

Substitute "s|(action[^http://]+)(?<=['\"])http(?=://)|$1https|"

I may gonna miss some other resources and other points, just feel free to comment below. Also for those resources that are using DOM, you can also use a jQuery to modify it e.g. when the document is loading modify links that are generated by DOM.

Read more..

Enabling FTP in XAMPP

You may wonder how to access web server via FTP when you are running XAMPP client or virtual linux OS running a server stack; well, the guide below may be helpful for you.

You have to create FTP user via terminal commands and give a file permission to where your web file resides.

Assuming you have XAMPP running by clicking Start button in General tab. In Services tab, make sure ProFTPD is also running as small circle turns green as indicator or just enable by clicking Start All button.

Read more..

WP get_option: A Practical Guide Save Values to Database

This post will benefit you if you’re creating a plugin or hard-coding a theme that involves of using `get_option` which saves data to the database. If you have plenty of fields or name attributes in the form, this will leave a handful of `get_option` keys in the `wp-option` table which will be unmanageable to handle if you require to have plenty of fields. The practical way to is consolidate your data into only one key by using an array.

Let’s take a look on the example of creating a form below:

Input Fields with Array Name Attribute

<form method="post" action="<?php echo esc_attr($_SERVER['request_uri']); ?>">
   <?php wp_nonce_field('oooops_option_action','oooops_option_field'); ?>
   <h2 class="oooops-title"><?php _e('General', 'oooops-txt'); ?></h2>
   <p><?php _e('This section is the main settings.', 'oooops-txt'); ?></p>
   <table class="form-table">
            <th scope="row"><label for="oooops-field-1"><?php _e('Field Test 1', 'oooops-txt'); ?></label></th>
               <input id="oooops-field-1" class="oooops-field-1 regular-text" name="oooops_options[]" type="text" value="<?php echo oooops_get_option('oooops_options', '', 0) ?>">
               <p class="oooops-description"><?php _e('Important Notice: You have to click save button first.', 'oooops-txt'); ?></p>
            <th scope="row"><label for="oooops-field-2"><?php _e('Field Test 2', 'oooops-txt'); ?></label></th>
            <td><input class="oooops-field-2 regular-text" name="oooops_options[]" type="text" value="<?php echo oooops_get_option('oooops_options', 'default text', 1) ?>"></td>
               <p class="submit"><input type="submit" name="submit" class="button-primary" value="<?php _e('Save Changes', 'oooops-txt'); ?>"></p>

Notice that the name attribute `oooops_options[]` is capable of saving all values in the field. Another thing is oooops_get_option()is a function that will handle to get array value from database.

Getting Array Values from the WordPress Database

* Getting values WP Options (Database)
* @param string $key_option It's a get_option key
* @param int|string|mixed $default_value Default value when empty
* @param int $index Position of indexes
* @return array $output
function oooops_get_option($key_option = false, $default_value = '', $index = NULL){
$output = false;
if(empty($key_option)) return $output;
// check if it has default value
$output = $default_value;
// Just get value from database when no indexes
if($index === NULL && !empty( get_option($key_option) )){
$output = get_option($key_option);
return $output;
// If there is indexes
if($index !== NULL && !empty( get_option($key_option)[$index] )){
$output = get_option($key_option)[$index];
return $output;

Of course, upon submission it needs a little tweak to handle $POST request. See the code below:

POST Request Handler for Array Values in WordPress

// $_POST needs to be sanitized
if( isset($_POST['submit'])
&& check_admin_referer('oooops_option_action','oooops_option_field') // @see WP Docs for check_admin_referer()
/** Array DB $options; if emtpy assign empty string */
$options = array(
'oooops_options' = isset($_POST["oooops_options"]) ? $_POST["oooops_options"]  : array(),
/* Handling var Array */
foreach($options as $option_name =&amp;amp;gt; $option_value) {
// If option name exist, update it; else add it!
if ( get_option( $option_name ) !== false ) {
update_option($option_name, $option_value);
} else {
add_option( $option_name, $option_value, '', 'yes');

On my personal note, I find it practical and flexible way to manage data in the WordPress Database. Also I would gladly hear your suggestions for the better coding. Enjoy!