Home Blog Page 3

Beginners Guide to LESS CSS Preprocessor

0

What is LESS?

Less is a CSS Preprocessor. http://lesscss.org/

Installing and Compiling

  1. Install Node.js https://nodejs.org/en/
  2. using npm ( Node Package Manager ) install LESS globally ( -g )
    1. $ npm install -g less
  3. Compile LESS

lessc style.less > style.css
  • lessc is used as the command for compiling

Error

'lessc' is not recognized as an internal or external command, operable program or batch file.


Solution for this Error

Compiling LESS

node C:\Folder\Name\node_modules\less\bin\lessc style.less > style.css

Note : \Folder\Name should be the folder in which the node_modules have been installed.

Beginners Guide to SASS CSS Preprocessor

0

What is SASS?

SASS is a CSS Preprocessor. http://sass-lang.com/

Installing and compiling

  1. Install Ruby https://rubyinstaller.org/
    • More Info : http://sass-lang.com/install
  2. Open Terminal or Command Prompt
gem install sass

Note : gems is a package manager for Ruby.

3. Check if sass got installed

sass -v

4. on a dedicated “test” folder , create two folders “scss” and “css”

C:\test

C:\test\scss

C:\test\css

5. In the Terminal or Command Prompt

C:\test>

Compile SASS

–watch command

–watch command is used to constantly monitor style.scss file for any changes and compile it as soon any change happens.

C:\test> sass –watch scss:css

sass --watch scss:css

–watch dedicated file

To watch dedicated file style.scss and style.css

sass --watch style.scss:style.css

style.scss is the main file

style.css is the complied file

Minify SASS

sass --watch scss:css --style compressed

Get all category ids in WordPress [Array]

0

Choose either one of these options to Get all category ids in WordPress as an Array

Get all category ids, Option 1

$output_categories = array();
$categories=get_categories($args);
 foreach($categories as $category) { 
 $output_categories[] = $category->cat_ID;
}

Get all category ids, Option 2

$categories_ids = get_terms(
 array( 'category' ), // Taxonomies
 array( 'fields' => 'ids' ) // Fields
);

Ajax Progress Bar

0

HTML

<style>
 #progress {
 width: 500px;
 border: 1px solid #aaa;
 height: 15px;
 }
 #progress .bar {
 background-color: #bbd;
 height: 15px;
 }
 </style>
 <div id="progress"></div>

AJAX

<script>

$.ajax({ 

url: ajaxurl.php
success:function(value){
$("#progress").html('<div class="bar" style="width:' + value.percent + '%"></div>');
}
}

</script>

$post Object Output in WordPress

0

WP_Post Object

WP_Post Object
 (
 [ID] =>
 [post_author] =>
 [post_date] =>
 [post_date_gmt] =>
 [post_content] =>
 [post_title] =>
 [post_excerpt] =>
 [post_status] =>
 [comment_status] =>
 [ping_status] =>
 [post_password] =>
 [post_name] =>
 [to_ping] =>
 [pinged] =>
 [post_modified] =>
 [post_modified_gmt] =>
 [post_content_filtered] =>
 [post_parent] =>
 [guid] =>
 [menu_order] =>
 [post_type] =>
 [post_mime_type] =>
 [comment_count] =>
 [filter] =>
 )

JSON Vs Array in a Database

0

JSON

  • Faster to encode JSON
  • Takes Less space
  • Human Readable
  • JSON can be used by many other languages

Terms Used : encode, decode

Array

  • Faster to unserialise Array

Terms Used : Serialise, Unserialise

GitIgnore Directory

0

.gitignore Directory

Example Directory name : uploads

Ignoring ALL folders and files

 # .gitignore
uploads

Result:

# Will Ignore

/uploads # directory
/uploads # file
/example/path/uploads # directory
/example/path/uploads # file

Ignoring only the Root Directory

The correct syntax for that is to put leading and trailing slash:

 # .gitignore
/uploads/

Result:

 # will ignore
/uploads # directory

# will NOT ignore
/uploads              # file
/some/path/uploads    # directory
/another/path/uploads # file

Ignoring only the Root Directory and the Root File

 # .gitignore
/uploads

Result:

# will ignore

/uploads # directory
/uploads # file

Ignoring only Folders and not Files

# .gitignore
uploads/

Result:

# will ignore:
/uploads # directory
/some/path/uploads # directory

# will NOT ignore:
/another/path/uploads # file

This exceeds GitHub’s file size limit of 100MB

0

Solution for “This exceeds GitHub’s file size limit of 100 MB” issue

git filter-branch -f --index-filter 'git rm --cached --ignore-unmatch YOUR-FILE'
git push

WP_Query Get Posts Published in the last 24 hours

0
$args = array(
 'post_type' => 'post',
 'posts_per_page' => '10',
 'date_query' => array(
 array(
 'after' => '24 hours ago'
 )
 )
 );
$the_posts = new WP_Query( $args );

WordPress function execution order on a Page Load

0

General

init();
parse_request($query_args);
send_headers();
query_posts();
handle_404();
register_globals();

do_action calls are made in the following order

muplugins_loaded
 registered_taxonomy
 registered_taxonomy
 registered_taxonomy
 registered_taxonomy
 registered_taxonomy
 registered_post_type
 registered_post_type
 registered_post_type
 registered_post_type
 registered_post_type
 plugins_loaded
 sanitize_comment_cookies
 setup_theme
 unload_textdomain
 load_textdomain
 after_setup_theme
 load_textdomain
 load_textdomain
 auth_cookie_malformed
 auth_cookie_valid
 set_current_user
 init
 registered_post_type
 registered_post_type
 registered_post_type
 registered_post_type
 registered_post_type
 registered_taxonomy
 registered_taxonomy
 registered_taxonomy
 registered_taxonomy
 registered_taxonomy
 widgets_init
 register_sidebar
 register_sidebar
 register_sidebar
 wp_register_sidebar_widget
 wp_register_sidebar_widget
 wp_register_sidebar_widget
 wp_register_sidebar_widget
 wp_register_sidebar_widget
 wp_register_sidebar_widget
 wp_register_sidebar_widget
 wp_register_sidebar_widget
 wp_register_sidebar_widget
 wp_register_sidebar_widget
 wp_register_sidebar_widget
 wp_register_sidebar_widget
 wp_loaded
 parse_tax_query
 parse_tax_query
 posts_selection
 template_redirect
 admin_bar_init
 add_admin_bar_menus
 get_header
 wp_head
 wp_enqueue_scripts
 wp_print_styles
 wp_print_scripts
 get_template_part_content
 begin_fetch_post_thumbnail_html
 end_fetch_post_thumbnail_html
 get_template_part_content
 get_template_part_content
 get_template_part_content
 get_template_part_content
 get_template_part_content
 get_template_part_content
 get_template_part_content
 get_template_part_content
 get_template_part_content
 begin_fetch_post_thumbnail_html
 end_fetch_post_thumbnail_html
 get_sidebar
 dynamic_sidebar_before
 dynamic_sidebar
 dynamic_sidebar_after
 get_footer
 twentytwelve_credits
 wp_footer
 wp_print_footer_scripts
 wp_before_admin_bar_render
 wp_after_admin_bar_render
 shutdown