Enzo's Wordpress cheat sheet

wp cheat-sheet.md

Introduction

TODO

Table of Contents

• Installing Wordpress
• Setup your version control
• Branding your theme
• .htaccess
• Wordpress Plugins
  • Common wordpress plugins
• Code Snippets

Installing Wordpress

Open Terminal
Copy and paste the ff. to your Terminal

   cd /path/to/your/environment/
   curl -O https://wordpress.org/latest.zip
   unzip latest.zip
   rm latest.zip
   mv wordpress my-project
   cd my-project
   cp -i wp-config-sample.php wp-config.php

Edit your wp-config.php and fill-out appropriate credentials

Setup your Version Control

Assuming you're inside your project directory

   git init
   git add .
   git commit -m "initial commit"
   git remote add origin https://github.com/your-username/my-project.git
   git push -u origin master

Branding your theme

Theme

1. Delete all themes except the latest one
2. Rename the theme to your desired theme name
3. In your theme directory, open style.css
4. On line 2, replace Theme Name: Twentyseventeen to Theme Name: Your Theme Name
5. Delete all styles (Because this will override your custom theme style)

or you can just run this script...

   cd wp-content
   cd themes
   rm twentyfifteen -r
   rm twentysixteen -r
   mv twentyseventeen my-project 
   sed -i -e 's/Twenty Seventeen/my-project/g' my-project/style.css
   sed -i '16,$d' my-project/style.css
   rm my-project/style.css.bak

Setup a Front Page

1. Copy and replace the contents of front-page.php with this.

   <?php
   /* Template Name: Home */
   get_header();
   while(have_posts()): the_post();
   ?>
   
   <!-- your content here ->
   
   <?php 
   endwhile;
   get_footer();
   

2. Create a page and let it have a Home template

3. Go to Settings > Reading

4. On the Front page displays section, tick A static page radio

5. On the drop down, select Home template as Front page

6. Save changes

Header and Footer

1. Personalize your header.php and footer.php

2. Don't forget to put <?php wp_head(); ?> before the closing </head> of your header tag

3. Don't forget to put <?php wp_footer(); ?> before the closing </body> of your body tag

4. Replace/Import your assets (css, js, images) inside /your-theme-name/assets/ folder

5. Make sure you have this minimum code in every template

   <?php
   /* Template Name: My Template */
   get_header();
   while(have_posts()): the_post();
   ?>
   
   <!-- your content here ->
   
   <?php 
   endwhile;
   get_footer();
   

6. Use this script for dynamic url in our includes

   <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/styles.css">
   

.htaccess

For fixing forbidden in wp-admin

   # BEGIN WordPress
   # Uncomment this block if you need it
   # <Files wp-login.php>
   # Order Deny,Allow
   # Deny from all
   # Allow from all
   # </Files>
   # / Uncomment this block if you need it
   <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.php$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.php [L]
   </IfModule>
   # END WordPress

Wordpress Plugins

Common wordpress plugins.

Common WP plugins for a generic website

Plugin name	Description
Contact Form 7	Most common plugin for contact forms
Contact Form 7 Database Addon – CFDB7	Save contact form submissions to wp-admin
Custom Post Type UI	For custom post types
Advanced Custom Fields PRO	For additional custom fields
Enable Media Replace	For replacing images in Media Library

Advanced wordpress plugins

TODO

Code Snippets

「ＴＨＥ ＬＯＯＰ」

   <?php
   /* Template Name: My Template */
   get_header();
   while(have_posts()): the_post();
   ?>

   <!-- your content here -->

   <?php 
   endwhile;
   get_footer();

Linking to assets

   <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/styles.css">

Basic loop for iterating posts

   <?php
   $args = array('post_type' => 'service', 'posts_per_page' => -1);
   $the_query = new WP_Query($args);
   if ( $the_query->have_posts() ) {  while ( $the_query->have_posts() ): $the_query->the_post(); ?>
    <!-- your content here -->
   <?php endwhile; wp_reset_postdata(); } else { /** no posts found **/ } ?>

