Excellent Programming Tricks

WordPress Tips for Developer | WordPress Developer | Summary

Ref: https://developer.wordpress.org/
  1. If your are facing a bug then you can  Create a ticket.
  2. It is suitable that critical functionality added on plug-in.
  3. HTML Coding Standards
    1. Self-closing element have one forward slash and space <br />.
    2. For indentation use tabs.
  4. CSS Standards
    1. Class (selector) name should be lower case with hyphens. No underscore, camel case or space allowed.  
    2. Location specific selector name is time saving but causes distort instead selector name with full intuition is very effective.
    3. Use blank a line before a new section.
    4. Never use multiple selector in one line instead comma/open curly brace separated new line. Properties with tab instead space and ending close curly brace with same level of indentation as the opening selector. All properties should be new line and ended with semicolon.
    5. Use double quoted attribute property[type="text"]
    6. Use .guddi instead over qualified selectors div.guddi.
    7. #fff instead of #ffffff of shorten value.
    8. Use CSS shorthand except overriding style. Like margin-left: 20px; margin: 0;
    9. If possible follow property ordering (display, positioning, box model, colors and typography, and others).
    10. Font Name: If font name is more than one word use double quote. Like "Times New Roman".
    11. No-units: 0 value and font weight has no unit.
    12. Units: line-height must have units (em).
    13. Media queries should be grouped and at the bottom like @media all and (max-width: 662px) and (min-width: 529px) { /* Your selectors */ }
  5. Theme Development Tips
    1. Theme folder name should me small latter without space.
    2. Can use wordpress customize icons.
    3. Set theme name. Like @package gudditheme. Use 'Text Domain: gudditheme' in style.css and use '@package gudditheme'
    4. First create basic mandatory files and folder.
      1. Folder -
        1. css
        2. js
        3. inc
          1. enqueue.php 
        4. scss
          1. guddi.scss
            1. @import 'base/vars';   //vars
          2. base (folder)
            1. _vars.scss
        5. template
        6. img
        7. vendor
          1. bootstrap
            1. css
            2. js
          2. font
          3. jquery
            1. jquery.min.js
      2. File
        1. screenshot.png (1200px X 900px)
        2. index.php
        3. header.php
        4. footer.php
        5. functions.php
          1. require get_template_directory().'/inc/enqueue.php';
        6. style.css
      3. Custom Page Template [Priority basis]
        1. front-page.php (my custom pate template)
          1. <?php /** * @package gudditheme * @since 1.0 * @version 1.0 * Template Name: Front page */
            get_header(); ?>
        2. page-{slug}.php
        3. page-{id}.php
        4. page.php
        5. singular.php
        6. index.php
  6. What is template?
    1. Template describes the structure, orientation and presentation of the theme using some policy, functions and  files. Special meaning is used in WordPress. A combination of four or one is a way of the template. 
      1. Template Files 
        1. Request basis WordPress loads template files. Theme/site totally based on template files. [Like. index.php, page.php, header.php and so on.]
        2. Reusable, modular and WordPress uses query string to decide which template file(s) is used for specific page.   
        3. Which template file(s) use on individual page
          1. Process: Match query string → Maintain template hierarchy precedence → first matching template files
        4. Custom template files
          1. Can create custom template files and call then any location in the page.
            1. get_template_part();
            2. content-product.php → get_template_part( 'content', 'product' );
            3. Directory ept-templates → get_template_part( 'ept-templates/content', 'profile' );
      2. Page Template 
        1. For special page or group of page.
        2. Wodpress selects which template is use for. 
      3. Template Tags 
        1. Display information dynamically using database or another template file. 
        2. It has three parts (PHP, WordPress function, and optional parameter).
        3. Below template tags include template file.
          1.  get_header(); | get_header( 'your_custom_template' );
          2. get_footer(); | get_footer( 'your_custom_template' ); 
          3. get_sidebar(); | get_sidebar( 'your_custom_template' );
      4. Template Hierarchy 
        1. First matching template file(s) through query string.
        2. Home page hierarchy ↔ front-page.php → home.php → page.php → index.php
  7. Style.css
    1. The mandatory stylesheet for WordPress contains theme information, as well as CSS code.
    2. Enqueue style.css
      1. wp_enqueue_style( 'style', get_stylesheet_uri() );
    3. For child them (if style.css is required), parent theme name used as a template name. 
      1. https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/
  8. index.php
    1. The mandatory index.php file is a exceptional template file. Like the default template file. If template hierarchy cannot find any match, the index.php file is used in the Theme.
  9. home.php
    1. Blog posts index or home.php sets the latest blog or static page if front-pate.php isn't available.
  10. paged.php
    1. Wordpress template not used for page post-type but multiple pages for archive. 
  11. Post Type
    1. I think every content in WordPress is a Post, Post is categories in different types. 
    2. Default Post Types - Post, Page, Attachment, Revision, Navigation Menu
    3. Custom Post Types are frequently used.
    4. Different Post type can use different template files.
    5. Each post has its own page.
    6. Post-type determines the template files. 
  12. Loop | Find post 
    1. Little different from the traditional loop, it helps to extract information from database, mainly process post.
    2. Default | Output post | Use template(s).
    3. Mainly used in index.php after get_header(); tag. Begin with if and while statement and end with endwhile and endif.  
    4. 1
      2
      3
      4
      5
      6
      7
      8
      <?php 
      get_header();
      if ( have_posts() ) : 
          while ( have_posts() ) : the_post(); 
              ...
          endwhile; 
      endif; 
      ?>
      
    5. rewind_posts() tag is used when we use the loop second or multiple times.
  13. Loop | Find multiple post or custom post | wp_query() | get_query() | query_posts()
    1. Two groups and different things
    2. Generally use wp_query() and get_query().
    3. Reset multiple loops | 
      1. wp_reset_postdata() → To clean up use this code after wp_query.
      2. wp_reset_query() → To clean up use this code after query_posts().
      3. rewind_posts()
    4. wp_query() 
      1. → When running custom or multiple loops without using internal class or global variable.
      2. Structure
        1. First conditional 
    5. query_posts
      1. Alter the main query and replace new query
      2.  Double time
      3. Similar can use pre_get_posts() and alter main query for checking is_main_query() with hooks.
      4. Structure 
        1.  Template file + Call query_posts()
        2. Then loop begin [it ignores URL parameter]
      5. global $query_string; query_posts( $query_string . '&order=ASC' ); → Use & when add new parameter
      6. It's not a problem at all but when use large site with huge database consider alternaives
  14. functions.php | Theme function
    1. Instead of plugin.
    2. Can do
      1. Define functions
      2. Use hooks
      3. Enable WordPress theme features
  15. Linking themes
    1. get_theme_file_uri() returns the full URI of the theme's main folder.
      1. echo get_theme_file_uri( 'images/logo.png' );
      2. Careful about the child theme.
    2. get_theme_file_path(); returns the path of a file in theme's main folder.
    3. For child theme
      1. get_parent_theme_file_uri();
        1. echo get_parent_theme_file_uri( 'images/logo.png' );
      2. get_parent_theme_file_path();
        1. echo get_parent_theme_file_path( 'images/logo.png' );
    4. What happened? 
      1. If file exists then returns full uri or path address.
      2. else (missing) returns broken links
    5. Dynamic linking
      1. Can't change the ID and time complex.
      2. <a href="<?php echo get_permalink($ID); ?>">Excellent Programming Tricks</a>
    6. Don't use older versions (Before WordPress 4.7) for theme folder
      1. get_template_directory_uri()
      2. get_template_directory()
      3. get_stylesheet_directory_uri()
      4. get_stylesheet_directory().
  16. Enqueuing Styles and  Scripts
    1. Using function.php is a proper way.
    2. Before add javaScript files, including before check included library.
  17.  CSS
    1. style.css
      1. Use functions.php rather header.php file.
      2. wp_enqueue_style( 'style', get_stylesheet_uri() );
    2. CSS file | Basic structure | .css
        1. wp_enqueue_style( $name_of_the_stylesheet, $src, $deps, $ver, $media );
        2. wp_enqueue_style( 'ept', get_template_directory_uri() . '/css/ept.css',false,'1.1','all');
    3. Script file | Basec Structure | .js
      1. wp_enqueue_script( $name_of_the_script, $src, $deps, $ver, $in_footer);
        1. $in_footer → Scripts place in the footer when it's true.
      2. wp_enqueue_script( 'ept_script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
    4. Combine both files
      1. function add_ept_theme_scripts() { ...} add_action( 'wp_enqueue_scripts', 'add_ept_theme_scripts' );
  18. WordPress conditional tags
    1. Used in template files | Alter display content.
  19. Default admin ID of a user is 1. 
  20. Slug: Page address name is slug. Use underscore(_) for slug name.
  21. Add variable in string, use double quote instead single quote
    1. Use add_filter( "plugin_action_links_$this->plugin", array( $this, 'settings_link' ) ); instead add_filter( 'plugin_action_links_$this->plugin', array( $this, 'settings_link' ) );
  22. WordPress Icons: Use Developer Resources: Dashicons just copy icon name and paste [like. add_menu_page].
  23. Admin Page Hook is "toplevel_page_" and you slug.
  24. If function returns return then need echo for show data.
  25. For category, tags or author listing use archive.php, without effecting index.php page.
  26. Hook - Function runs inside hook because hooks do some internal operation before or with function execution.
    1. "Execute functions hooked on a specific action hook." -https://developer.wordpress.org
    2. Action hook finds attached functions.

No comments:

Post a Comment


Authentic аnd Excellent

Website

HTML Template

Wordpress Theme

Database applications

OR

Application services?

Excellent Programming Tricks (EPT) || Iftekhar-IT || We develops the Web applications and the WordPress templates. || Excellent Programming Tricks (EPT)

© 2020 Blogger Theme by Iftekhar IT || Excellent Programming Tricks

Execllent Programming Tricks. Powered by Blogger.