Below you will find pages that utilize the taxonomy term “Wordpress”

Post

How To Create a WordPress Shortcode for flickr Albums

How to create a WordPress custom shortcode to display photos from flickr. This post documents using the Slick Lazy Load Photo Grid along with the flickr API to render photo albums in Wordpress Posts wherever the shortcode is entered. Webpack 4, autoprefixer, and babel are included for building the JS and CSS. Requirements flickr API key. From their API page, select the Create an App link for more information on how to request an API key.
Post

Completely Blank (no css) _s WordPress Starter Theme

This post documents how to take the WordPress Starter Theme _s or underscores, if you like and build only the CSS components you want using Webpack 4. This modern toolset also includes autoprefixer and browserlist support. You might only want the normalizer and accessibility modules, any combination of modules, or none at all to start with a completely blank slate. This build process will give you a solid foundation and all the latitude you need.
Post

Completely Blank (no css) _s WordPress Starter Theme - Page 2

In the src/js/index.js javascript entrypoint file, import the style Sass entrypoint as follows. index.js import '../sass/style.scss' Add this bit of code to the .babelrc congfiguration file. Consult the babel docs for config changes based on the babel version as needed. .babelrc { "presets": ["env"] } Add this code to require the autoprefixer postcss plugin to the postcss.config.js configuration file. postcss.config.js module.exports = { plugins: [ require('autoprefixer') ] } The package.
Post

WordPress from Development to Production using Docker Part II

This post continues where part one left off. Topics include mysql data migration, staging and production docker configurations with optional https. To perform these steps, you will need to either: Create the files directly on the server using nano, vim or some other command line editor. Create the files on your local machine and copy them to the server using scp. I prefer the latter method.
Post

WordPress from Development to Production using Docker

This post will cover how to use Docker for a local WordPress development environment and how to deploy it to an Ubuntu Linux server running docker. What you will need. Docker VPS with Docker (for prod deployment) WordPress The first step is to get your local development environment set up for your WordPress site. There are quite a few ways I have setup this environment in the past.
Post

Docker WordPress Dev Environment

This post documents setting up local development environments with Docker using the official WordPress Docker repository as a base image. Page two includes configurations for remote PHP debugging with Xdebug and VS Code. Docker Compose Aside from making the container configuration easier to understand, Docker Compose coordinates the creation, start and stop of the containers used together in the environment. The environment has multiple sites served on various ports including at least one Wordpress site, a phpmyadmin site and mysql.
Post

Docker WordPress Dev Environment - Page 2

Remote Debugging with Xdebug and VS Code In order to set breakpoints and step through the PHP code used in WordPress core, themes and plugins, The Xdebug PHP extension needs to be installed, configured and built into an image. IP address for the xdebug.remote_host setting is needed to configure the extension. Windows 10 Professional running Docker Version 17.03.0-ce-win1, open a command prompt and enter ipconfig. The address is listed under DockerNAT.
Post

WordPress Post from Front End using REST API and Vue.js Part II

The objective of this post is to demonstrate some Vue.js basics for working with the WordPress REST API. This post continues where the last post left off with the following additions. List posts submitted by the current user Select from the list to edit a post Delete a post from the list Source Code Development The original proof of concept details building the WordPress plugin, installing Vue.
Post

WordPress Post from Front End using REST API and Vue.js

This post is a simple proof of concept for using the new WordPress REST API to submit a new post draft from the front end. The form and user inputs are built using the Vue.js framework and vue-cli to create a simple Webpack build configuration. Demo on YouTube Environment This example was created using a fresh install of WordPress 4.7 served by XAMMP on Windows 10.
Post

WordPress Post from Front End using REST API and Vue.js - Page 2

Webpack Vue.js CLI Use vue-cli to download vuejs, webpack and template dependencies and create the project in the root of our plugin folder. Navigate to the wp-content/plugins directory. Update or install globally as needed. # update npm update -g vue-cli # or install npm install -g vue-cli Change to the wordpress plugins directory and use vue-cli to install the webpack-simple template into the new wp-api-vuejs-poc folder. For example,
Post

Creating a Custom WordPress Page Template

