Moving the “uploads” Folder outside of the WordPress Directory

If you’re using WordPress to run a website, you may want to move the “uploads” folder outside of the WordPress directory for various reasons. However, WordPress only allows you to change the location of the “uploads” folder within the main WordPress directory. In this tutorial, we will go over a workaround solution to move the “uploads” folder outside of the WordPress directory by using symbolic links or symlinks.

The Challenge

By default, WordPress stores all uploaded media files (such as images, videos, audio files, etc.) in the “uploads” folder, which is located in the “wp-content” directory within the WordPress installation. If you want to move this folder outside of the WordPress directory, you may encounter the following challenge:

  • WordPress only allows you to change the location of the “uploads” folder within the main WordPress directory. This means that you cannot move the “uploads” folder outside of the WordPress directory by simply changing a configuration setting.

The Solution

To move the “uploads” folder outside of the WordPress directory, we can use symbolic links or symlinks. A symlink is a special type of file that acts as a pointer to another file or directory. By creating a symlink, we can point WordPress to a folder outside of the WordPress directory while still keeping the “uploads” folder in its default location.

Here’s how to move the “uploads” folder outside of the WordPress directory using symlinks:

  1. Create a folder outside of the WordPress directory where you want to store your uploaded files. For example, you could create a folder called “uploads” in your website’s root directory (/public_html/app/uploads).
  2. Open a terminal window and navigate to the “wp-content” directory within your WordPress installation. You can do this using the “cd” command. For example, if your WordPress installation is located at “/public_html/wordpress/”, you would use the following command:
    $ cd /public_html/wordpress/wp-content
  3. Create a symlink that points to the folder you created in step 1. You can do this using the “ln” command. For example, if you created a folder called “uploads” in the root directory of your website, you would use the following command:
    $ ln -s ../../app/uploads app-uploads

    This command creates a symlink called “app-uploads” in the “wp-content” directory that points to the “uploads” folder outside of the WordPress directory.

  4. Set the correct permissions for the symlink using the “chmod” command. For example, you would use the following command to set the permissions of the “app-uploads” symlink to 755:
    $ chmod -h 755 ./app-uploads

    Note that the “-h” option tells “chmod” to modify the permissions of the symlink itself rather than the file or directory that the symlink points to.

  5. Open the “wp-config.php” file in your WordPress installation and add the following line:
    define('UPLOADS', 'wp-content/app-uploads');
    This line tells WordPress to use the “app-uploads” symlink as the location of the “uploads” folder.

And that’s it! WordPress will now use the “uploads” folder outside of the WordPress directory.

Conclusion

Moving the “uploads” folder outside of the WordPress directory may seem like a daunting task, but with symlinks, it’s actually quite simple. By creating a symlink that points to a folder outside of the WordPress directory and setting the correct permissions, you can trick WordPress into using the “uploads” folder in its default location while still storing your uploaded files

References

https://stackoverflow.com/questions/38129447/upload-folder-of-wordpress-outside-the-project/38151851#38151851

Get children categories

/**
 * Get children category
 *
 * @return {array} List of category objects
 *
 * $category->term_id
 * $category->name
 * $category->slug
 * $category->term_group
 * $category->term_taxonomy_id
 * $category->taxonomy
 * $category->description
 * $category->parent
 * $category->count
 * $category->cat_ID
 * $category->category_count
 * $category->category_description
 * $category->cat_name
 * $category->category_nicename
 * $category->category_parent
*/
function appcropolis_get_category_children ($cat_slug='templates', $params=null) {
	$cat_parent = get_category_by_slug($cat_slug);
	if(!isset($cat_slug) || $cat_parent === false) {
		return false;
	}
	
	$defaults = array(
		'type'           => 'post',
		'child_of'       => $cat_parent->cat_ID,
		'parent'         => '',
		'orderby'        => 'name',
		'order'			 => 'ASC',
		'hide_empty'     => 1,
		'hierarchical'   => 1,
		'exclude'        => '',
		'include'        => '',
		'number'         => '',
		'taxonomy'       => 'category',
		'pad_counts'     => false 
	); 

	if(isset($params) && is_array($params)) {
		$args = array_replace($defaults, $params);
	} else {
		$args = $defaults;
	}

	$categories = get_categories( $args );

	return $categories;
}

 

Simple Accordion Code

No complicated code. Just a tiny script:

HTML:

<div class="category">
    <ul id="accordion" class="accordion m-0">
        <li>
            <div class="link">License type<i class="fa fa-angle-down"></i></div>
            <ul class="submenu pl-3">
                <div class="form-group  mb-0 pt-2 m-0 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Basic single documents</label>
                </div>
                <div class="form-group  mb-0 pb-2 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck2">
                    <label class="form-check-label" for="exampleCheck2">Customizable documents</label>
                </div>
            </ul>
        </li>
        <li>
            <div class="link">Document type<i class="fa fa-angle-down"></i></div>
            <ul class="submenu pl-3">
                <div class="form-group mb-0 m-0 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck4">
                    <label class="form-check-label" for="exampleCheck4">Agreements</label>
                </div>
                <div class="form-group mb-0 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck5">
                    <label class="form-check-label" for="exampleCheck5">Forms</label>
                </div>
                <div class="form-group mb-0 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck6">
                    <label class="form-check-label" for="exampleCheck6">Exhibits</label>
                </div>
            </ul>
        </li>
        <li>
            <div class="link">Other <i class="fa fa-angle-right"></i></div>
        </li>
    </ul>
</div>

Javascript:

$(function () {
    //filter bar js
    var Accordion = function (el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;

        // Variables privadas
        var links = this.el.find('.link');
        // Evento
        links.on('click', {
            el: this.el,
            multiple: this.multiple
        }, this.dropdown)
    }

    Accordion.prototype.dropdown = function (e) {
        var $el = e.data.el;
        $this = $(this),
            $next = $this.next();

        $next.slideToggle();
        $this.parent().toggleClass('open');

        if (!e.data.multiple) {
            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
        };
    }

    $('.accordion').each(function(i, item) {
        var accordion = new Accordion($(item), false);
    });

});

Add Window OnLoad Event (plain Javascript)

If you run into a situation where you need to add a window.onload event, and you cannot rely on a library to do the work (no jQuery), you can use old school, plain javascript, here is what you can do:

function plainJSWindowOnload() {
    console.log('Yay!');
}


     'attachEvent' in window && window.attachEvent('onload', plainJSWindowOnload, false);
'addEventListener' in window && window.addEventListener('load', plainJSWindowOnload, false);