Basic Loop with optional meta query

   <?php
   $args = array('post_type' => 'service', 'posts_per_page' => -1);
   /** optional meta query **/
   $args['meta_query'] = array(
     array(
       'key' => 'key',
       'value' => $value,
       'compare' => 'LIKE' 
     )
   );
   /** /optional meta query **/
   $the_query = new WP_Query($args);
   if ( $the_query->have_posts() ) {  while ( $the_query->have_posts() ): $the_query->the_post(); ?>
    <!-- your content here -->
   <?php endwhile; wp_reset_postdata(); } else { /** no posts found **/ } ?>

Some more meta query examples

Using BETWEEN comparison

$price_range_filter = array(
'key' => 'min_price',
'value' => array($lower, $higher),
'compare' => 'BETWEEN',
'type' => 'NUMERIC'
);

Nested meta query example

  $price_range_filter_min = array(
    'key' => 'min_price',
    'value' => array($lower, $higher),
    'compare' => 'BETWEEN',
    'type' => 'NUMERIC'
  );

  $price_range_filter_max = array(
    'key' => 'max_price',
    'value' => array($lower, $higher),
    'compare' => 'BETWEEN',
    'type' => 'NUMERIC'
  );
  $price_range_filter = array(
    'relation' => 'OR',
    $price_range_filter_min,
    $price_range_filter_max,
  );

Get WP nav menu items

   /** variable for our menu object **/
   $menu_obj = wp_get_nav_menu_items('main'); # wp post object for `main` wp menu

   <!-- menu loop -->
   <?php foreach ($menu_obj as $obj): ?>
       <li><a href="<?= $obj->url; ?>"><?= $obj->title; ?></a></li>
   <?php endforeach; ?>
   <!-- /menu loop -->

Add Shortcode in your template

  <?php echo do_shortcode('[contact-form-7 id="89" title="Food Tasting"]'); ?>

Advanced Custom Fields Simple Repeater Loop

 <?php if( have_rows('repeater_field_name') ): while ( have_rows('repeater_field_name') ) : the_row(); ?>
   <li><img src="<?php echo get_sub_field('sub_field_name'); ?>"></li>
 <?php endwhile; else : endif; ?>

or

 <?php $repeater_object = get_field('repeater_field_name');
 foreach ($repeater_object as $obj) { ?>
 <!-- your content goes here -->
   <p><?php echo $obj['your_field']; ?></p>
   <p><?php echo $obj['another_field'];?></p>
 <?php } ?>

Advanced Custom Fields Nested Repeater Loop

(parent_repeater->child_repeater->child_repeater_items)

Normal example

   <?php 
       if( have_rows('parent_repeater') ): # Parent repeater if
         while( have_rows('parent_repeater') ): the_row(); # Parent repeater while ?>
          <article>
             <?php
             /** Parent Repeater Fields **/
             the_sub_field('panel_header');
             ?> 
             <ul>
               <?php 
               if( have_rows('child_repeater') ): # Child repeater if?>
               <?php
               /** Child repeater loop **/
               while( have_rows('child_repeater') ): the_row(); # Child repeater while ?>
               <li><?php the_sub_field('child_repeater_values'); #Child repeater values ?></li>
             <?php endwhile; # / Child repeater while?>
           </ul>
         <?php endif; # / Child repeater if?>
       </article>
       <picture>
         <img src="<?php the_sub_field('side_image'); # Some random picture outside?>">
       </picture> 
   <?php endwhile; # / Parent repeater while ?>
   <?php endif; # / Parent repeater if ?>