I wanted a front-end page template to play around with the new REST API that is now in WordPress 4.7 core. A custom page template gives me the latitude I want at this stage of development, so here is how I did it. Create the Template File There are a couple of ways to do this. Option 1 Clone and edit the existing page.php template. Open page.php in an editor and Save As… api-test.
Post

WordPress Twenty Seventeen Theme Sass

These Sass modules make customizing the style.css a lot easier for the new business focused Twenty Seventeen default theme for WordPress 4.7 released a couple weeks ago. January 14, 2019 – Sass has been updated for the Twenty Seventeen theme version 2.0 which comes bundled with WordPress version 5.0.3 released on January 9, 2019. The individual Sass modules in this repository represent each of the WordPress Twenty Seventeen style.

WordPress

Custom Dashboard WordPress plugin stub to customize the dashboard for users without administrator access. Source Code Custom Homepage Clone and edit the existing theme index.php template. Open index.php in an editor and Save As… home.php. This file will automatically take over the themes index.php, and it will be displayed as the homepage. Custom Widget Step 1 - Copy Core Widget into your Theme Copy the Wordpress widget php file from wp-includes/widgets into your theme.
Post

WordPress Twenty Sixteen Theme Sass

I recently created individual Sass modules for each of the WordPress Twenty Sixteen style.css stylesheet numbered and annotated sections. Additionally, the fonts and colors have been converted into Sass variables. All of this makes customizing this theme easier. May 25, 2018 – Sass has been updated for the Twenty Sixteen theme version 1.5 which comes bundled with WordPress version 4.9.6 released on May, 17, 2018.
Javascript

jQuery

A collection of useful jQuery code snippets // get the value of a text input when modified (function($){ $('#sometextinput').on('change keyup paste', function() { console.log('VALUE', $(this).val()); }); })(jQuery); Window Resize Wait for window resize to stop. ES6 using arrow function let resizeTimeout; $(window).on('resize', () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(doSomething(), 500); }); ES3/5 var resizeTimeout; $(window).on('resize', function() { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(doSomething(), 500); }); If LoDash is present, you can use _.
Post

Wordpress Page Specific Styles or Scripts

I wanted an efficient way to load page or post specific stylesheets and or scripts which lead me to see if I could utilize custom fields for this. Using custom fields combined with wp_enqueue_style and wp_enqueue_script worked perfectly. This solution allows me to link css or javascript files for only the posts or pages I want. 1. Add a couple of custom fields, one for styles and one for scripts to a page using the editor:
Post

Bourboneat Wordpress Theme

I have created a new Wordpress starter theme for building custom themes designed for Wordpress version 4.1 and later. The theme uses the Bourbon Sass library and it’s Neat semantic grid components for a lightweight and modular responsive design. The header and footer designs were taken from the Bourbon Refills collection. Also included are IcoMoon font icons which can be easily updated using the IcoMoon app. Gulp’s build system is used to compile and minify Sass and Javascript modules into optimized CSS and Javascript.
Post

Wordpress Theme Javascript Optimization

This post shows how to combine and minify multiple javascript files in a Wordpress theme into one javascript file. The benefit is a single request to a javascript file that has been compressed by minification - Wikipedia”) instead of multiple request to larger javascript files. package.json The package.json file contains meta data about your app or module and it includes the list of dependencies to install from Node Package Manager (NPM) when running npm install.
Post

Virtual Machine for LAMP Development

This blog post addresses a common scenario — a local LAMP development environment on your Windows or OS X computer. You could use XAMPP on either Windows or OS X, MAMP on OS X or native Apache in OS X. Here, we will create a Linux virtual machine with Samba configured to share the Virtual Machine file system with the host computer. We will also create virtual hosts, install and configure WordPress and Xdebug.
Post

Using jQuery in WordPress Posts

This post by Chris Coyier shows how to use jQuery inside a WordPress post. This helped me work around an Apache web server security configuration issue that was not allowing me to post SQL code snippets inside of my posts. 403 response when I try to post certain SQL code snippets: Forbidden You don’t have permission to access /wp-admin/post.php on this server. First, follow the instructions in Chris’s post which basically has you modify the your themes header.