bfintal

Creating a Custom Client WordPress Website from A PSD Design

(This is a Gambit Technologies, Inc. Developer Guide)

Development of a website from scratch is done by:

1. Creating a customized WordPress theme using Sage by Roots,
2. Creating the pages then creating the content either using a page builder, or by adding pure HTML content, then adding styles into the customized theme,
3. Installing plugins from the WordPress plugin directory for added functionality, configuring them and customizing their styles.

We will use the following tools/projects/code bases:

bfintal

Toolbar API

Create toolbar buttons which can be assigned to elements. Toolbars appear when elements are hovered on.

Table of Contents

bfintal

add_action( 'pbs_pre_save_content', 'pre_fix_ampersand_permalink' );

global $is_saving;
$is_saving = false;

function pre_fix_ampersand_permalink() {
  global $is_saving;
  $is_saving = true;
}

bfintal

<?php

add_action( 'wp_footer', 'add_my_templates', 11 );

function add_my_templates() {
	if ( ! class_exists( 'PageBuilderSandwich' ) ) {
		return;
	}

	if ( PageBuilderSandwich::is_editable_by_user() ) {

bfintal

// Copy all project files into the build directory for packaging
gulp.task( 'buildFiles', [ 'updatePageTemplateSamples', 'premium-lite', 'buildStart', 'styles', 'scripts', 'styles-inc', 'scripts-inc', 'translations', 'translations-update', 'icons', 'google-font-update-list' ], function() { // 'standards-phpcs',
	return gulp.src( buildInclude, { base: './' } )
		.pipe( gulp.dest( 'dist/' + folderName ) )
		.pipe( notify( { message: 'Copy build files complete', onLast: true } ) );
} );

gulp.task( 'buildOtherStuff', ['buildFiles'], function( callback ) {
} );

bfintal

gulp.task( 'icon-font', function() {
  return gulp.src( ['page_builder_sandwich/assets/editor-icons/*.svg'] )
	.pipe( iconfont( {
	  fontName: 'pbs', // Required
	  appendUnicode: true, // Recommended option
	  formats: ['ttf', 'eot', 'woff'], // Default, 'woff2' and 'svg' are available
	  timestamp: runTimestamp, // Recommended to get consistent builds when watching files
		normalize:true,
		fontHeight: 1001
	} ) )

bfintal

gulp.task( 'google-font-download-list', function() {
	var url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDS1XfK5O1n2KXV3a1sonEffs966tQt54g';
	return download( url )
	.pipe( rename( {
		basename: 'google-fonts',
		extname: '.json'
	} ) )
	.pipe( gulp.dest( '.' ) );
} );
gulp.task( 'google-font-update-list', ['google-font-download-list'], function() {

bfintal

// See: https://docs.woocommerce.com/wc-apidocs/class-WC_Order.html
$order = new WC_Order( $order_id );
$order->add_coupon( 'couponcode' );
$order->calculate_totals();

bfintal

#!/bin/bash
# FILE="/tmp/out.$$"
# GREP="/bin/grep"

# Make sure only normal users can run our script since we have sudos in the commands.
if [ "$(id -u)" == "0" ]; then
   echo "This script must be run as a normal user" 1>&2
   exit 1
fi

bfintal

/* Adjust admin menu icons */
#adminmenu li div.wp-menu-image img {
    opacity: 1;
    -webkit-filter: contrast(100%) invert(1) sepia(100%) grayscale(1) contrast(75%);
            filter: contrast(100%) invert(1) sepia(100%) grayscale(1) contrast(75%)
}
#adminmenu li:hover div.wp-menu-image img {
    -webkit-filter: invert(1) grayscale(100%) sepia(100%) saturate(1000%) hue-rotate(170deg);
            filter: invert(1) grayscale(100%) sepia(100%) saturate(1000%) hue-rotate(170deg);
}