or

   <?php $parent_repeater_obj = get_field('repeater_field_name');
   foreach ($parent_repeater_obj as $parent_obj): ?>
     <p><?php echo $parent_obj['your_field']; ?></p>
     <p><?php echo $parent_obj['details']; ?></p>
     <?php $child_repeater_obj = $venue['child_repeater_field_name'];
       foreach ($child_repeater_obj as $child_obj) : ?>
         <p><?php echo $child_obj['photo']; ?></p>
       <?php endforeach; # end parent foreach?>
   <?php endforeach; # end child foreach?>

Example with different styles if odd or even

   <?php
       $ctr = 0; # Counter for outer repeater
       /** Parent Repeater **/
       if( have_rows('package_inclusions') ):
         while( have_rows('package_inclusions') ): the_row(); ?>
         <main class="<?php echo ((++$ctr%2) != 0) ? 'packagedetail' : 'packageservices'; # if counter is odd ?>">
           <article>
             <h3><?php
             /** Parent Repeater Fields **/
             the_sub_field('panel_header');
             ?></h3>
             <ul>
               <?php
               $li_ctr = 0;
               if( have_rows('package_inclusions_ul') ): ?>
               <?php
               /** Child repeater loop **/
               while( have_rows('package_inclusions_ul') ): the_row(); ?>
               <li><?php the_sub_field('package_inclusions_li'); #Child repeater values ?></li>
               <?php if(++$li_ctr%6 == 0): # if divisible by six?>
               </ul>
               <ul>
               <?php endif; # / if divisible by six?>
             <?php endwhile; ?>
           </ul>
         <?php endif;   ?>
       </article>
       <picture>
         <img src="<?php the_sub_field('side_image');?>">
       </picture>
     </main>
   <?php endwhile; ?>
   <?php endif;  ?>

Snippets for using wordpress outside of wordpress

   $path = $_SERVER['DOCUMENT_ROOT'] . '/wealthmart'; #TODO: Change me on live

   include_once $path . '/wp-config.php';
   include_once $path . '/wp-load.php';
   include_once $path . '/wp-includes/wp-db.php';
   include_once $path . '/wp-includes/pluggable.php';

