Developer Tips

Here I intend to provide recipes, patterns, and best practices across the areas I am often asked to help with on my consulting engagements.

Remove the Form on Contact Form 7 WordPress plugin after the submission

To remove form fields on a contact form that uses Contact Form 7 WordPress plugin after the successful submission, add this code to the functions.php file in the WordPress installation:

add_action( 'wp_footer', 'mycustom_wp_footer' );
 
function mycustom_wp_footer() {
?>
<script type="text/javascript">
/* <![CDATA[ */
document.addEventListener( 'wpcf7mailsent', function( event ) {
  jQuery(".wpcf7-form.sent").find('p').hide();
}, false );
/* ]]> */
</script>
<?php
}

Display the Woocommerce Product Tags in a simple list

Default setting of the WordPress WooCommerce Product Tag Widget displays the tags in a cloud. If you want to display the tags in a simple list, add the follow code to the function.php file:

add_filter('woocommerce_product_tag_cloud_widget_args', 'nwb_woo_tag_cloud_filter');
function nwb_woo_tag_cloud_filter($args) {
	$args = array(
		'smallest' => 14, 
		'largest' => 14, 
		'format' => 'list', 
		'taxonomy' => 'product_tag', 
		'unit' => 'px', 
		);
	return $args;
}

Copy a Website from the Internet

HTTrack is a free (GPL, libre/free software) and easy-to-use offline browser utility.

It allows you to download a World Wide Web site from the Internet to a local directory, building recursively all directories, getting HTML, images, and other files from the server to your computer. HTTrack arranges the original site’s relative link-structure. Simply open a page of the “mirrored” website in your browser, and you can browse the site from link to link, as if you were viewing it online. HTTrack can also update an existing mirrored site, and resume interrupted downloads. HTTrack is fully configurable, and has an integrated help system.

An overlay layer for a background image

Make an overlay layer for a background image on your template. This is the HTML:

<header id="bg-section">
  <div class="dark-overlay">
   ...
   </div>
  </div>

The SASS:

$dark-overlay: rgba(0,0,0,0.7);

#bg-section {
    background: url('img/bg.jpg') no-repeat center top fixed;
    background-size: cover;
    background-attachment: fixed;
    min-height: 700px;

    .dark-overlay {
        background-color: $dark-overlay;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 700px;
    }
}

Bootstrap 4 beta Starter Template for Vue.js

This is an HTML5 Bootstrap 4 Beta template with Bootstrap CDN links with SRI. Great start for developing Vue.js applications.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

Progress bar with Vue.js

This example shows how to create a simple progress bar with a little Vue.js and Foundation CSS help.
Create a simple HTML template and attach minimized Foundation CSS file.

<!DOCTYPE html>
<html>
<head>
    <title>Progress Bar</title>
    <script src="https://npmcdn.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="foundation.min.css">
    <link rel="stylesheet" href="app.css">
</head>
<body>
<div id="app">
    <section class="row">
        <div class="small-12 columns">
            <div class="progressbar">
                <div class="progressbar text-center"
		  style="background-color: green; margin: 0; color: white;"
		  :style="{width: progress + '%'}">
		  {{ progress }} %
                </div>
            </div>
        </div>
    </section>
    <section class="row">
        <div class="small-12 columns text-center">
            <button id="attack" @click="increase">Increase</button>
            <button id="attack" @click="decrease">Decrease</button>
	</div>
    </section>   
</div>
<script src="app.js"></script>
</body>
</html>

Add custom CSS styles:

/* app.css */
.text-center {
    text-align: center;
}

.progressbar {
    width: 80%;
    height: 40px;
    background-color: #eee;
    margin: 1em auto;
    transition: width 500ms;
}

button {
    font-size: 20px;
    background-color: #eee;
    padding: 12px;
    box-shadow: 0 1px 1px black;
    margin: 10px;
}

Add some Vue.js code to provide business logic for the progress bar:

/* app.js */
new Vue({
  el: '#app',
  data: {
	progress: 50,
  },
  methods: {
	increase: function() {
	  if (this.progress < 100) {
	    this.progress += 1;
	  }
	},
	decrease: function() {
	  if (this.progress > 0) {	
	    this.progress -= 1;
	  }
	}	
  }
});