Author: Freesize Workroom

Set the image size by resizing the image proportionally (without distorting it):

add_image_size( 'custom-size', 220, 180 ); // 220 pixels wide by 180 pixels tall, soft proportional crop mode

Set the image size by cropping the image (not showing part of it):

add_image_size( 'custom-size', 220, 180, true ); // 220 pixels wide by 180 pixels tall, hard crop mode

Set the image size by cropping the image and defining a crop position:

add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) ); // Hard crop left top

When setting a crop position, the first value in the array is the x axis crop position, the second is the y axis crop position.

• x_crop_position accepts ‘left’ ‘center’, or ‘right’.
• y_crop_position accepts ‘top’, ‘center’, or ‘bottom’.

By default, these values default to ‘center’ when using hard crop mode.

Reference from: https://developer.wordpress.org/reference/functions/add_image_size/

Copy and paste the following code into <title>…Paste here…</title> attribute.

<?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;

wp_title( '|', true, 'right' );

// Add the blog name.
bloginfo( 'name' );

// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";

// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'theme_namespace' ), max( $paged, $page ) );

?>

A very simple drop-down menu for WordPress.

PHP:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu' => 'main menu', 'container_id' => 'access')); ?>

CSS:

/* =Menu
    -------------------------------------------------------------- */
    #access {
        clear: both;
        display: block;
        float: left;
        margin: 0 auto;
        width: 100%;
    }
    
    #access ul {
        font-size: 13px;
        list-style: none;
        margin: 0;
        padding-left: 0;
        float:left;    
    }
    
    #access li {
        float: left;
        position: relative;
    }
    
    #access a {
        color: #eee;
        display: block;
        line-height: 4.2em;
        padding: 0 1em;
        text-decoration: none;
        font-size:12px;
        font-size:1.2rem;
        text-transform: capitalize;
        letter-spacing:0px;
    }
    #access ul ul {
        
        display: none;
        float: left;
        margin: 0;
        position: absolute;
        top: 3.9em;
        left: 0;
        width: 240px;
        z-index: 99999;
    }
    #access ul ul ul {
        left: 100%;
        top: 0;
    }
    #access ul ul a {
        background:#333333;
        color: #ffffff;
        font-size: 12px;
        font-size:1.2rem;
        font-weight: normal;
        height: auto;
        line-height: 1.2;
        padding: 15px 15px;
        width: 195px;
        text-align:left;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
        background: #555555;
    }
    #access li:hover > a,
    #access a:focus {
        background: #555555; /* Show a solid color for older browsers */
        color: #eeeeee;
    }
    #access ul li:hover > ul {
        display: block;
    }
    #access .current-menu-item > a,
    #access .current-menu-ancestor > a,
    #access .current_page_item > a,
    #access .current_page_ancestor > a {
        font-weight: normal;
        background: #888888; /* Show a solid color for older browsers */
        color: #1e1c4b;
    }

Use  wp_enqueue_script() function to enqueue CSS or JS scripts. Read here for more details.

The following example will enqueue the JS script of jQuery Cycle 2 to footer of the WordPress site.  (Add the code below to function.php)

function queue_cycle() {
   if ( is_page_template( 'home.php' ) ) {
      wp_enqueue_script(
         'enquirejs', //specify a name for the script 
         get_stylesheet_directory_uri() . '/js/vendor/jquery.cycle2.min.js', //url to css or js script
         array(), //add in script dependency here
         '2.1.2', //version no. for the script
         true //set to true will insert script to the footer, false to insert script into the header
      );
   }
}

add_action( 'wp_enqueue_scripts', 'queue_cycle');

If you need enqueue the script on a specific page, simply use the conditional tag.

The example below will enqueue the JS script of jQuery Cycle 2 on the home page. (Add the code below to function.php)

function queue_cycle() {
   if ( is_page_template( 'home.php' ) ) {
      if ( is_home() ) { //check if the current location is home page, and then enqueue the script below
         wp_enqueue_script(
            'enquirejs', //specify a name for the script 
            get_stylesheet_directory_uri() . '/js/vendor/jquery.cycle2.min.js', //url to css or js script
            array(), //add in script dependency here
            '2.1.2', //version no. for the script
            true //set to true will insert script to the footer, false to insert script into the header
         );
      }
   }
}

add_action( 'wp_enqueue_scripts', 'queue_cycle');