Displaying the_content with formatting (normally, it doesn't display formatting)

   <?php echo apply_filters('the_content', get_post_field('post_content', 92)); ?>

Detect if page is of custom post type or single

if(is_singular(array('cpt_name'))){
}

Args for searching WP Query

    $args = array('post_type' => array('page', 'project', 'location', 'bank'),
     'posts_per_page' => -1, 's' => @$_GET['q']);

Display post count from the WP Query

   $args = array('post_type' => 'service', 'posts_per_page' => -1);
   $the_query = new WP_Query($args);
   echo $the_query->post_count; # The post count

Displaying options from an Advance Custom Field

	$field_key = "field_59914624f4ae2"; # Find this in ACF itself under `Screen Options`
	$field = get_field_object($field_key);
	if($field){
		foreach( $field['choices'] as $choice ) {
			echo '<option>' . $choice . '</option>';
		}
	}

---

Pagination

Save this as function-pagination.php

<?php
/**
* @link: http://callmenick.com/post/custom-wordpress-loop-with-pagination
* Create this as a separate file function-pagination.php
*/
function custom_pagination($numpages = '', $pagerange = '', $paged='') {
  
  if (empty($pagerange)) {
    $pagerange = 2;
  }
  
  /**
  * This first part of our function is a fallback
  * for custom pagination inside a regular loop that
  * uses the global $paged and global $wp_query variables.
  *
  * It's good because we can now override default pagination
  * in our theme, and use this function in default quries
  * and custom queries.
  */
  global $paged;
  if (empty($paged)) {
    $paged = 1;
  }
  if ($numpages == '') {
    global $wp_query;
    $numpages = $wp_query->max_num_pages;
    if(!$numpages) {
      $numpages = 1;
    }
  }
  
  /**
  * We construct the pagination arguments to enter into our paginate_links
  * function.
  */
  $pagination_args = array(
    'base'            => get_pagenum_link(1) . '%_%',
    'format'          => 'page/%#%',
    'total'           => $numpages,
    'current'         => $paged,
    'show_all'        => False,
    'end_size'        => 1,
    'mid_size'        => $pagerange,
    'prev_next'       => True,
    'prev_text'       => __('&laquo;'),
    'next_text'       => __('&raquo;'),
    'type'            => 'plain',
    'add_args'        => false,
    'add_fragment'    => ''
  );
  
  $paginate_links = paginate_links($pagination_args);
  
  if ($paginate_links) {
    echo "<div class='pagination'>";
    # This is how your span looks like once rendered
    # echo "<span class='page-numbers page-num'>Page " . $paged . " of " . $numpages . "</span> ";
    echo $paginate_links;
    echo "</div>";
  }
  
}
?>

This is an example usage of the function-pagination.php file

<?php
/**
* @usage
*/
/**
* include the custom pagination here
*/
include_once('function-pagination.php');
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
# QUERY ARGS HERE
$args = array(
  'post_type' => 'blog',
  'posts_per_page' => 1, # Count of posts per page
  'paged' => $paged
);
$loop = new WP_Query( $args );
if ($loop->have_posts()) : while ( $loop->have_posts() ) : $loop->the_post();
?>

<li>
  <div class="featured-img"><img src="<?php the_post_thumbnail_url(); ?>"></div>
  <div class="details">
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    <h5>Date Posted: <?php echo date("F d, Y", strtotime(get_the_date())); ?></h5>
    <p><?php echo substr(get_the_excerpt(), 0, 100) . " ..."; ?></p>
    <p><a href="<?php the_permalink(); ?>">Read More</a></p>
  </div>
</li>

<?php
endwhile;
/* Pagination */
if (function_exists(custom_pagination)) {
  custom_pagination($loop->max_num_pages,"",$paged);
}
# Make sure to change $loop variable to your actual loop variable!!!!
/* Pagination */
wp_reset_postdata();
?>

---

UX

Smooth scrolling on anchors on the same page

Just paste this on your footer and it will work

   <!-- smooth scroll  -->
   <script type="text/javascript">
   // Select all links with hashes
   $('a[href*="#"]')
   // Remove links that don't actually link to anything
   .not('[href="#"]')
   .not('[href="#0"]')
   .click(function(event) {
     // On-page links
     if (
       location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
       &&
       location.hostname == this.hostname
     ) {
       // Figure out element to scroll to
       var target = $(this.hash);
       target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
       // Does a scroll target exist?
       if (target.length) {
         // Only prevent default if animation is actually gonna happen
         event.preventDefault();
         $('html, body').animate({
           scrollTop: target.offset().top
         }, 1000, function() {
           // Callback after animation
           // Must change focus!
           var $target = $(target);
           $target.focus();
           if ($target.is(":focus")) { // Checking if the target was focused
             return false;
           } else {
             $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
             $target.focus(); // Set focus again
           };
         });
       }
     }
   });
   </script>
   <!-- /smooth scroll  -->

---

Not Wordpress

Function for formatting price. 20000 -> 20K, 1000000 to 1M, etc

/**
 * Returns the price rounded up with English shortcut
 * such as K, M, B
 * @param  int     $n    unformatted price
 * @return string        [description]
 */
function formatPrice($n)
{
	if ($n < 1000000) {
		// Anything less than a million
		$f = round(number_format($n / 1000, 3), 2);
		$f .= 'K';
	} else if ($n < 1000000000) {
		// Anything less than a billion
		$f = round(number_format($n / 1000000, 3), 2);
		$f .= 'M';
	} else {
		// At least a billion
		$f = round(number_format($n / 1000000000, 3), 2);
		$f .= 'B';
	}
	return 'P' . $f;
}

For controlling re-captcha css

#rc-imageselect, .g-recaptcha {transform:scale(0.8);-webkit-transform:scale(0.8);transform-origin:0 0;-webkit-transform-origin:0 0;}