Outdated

This wiki is for the lastest oudated branch (Bootstrap 4.4.1 / WordPress 5.4). The list of plugin used is:

Light Gallery Custom

A customizable, modular, responsive, gallery plugin for jQuery. Below you will find an improved usage method via data-lg-attributes applied to the main gallery container.

<div class="JSlightGallery" data-lg-item="auto" data-lg-title="auto" data-lg-thumb="false" data-lg-download="false" data-lg-share="true" data-lg-autoplay="true" data-lg-loop="false" data-lg-gallery="false">
...
</div>

Gallery Mode Custom

This mode allows to improve the way to show paged galleries executing custom functions when you get the first or last page.

<div class="JSlightGallery" data-lg-item="auto" data-lg-title="Gallery Title" data-lg-thumb="true" data-lg-download="true" data-lg-share="true" data-lg-autoplay="true" data-lg-loop="false" data-lg-gallery="true" data-lg-page-total="3" data-lg-page-current="1">
...
</div>

Name	Description
data-lg-item	Defines which element contains the image url and the thumbnail. If is auto it will takes all tag.
data-lg-title	Set a custom title to all images in the gallery. If is auto it will takes all title attribute.
data-lg-thumb	Defines if thumbnails will be shown when the gallery is executed.
data-lg-download	Enables downloads, the download url will be taken from data-src or href.
data-lg-autoplay	Enables autoplay controls.
data-lg-loop	When you get the last image it will change to the first image.
data-lg-share	Enables social share buttons.
data-lg-hide-delay	Delay time (in miliseconds) to hide bars and thumbnails.
data-lg-gallery	Show the previous or next page controls inside the gallery. Includes auto redirection.
data-lg-page-total	Set the total amount of the gallery pages. This is show or hide the previous or next controls inside the gallery.
data-lg-page-current	Set the current active page. This is show or hide the previous or next controls inside the gallery.

For gallery paginator remember to add the previous and next events in the JS to detect which actions will be executed on each case. Take a look in the file extras/example.js for onPrevPageChange.lg and onNextPageChange.lg events examples. For more information click here http://sachinchoolur.github.io/lightGallery/

Data Tables Plugin

Improve the way to show plain or dynamic HTML tables. Below you will find the usage method via data attributes.

<table class="table table-striped table-bordered JSdataTables" data-paging="true" data-searching="true" data-info="true" data-ordering="true">
...
</table>

Name	Description
data-paging	Enables a paginator
data-searching	Enables a search box to filter results
data-info	Show info at the table footer
data-ordering	Enables ordering by column

You can take a look on the original project page clicking here https://datatables.net/examples/styling/bootstrap4 for more information, setup and usage.

Modal Alert Custom

Launch a custom modal box using BootBox features, the function structure is JSmodalAlert(title, text, size, align, animate). You can alternatively set a size and alignment classes like horizontal vertical (For example: right center). For animate options you can choose between true, false or 'alt' for an alternative animation.

<a onclick="JSmodalAlert('Small Size Box','This is a text shown in a modal box','small','center')">Click Here</a>
<a onclick="JSmodalAlert('Medium Size Box','This is a text shown in a modal box')">Click Here</a>
<a onclick="JSmodalAlert('Large Size Box','This is a text shown in a modal box','large')">Click Here</a>
<a onclick="JSmodalAlert('Extra Large Size Box','This is a text shown in a modal box','extra-large')">Click Here</a>

Modal Content Custom

Launch a custom modal box using BootBox features, the function shows the content from an element, the structure is JSmodalContent(title, element, size, align, animate). You can alternatively set a size and alignment classes like horizontal vertical (For example: right center). For animate options you can choose between true, false or 'alt' for an alternative animation.

<div class="JSmodalContentExample d-none">
	Hello <b>World!</b><br>
	<i>This is my message in <u>HTML</u> from a hidden element...</i>
</div>
<a onclick="JSmodalContent('Small Size Box','.JSmodalContentExample','small')">Click Here</a>
<a onclick="JSmodalContent('Medium Size Box','.JSmodalContentExample')">Click Here</a>
<a onclick="JSmodalContent('Large Size Box','.JSmodalContentExample','large')">Click Here</a>
<a onclick="JSmodalContent('Extra Large Size Box','.JSmodalContentExample','extra-large')">Click Here</a>

Map Launch Plugin

Show a modal box using BootBox with map options such as Google Maps and Waze. Below you will find an improved usage method via data-map attributes.

<button type="button" class="btn btn-primary JSmapLaunch" data-map-address="Renato Sánchez 4265, Las Condes, Santiago, Chile" data-map-coords-1="-33.4176466,-70.585256,17" data-map-coords-2="-33.41748,-70.58519,17" data-map-modal-size="small" data-map-modal-align="center">Show Map Launch (Normal & Centered)</button>
<button type="button" class="btn btn-primary JSmapLaunch" data-map-address="Renato Sánchez 4265, Las Condes, Santiago, Chile" data-map-coords-1="-33.4176466,-70.585256,17" data-map-coords-2="-33.41748,-70.58519,17" data-map-iframe="true">Show Map Launch (With Map)</button>

Name	Description
data-map-address	The map address to search
data-map-coords-1	Desired address coords from Google Maps latitude, longitude, zoom
data-map-coords-2	Desired address coords from Waze latitude, longitude, zoom
data-map-iframe	Alternative to show an iframe for Google Maps with true or false
data-map-modal-size	Alternative to set modal size classes like small, medium, large or extra-large
data-map-modal-align	Alternative to set modal alignment classes like horizontal vertical (For example: right center)
data-map-modal-animate	Alternative to change or disable the modal animation. You can choose between true, false or 'alt' for an alternative animation.

Window Pop-Up Custom

Launch a custom pop-up window via javascript. Below you will find an improved usage method via data-win-attributes.

<a class="JSwindowPopup" data-win-url="http://getbootstrap.com" data-win-size="640 480" data-win-align="center center" data-win-scroll="yes">Click Here</a>
<a class="JSwindowPopup" data-win-url="http://getbootstrap.com" data-win-size="320 480" data-win-align="right bottom" data-win-scroll="yes">Click Here</a>
<a class="JSwindowPopup" data-win-url="http://getbootstrap.com" data-win-size="320 480" data-win-align="left top" data-win-scroll="yes">Click Here</a>

Name	Description
data-win-url	Website URL to show in the pop-up
data-win-size	Pop-up width & height, Need to be written in width height
data-win-align	Pop-up horizontal & vertical alignment. Need to be written in horizontal veritcal and the values can be left, center or right
data-win-scroll	Enable or disable scrollbar in the pop-up
data-win-modal-size	Alternative to set error modal size classes like small, medium, large or extra-large
data-win-modal-align	Alternative to set error modal alignment classes like horizontal vertical (For example: right center)
data-win-modal-animate	Alternative to change or disable the modal animation. You can choose between true, false or 'alt' for an alternative animation.

Form Validation Custom

Basic validation for forms. The elements validated are input, select, checkbox, radio and textarea. The main function is $(elem).JSvalidateForm(options);

<form class="JSformExample" novalidate method="post" action="/">
	<!-- Input text + input group -->
	<div class="form-group">
		<label for="example-input-username">User Name</label>
		<div class="input-group">
			<div class="input-group-prepend">
				<span class="input-group-text">
					<i class="align-self-center fas fa-user"></i>
				</span>
			</div>
			<input type="text" class="form-control" id="example-input-username" name="example-input-username" placeholder="Type your User Name" required>
			<div class="valid-feedback">
				Looks good!
			</div>
			<div class="invalid-feedback">
				Please choose a username.
			</div>
		</div>
	</div>
	<!-- Input text + input group -->
	<!-- Input text + input group -->
	<div class="form-group">
		<label for="example-input-password">Password</label>
		<div class="input-group">
			<div class="input-group-prepend">
				<span class="input-group-text">
					<i class="align-self-center fas fa-key"></i>
				</span>
			</div>
			<input type="password" class="form-control" id="example-input-password" name="example-input-password" placeholder="Type your Password" required>
			<div class="valid-feedback">
				Looks good!
			</div>
			<div class="invalid-feedback">
				Please choose a password.
			</div>
		</div>
	</div>
	<!-- Input text + input group -->
	<!-- Input text + optional -->
	<div class="form-row">
		<div class="col-12 col-sm-6 mb-3">
			<label for="example-input-firstname">First Name</label>
			<input type="text" class="form-control" id="example-input-firstname" name="example-input-firstname" placeholder="Type your First Name" required>
			<div class="valid-feedback">
				Looks good!
			</div>
			<div class="invalid-feedback">
				Please choose a first name.
			</div>
		</div>
		<div class="col-12 col-sm-6 mb-3">
			<label for="example-input-lastname">Last Name</label>
			<input type="text" class="form-control" id="example-input-lastname" name="example-input-lastname" placeholder="Type your Last Name (Optional)">
			<div class="valid-feedback">
				Looks good!
			</div>
			<div class="invalid-feedback">
				Please choose a last name.
			</div>
		</div>
	</div>
	<!-- Input text + optional -->
	<!-- Input email + input Tel -->
	<div class="form-row">
		<div class="col-12 col-sm-6 mb-3">
			<label for="example-input-email">E-Mail address</label>
			<input type="email" class="form-control" id="example-input-email" name="example-input-email" placeholder="Type your E-Mail" required>
			<div class="valid-feedback">
				Looks good!
			</div>
			<div class="invalid-feedback">
				Please choose an email.
			</div>
			<div class="warning-feedback">
				Please type a valid e-mail with @ and a domain.
			</div>
		</div>
		<div class="col-12 col-sm-6 mb-3">
			<label for="example-input-tel">Phone Number</label>
			<input type="tel" class="form-control" id="example-input-tel" name="example-input-tel" placeholder="Type your Phone Number" required>
			<div class="valid-feedback">
				Looks good!
			</div>
			<div class="invalid-feedback">
				Please choose a phone number.
			</div>
		</div>
	</div>
	<!-- Input email + input Tel -->
	<!-- Input group + form row -->
	<div class="form-row">
		<div class="col-12">
			<label for="example-social-url">Social Networks</label>
		</div>
		<div class="col-12 col-sm-6 mb-3">
			<div class="input-group">
				<div class="input-group-prepend">
					<span class="input-group-text">
						<i class="align-self-center fab fa-facebook"></i>
					</span>
				</div>
				<input type="text" class="form-control" id="example-social-facebook" name="example-social-facebook" placeholder="Type your Facebook User Name" required>
				<div class="valid-feedback">
					Looks good!
				</div>
				<div class="invalid-feedback">
					Please choose a Facebook username.
				</div>
			</div>
		</div>
		<div class="col-12 col-sm-6 mb-3">
			<div class="input-group">
				<div class="input-group-prepend">
					<span class="input-group-text">
						<i class="align-self-center fab fa-twitter"></i>
					</span>
				</div>
				<input type="text" class="form-control" id="example-social-twitter" name="example-social-twitter" placeholder="Type your Twitter User Name" required>
				<div class="valid-feedback">
					Looks good!
				</div>
				<div class="invalid-feedback">
					Please choose a Twitter username.
				</div>
			</div>
		</div>
	</div>
	<!-- Input group + form row -->
	<!-- Input num -->
	<div class="form-group">
		<label for="example-input-age">Age</label>
		<input type="number" step="any" class="form-control" id="example-input-age" name="example-input-age" placeholder="Type your Age" required>
		<div class="valid-feedback">
			Looks good!
		</div>
		<div class="invalid-feedback">
			Please choose an age.
		</div>
	</div>
	<!-- Input num -->
	<!-- Custom input (validation) -->
	<div class="form-group">
		<label for="example-input-custom">Custom Input</label>
		<input type="text" class="form-control" id="example-input-custom" name="example-input-custom" placeholder="Type the word 'Custom'" required>
		<div class="valid-feedback">
			Looks good!
		</div>
		<div class="invalid-feedback">
			Please fill the field.
		</div>
		<div class="warning-feedback">
			Please type "Custom" (without quotes).
		</div>
	</div>
	<!-- Custom input (validation) -->
	<!-- Select -->
	<div class="form-group has-feedback">
		<label for="example-select">Select Item</label>
		<select class="custom-select" id="example-select" name="example-select" required>
			<option value="" selected="true">Select an item</option>
			<option value="1">Item 1</option>
			<option value="2">Item 2</option>
			<option value="3">Item 3</option>
			<option value="4">Item 4</option>
			<option value="">Item 5 (Empty value)</option>
		</select>
		<div class="valid-feedback">
			Looks good!
		</div>
		<div class="invalid-feedback">
			Please choose an option.
		</div>
		<div class="warning-feedback">
			Please choose an option with a filled value.
		</div>
	</div>
	<!-- Select -->
	<!-- Text area -->
	<div class="form-group">
		<label for="example-textarea">Message</label>
		<textarea class="form-control textarea-no-resize" rows="3" id="example-textarea" name="example-textarea" placeholder="Write a Message" required></textarea>
		<div class="valid-feedback">
			Looks good!
		</div>
		<div class="invalid-feedback">
			Please write a message.
		</div>
		<div class="warning-feedback">
			Please dont fill with blank spaces.
		</div>
	</div>
	<!-- Text area -->
	<!-- Input file -->
	<div class="form-group">
		<label for="example-file">Select File</label>
		<div class="custom-file">
			<input type="file" class="custom-file-input" id="example-file" lang="en" placeholder="Select File" autocomplete="off" required>
			<label class="custom-file-label" for="example-file">Select File</label>
			<div class="valid-feedback">
				Looks good!
			</div>
			<div class="invalid-feedback">
				Please select a file.
			</div>
		</div>
	</div>
	<!-- Input file -->
	<!-- Input range -->
	<div class="form-group">
		<label for="example-range">Example range</label>
		<input type="range" class="custom-range" min="0" max="5" step="0.5" id="example-range">
	</div>
	<!-- Input range -->
	<!-- Input checkbox -->
	<div class="form-group form-group-checkbox">
		<label for="example-checkbox-single">Checkbox Single</label>
		<!-- Checkbox -->
		<div class="custom-control custom-checkbox">
			<input type="checkbox" class="custom-control-input" id="example-checkbox-single" name="example-checkbox-single" autocomplete="off" required>
			<label class="custom-control-label" for="example-checkbox-single">Single checkbox</label>
			<div class="valid-feedback">
				Looks good!
			</div>
			<div class="invalid-feedback">
				Please check an option.
			</div>
		</div>
		<!-- Checkbox -->
	</div>
	<!-- Input checkbox -->
	<!-- Input checkbox group -->
	<div class="form-group form-group-checkbox">
		<label for="example-checkbox-group-1">Checkbox Group</label>
		<!-- Checkbox -->
		<div class="custom-control custom-checkbox">
			<input type="checkbox" class="custom-control-input" id="example-checkbox-group-1" name="example-checkbox-group-1" autocomplete="off" required>
			<label class="custom-control-label" for="example-checkbox-group-1">Group checkbox 1</label>
		</div>
		<div class="custom-control custom-checkbox">
			<input type="checkbox" class="custom-control-input" id="example-checkbox-group-2" name="example-checkbox-group-2" autocomplete="off" required>
			<label class="custom-control-label" for="example-checkbox-group-2">Group checkbox 2</label>
		</div>
		<div class="custom-control custom-checkbox">
			<input type="checkbox" class="custom-control-input" id="example-checkbox-group-3" name="example-checkbox-group-3" autocomplete="off" required>
			<label class="custom-control-label" for="example-checkbox-group-3">Group checkbox 3</label>
		</div>
		<div class="custom-control custom-checkbox">
			<input type="checkbox" class="custom-control-input" id="example-checkbox-group-4" name="example-checkbox-group-4" autocomplete="off" required>
			<label class="custom-control-label" for="example-checkbox-group-4">Group checkbox 4</label>
			<div class="valid-feedback">
				Looks good!
			</div>
			<div class="invalid-feedback">
				Please check an option.
			</div>
		</div>
		<!-- Checkbox -->
	</div>
	<!-- Input checkbox group -->
	<!-- Input checkbox group overflow -->
	<div class="form-group form-group-checkbox">
		<label for="example-checkbox-group-a">Checkbox Group Overflow</label>
		<div class="card">
			<div class="card-body card-overflow p-2">
				<!-- Checkbox -->
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="example-checkbox-group-a" name="example-checkbox-group-a" autocomplete="off" required>
					<label class="custom-control-label" for="example-checkbox-group-a">Group checkbox A</label>
				</div>
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="example-checkbox-group-b" name="example-checkbox-group-b" autocomplete="off" required>
					<label class="custom-control-label" for="example-checkbox-group-b">Group checkbox B</label>
				</div>
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="example-checkbox-group-c" name="example-checkbox-group-c" autocomplete="off" required>
					<label class="custom-control-label" for="example-checkbox-group-c">Group checkbox C</label>
				</div>
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="example-checkbox-group-d" name="example-checkbox-group-d" autocomplete="off" required>
					<label class="custom-control-label" for="example-checkbox-group-d">Group checkbox D</label>
				</div>
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="example-checkbox-group-e" name="example-checkbox-group-e" autocomplete="off" required>
					<label class="custom-control-label" for="example-checkbox-group-e">Group checkbox E</label>
					<div class="valid-feedback">
						Looks good!
					</div>
					<div class="invalid-feedback">
						Please check an option.
					</div>
				</div>
				<!-- Checkbox -->
			</div>
		</div>
	</div>
	<!-- Input checkbox group overflow -->
	<!-- Input radio -->
	<div class="form-group form-group-radio">
		<label for="example-radio-single">Radio Group</label>
		<!-- Radios -->
		<div class="custom-control custom-radio">
			<input type="radio" class="custom-control-input" id="example-radio-single-1" name="example-radio-single" autocomplete="off" required>
			<label class="custom-control-label" for="example-radio-single-1">Radio option 1</label>
		</div>
		<div class="custom-control custom-radio">
			<input type="radio" class="custom-control-input" id="example-radio-single-2" name="example-radio-single" autocomplete="off" required>
			<label class="custom-control-label" for="example-radio-single-2">Radio option 2</label>
			<div class="valid-feedback">
				Looks good!
			</div>
			<div class="invalid-feedback">
				Please choose one of the options.
			</div>
		</div>
		<!-- Radios -->
	</div>
	<!-- Input radio -->
	<!-- Input radio overflow -->
	<div class="form-group form-group-radio">
		<label for="example-radio-group-a">Radio Group Overflow</label>
		<div class="card">
			<div class="card-body card-overflow p-2">
				<!-- Radios -->
				<div class="custom-control custom-radio">
					<input type="radio" class="custom-control-input" id="example-radio-group-a" name="example-radio-group" autocomplete="off" required>
					<label class="custom-control-label" for="example-radio-group-a">Radio option A</label>
				</div>
				<div class="custom-control custom-radio">
					<input type="radio" class="custom-control-input" id="example-radio-group-b" name="example-radio-group" autocomplete="off" required>
					<label class="custom-control-label" for="example-radio-group-b">Radio option B</label>
				</div>
				<div class="custom-control custom-radio">
					<input type="radio" class="custom-control-input" id="example-radio-group-c" name="example-radio-group" autocomplete="off" required>
					<label class="custom-control-label" for="example-radio-group-c">Radio option C</label>
				</div>
				<div class="custom-control custom-radio">
					<input type="radio" class="custom-control-input" id="example-radio-group-d" name="example-radio-group" autocomplete="off" required>
					<label class="custom-control-label" for="example-radio-group-d">Radio option D</label>
				</div>
				<div class="custom-control custom-radio">
					<input type="radio" class="custom-control-input" id="example-radio-group-e" name="example-radio-group" autocomplete="off" required>
					<label class="custom-control-label" for="example-radio-group-e">Radio option E</label>
					<div class="valid-feedback">
						Looks good!
					</div>
					<div class="invalid-feedback">
						Please choose one of the options.
					</div>
				</div>
				<!-- Radios -->
			</div>
		</div>
	</div>
	<!-- Input radio overflow -->
	<!-- Button checkbox -->
	<div class="form-group form-group-radio">
		<label for="example-radio-button-1">Radio Buttons</label>
		<div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
			<label class="btn btn-secondary active">
				<input type="radio" name="example-radio-button" id="example-radio-button-1" autocomplete="off" checked> Option 1
			</label>
			<label class="btn btn-secondary">
				<input type="radio" name="example-radio-button" id="example-radio-button-2" autocomplete="off"> Option 2
			</label>
			<label class="btn btn-secondary">
				<input type="radio" name="example-radio-button" id="example-radio-button-3" autocomplete="off"> Option 3
			</label>
		</div>
	</div>
	<!-- Button checkbox -->
	<!-- Submit + reset -->
	<div class="form-group mb-0">
		<button type="reset" class="btn btn-danger">Reset</button>
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>
	<!-- Submit + reset -->
</form>

$('.JSformExample').JSvalidateForm({
	noValidate: '#example-input-lastname',
	hasConfirm: true,
	resetSubmit: true,
	errorStyling: true,
	errorScroll: true,
	errorModal: true,
	modalSize: 'medium',
	modalAlign: 'top',
	modalAnimate: true,
	customTitle: false,
	customValidate: function(result){
		// Custom function
		if($('#example-input-custom').val() != 'Custom') 
		{
			// Send error
			result = {'element' : $('#example-input-custom'), 
				  'error'   : 'Please type "Custom" (without quotes).'};
		}
		// Return result
		return result;
	},
	customSubmit: function(){
		// Custom submit
		JSmodalAlert('Form Success!', 'The form passed sucessfully! Thanks!');
	},
});

Carousel Custom

Custom classes for Bootstrap carousel. Note: Touch gestures was added (right or left)

<!-- Carousel -->
<div id="carousel-example" class="carousel slide carousel-control-fixed-md carousel-control-hide carousel-control-opacity carousel-indicators-dots carousel-indicators-hide" data-ride="carousel">
	<ol class="carousel-indicators">
		<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-example" data-slide-to="1"></li>
		<li data-target="#carousel-example" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img class="d-block w-100" data-src="holder.js/1140x500/?auto=yes&theme=sky&text=First Slide" alt="First slide">
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" data-src="holder.js/1140x500/?auto=yes&theme=vine&text=Second Slide" alt="Second slide">
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" data-src="holder.js/1140x500/?auto=yes&theme=lava&text=Third Slide" alt="Third slide">
		</div>
	</div>
	<!-- Using BS4 icons -->
	<!--<a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>-->
	<!-- Using BS4 icons -->
	<!-- Using FA icons -->
	<a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
		<i class="fas fa-angle-left"></i>
		<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
		<i class="fas fa-angle-right"></i>
		<span class="sr-only">Next</span>
	</a>
	<!-- Using FA icons -->
</div>
<!-- Carousel -->

Name	Description
carousel-shadows	Adds shadows to indicators, captions and controls (Only using as Font Awesome icons).
carousel-indicators-dots	Change the indicators to dots buttons.
carousel-indicators-2x	Increases the height of indicators buttons (it will not work for dots style).
carousel-indicators-hide	Hide the indicators controls on small screens.
carousel-control-opacity	Removes the hover opacity on left and right controls .
carousel-control-hide	Hide the left and right controls on small screens.
carousel-control-fixed	Disable the left and right controls width with percentage. To increase sizes add the proper size at the end of class (For example: carousel-control-fixed-lg). Sizes are sm, md, lg and xl.

You can take a look for more carousel examples clicking here https://getbootstrap.com/docs/4.1/components/carousel/

WordPress Overview

This WordPress setup has been modified to work on Localhost and Production enviroments, so this package includes modified versions of wp-load.php and includes re-routed files for setip:

wp-admin/install-base.php
wp-admin/setup-config-base.php
wp-config-base.php

Additionally an htaccess template was created to generate the final one. (Some systems may hide this file, disable that before copy)

.htaccess-base

The default theme installed is:

WebsiteBase

English & Spanish are pre-installed including theme translations:

wp-content/languages/themes/websitebase-es_ES.mo
wp-content/languages/themes/websitebase-es_ES.mo

The base plugins installed are:

Admin Menu Editor
Advanced Custom Fields
Antispam Bee
Classic Editor
Custom Post Type UI
Enhanced Context Help
Gutenberg Editor
Loco Translate
Login reCaptcha
Mail SMTP
Migrate DB
Radio Buttons for Taxonomies
Resize Image After Upload
Simple Custom Post Order
Simple History
TinyMCE
User Role Editor

Install

Simply load the website folder on Localhost and Production, and follow the installation steps. You will be notified about the data required to setup WordPress. If you install on Localhost enviroment, you can leave the Production not filled and viceversa, and edit them later (in wp-config.php and .htaccess files).

The setup will require the next data:

Database name (local server)
Database username (local server)
Database password (local server)
Database host (local server)
Main directory (local server)
Database name (production server)
Database username (production server)
Database password (production server)
Database host (production server)
Main directory (production server)
Table prefix (if you want to run more than one WordPress in a single database)
Cron jobs (disable scheduled tasks in order to automate things like posts, updates, etc...)
Force https (forces https protocol on production domain)
Force www (forces www on production domain)

Note: Is recommended to create the database in utf8mb4_unicode_ci collation.

Basic query

Simple query to get data from a post or page. You can append more arguments inline using & symbol like &variable=value.

<?php 
$my_query = new WP_Query('pagename=page_slug&showposts=4');
while($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; 
?>

... Custom Stuff ...

<?php 
endwhile; 
?>

Basic query + empty posts

If you want to add a place to show when there's no content (posts) you need add the have_posts() conditional between the while. For example:

<?php 
$my_query = new WP_Query('post_type=custom_post_type_slug&showposts=4');
if($my_query->have_posts()):
    while($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; 
?>

... Custom Stuff ...

<?php 
    endwhile;
else:
?>

... Empty Posts Stuff ...

<?php 
endif;
?>

Advanced query

Query to get data from a post or page. You can add more arguments in $my_query_args array.

<?php 
$my_query_args = array('post_type'	=> 'custom_post_type_slug',
			'showposts'	=> 4);
$my_query = new WP_Query($my_query_args);
while($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; 
?>

... Custom Stuff ...

<?php 
endwhile; 
?>

Advanced query + paged

Same query as above but enables pagination feature.

<?php 
global $paged;
$my_query_page = $paged ? $paged : 1;
$my_query_args = array('paged' 		=> $my_query_page,
			'post_type'	=> 'custom_post_type_slug' );
$my_query = new WP_Query($my_query_args);
while($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; 
?>

... Custom Stuff ...

<?php 
endwhile; 
?>

<?php
if($my_query->found_posts > $my_query->query_vars['posts_per_page'])
{
	$my_query_page_prev = get_pagenum_link(($my_query_page-1 > 0 ? $my_query_page-1 : 1));
	$my_query_page_next = get_pagenum_link(($my_query_page+1 <= $my_query->max_num_pages ? $my_query_page+1 : $my_query->max_num_pages));
	
	//Prev page
	echo '<a href="'.$my_query_page_prev.'">&laquo;</a>';
	//Current page
	for($num = 1; $num <= $my_query->max_num_pages; $num++)
	{
		echo '<a href="'.get_pagenum_link($num).'" class="'.($num == $my_query_page ? 'active' : '').'">'.$num.'</a>';
	}
	//Next page
	echo '<a href="'.$my_query_page_next.'">&raquo;</a>';
	
	wp_reset_postdata();
}
?>

Note: Don't use &showposts argument with this method. You have to add the options through functions.php to set the posts per page, order, etc...

//Posts data based on content type
function custom_posts_per_page($query)
{
    if(!is_admin()){
        switch ($query->query_vars['post_type'])
        {
            case 'custom_post_type_slug':
                $query->query_vars['posts_per_page'] = 6;
                $query->query_vars['order'] = 'DESC';
                $query->query_vars['orderby'] = 'date';
                break;
        }
        return $query;
    }
}
add_filter('pre_get_posts', 'custom_posts_per_page');

Single content

Code to get content from single posts or pages.

<?php if(have_posts()) : while (have_posts()) : the_post(); ?>

... Custom Stuff ...

<?php endwhile; else: endif; ?>

Content Stuff

The code snippets below are to use inside query posts or pages.

Post title

<?php echo get_the_title(); ?>

Post content

<?php echo get_the_content(); ?>

Post excerpt

<?php echo get_the_excerpt(); ?>

Date format

<?php echo get_the_time('d-m-Y'); ?>

Post permanent link

<?php echo get_permalink(); ?>

Post custom field

<?php echo get_post_field('custom_field_slug', $post->ID); ?>

Post custom field + Content filter

<?php echo apply_filters('the_content', get_post_field('custom_field_slug', $post->ID)); ?>

Post custom field + Excerpt filter

<?php echo apply_filters('get_the_excerpt', get_post_field('custom_field_slug', $post->ID)); ?>

Use shortcode

<?php echo do_shortcode('[plugin_slug]'); ?>

Get the id by name

<?php echo get_id_by_name('slug'); ?>

Get post_type data (label, name, description, etc...)

<?php echo get_post_type_data('type', 'name'); ?>

Get taxonomy data (term_id, name, slug, etc...)

<?php echo get_taxonomy_data('type', 'taxonomy', 'id'); ?>

Featured image (thumbnail, medium, large, full)

<?php echo featuredImg($post->ID, 'size'); ?>

Featured image size (width, height)

<?php echo featuredImgSize($post->ID, 'property'); ?>

Featured image field (title, alt, etc...)

<?php echo featuredImgField($post->ID, 'image_field_slug'); ?>

Site Stuff

The code snippets below are from main Wordpress data.

Home URL

<?php echo get_home_url(); ?>

Main URL

<?php echo get_bloginfo('url'); ?>

Template URL

<?php echo get_bloginfo('template_url'); ?>

Site language

<?php echo get_bloginfo('language'); ?>

Site title

<?php echo get_option('blogname'); ?>

Site description

<?php echo get_option('blogdescription'); ?>

Site author

<?php echo get_option('blogauthor'); ?>

Custom site keywords

<?php echo get_option('blogkeywords'); ?>

Custom site nav color

<?php echo get_option('blognavcolor'); ?>

Custom site nav color (Apple devices)

<?php echo get_option('blognavcolorapple'); ?>

Get custom sidebar

<?php get_sidebar('slug'); ?>

Custom Sidebar

You have to add the sidebar through functions.php to create the sidebar.

//Register widgets and sidebars
function custom_widgets_init()
{
	//Sidebar
	register_sidebar(array(
		'name'          => 'Sidebar Example',
		'id'            => 'example',
		'description'	=> 'An example sidebar.',  
		'before_widget' => '<div>',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="rounded">',
		'after_title'   => '</h2>',
	));
}
add_action('widgets_init', 'custom_widgets_init');

Note 1: The next code is a sidebar template in the case you want to use custom code. It should be called sidebar-example.php:

<?php dynamic_sidebar('example'); ?>
<?php wp_reset_postdata(); //Use this in case of WP Query usage ?>

... Custom Stuff ...

And finally call it on the desired file by using:

<?php get_sidebar('example'); ?>

Social Share

Basic code to share posts on social networks.

<!-- Facebook Share -->
<a href="https://www.facebook.com/sharer.php?u=<?php echo get_permalink(); ?>">
	Share on Facebook
</a>
<!-- Twitter Share -->
<a href="https://twitter.com/intent/tweet?original_referer=<?php echo get_permalink(); ?>&text=<?php echo urlencode(get_the_title()); ?>&url=<?php echo get_permalink(); ?>&via=<?php echo get_option('blogname'); ?>">
	Share on Twitter
</a>
<!-- Google+ Share -->
<a href="https://plus.google.com/share?url=<?php echo get_permalink(); ?>">
	Share on Google+
</a>
<!-- Whatsapp Share -->
<a href="whatsapp://send?text=<?php echo urlencode(get_the_title()); ?> &raquo; <?php echo get_permalink(); ?>">
	Share on Whatsapp
</a>

Custom taxonomy query + empty taxonomies

Basic code to get all taxonomy list.

<?php
$my_taxonomy_query = array(
			'taxonomy'	=> 'custom_taxonomy_slug',
			'order'		=> 'ASC',
			'orderby'	=> 'title',
			'show_count'	=> $show_count,
			'pad_counts'	=> $pad_counts,
			'hierarchical'	=> $hierarchical,
			'title_li'	=> $title,
			'hide_empty'	=> $empty
			);

$my_taxonomy_list = get_categories($my_taxonomy_query); 

if($my_taxonomy_list):
	foreach($my_taxonomy_list as $my_taxonomy): 
	$tax_slug = $my_taxonomy->slug;
	$tax_name = $my_taxonomy->name;
	$tax_desc = $my_taxonomy->description;
	$tax_field = get_field('custom_field_slug', $my_taxonomy);
?>
	<!-- Item -->
	<a href="<?php echo get_bloginfo('url'); ?>/custom-page/<?php echo $tax_slug; ?>">
		<?php echo $tax_name; ?>
	</a>
	<!-- Item -->
<?php 
	endforeach;
else:
?>

... Empty Taxonomy Stuff ...

<?php 
endif;
?>

Custom nav menu

Basic code to get a nav menu. First you have to add the main widget function to create one (in functions.php):

//Register custom menus
function register_custom_menus()
{
	register_nav_menus(
		array(
			'header-menu'	=> __('Header Menu'),x
		)
	);
}
add_action('init', 'register_custom_menus');

Next you should create the menu in Wordpress -> Apperance -> Menus, create a menu name like Main Menu and add their pages. After call it in your template like the example below. More info: https://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_link_attributes

<?php
// Menu parameters
$main_menu_params = array(
			'theme_location'	=> 'header-menu',
			'menu'            	=> 'menu-slug',
			'menu_class'      	=> 'menu',
			'menu_id'         	=> false,
			'container'       	=> 'div',
			'container_class' 	=> 'custom-header-menu',
			'container_id'    	=> false,
			'echo'            	=> false,
			'fallback_cb'     	=> 'wp_page_menu',
			'before'          	=> false,
			'after'           	=> false,
			'link_before'     	=> false,
			'link_after'      	=> false,
			'items_wrap'      	=> '%3$s',
			'depth'           	=> 0,
			'walker'          	=> false,
			);

// Menu function
$main_menu_get = wp_nav_menu($main_menu_params);

// Menu links filters (optional)
// add_filter('nav_menu_link_attributes', function($atts, $item, $args){
// 	$atts['class'] = 'something';
// 	return $atts;
// }, 100, 1);

// Menu ul and li replaced by div tags (optional)
// $main_menu_get = preg_replace('/<ul|<li/', '<div', $main_menu_get);
// $main_menu_get = preg_replace('/<\/ul|<\/li/', '</div', $main_menu_get);

// Menu remove spaces between tags (optional)
// $main_menu_get = preg_replace('/(\>)\s*(\<)/m', '$1$2', $main_menu_get);

// Show menu
echo $main_menu_get;
?>

More Function Snippets

The code snippets below are to use inside functions.php Some of them need to be use with this websitebase project due to custom functions created in this theme.

Enable post support

Info: https://developer.wordpress.org/reference/functions/add_theme_support

// Enable post support
add_theme_support('post-formats');
add_theme_support('post-thumbnails');
add_theme_support('html5');
add_theme_support('custom-logo');
add_theme_support('custom-header-uploads');
add_theme_support('custom-header');
add_theme_support('custom-background');
add_theme_support('title-tag');
add_theme_support('starter-content');

Enable post type support

Info: https://developer.wordpress.org/reference/functions/add_theme_support

// Enable post type support
add_post_type_support('page', 'title');
add_post_type_support('page', 'editor');
add_post_type_support('page', 'author');
add_post_type_support('page', 'thumbnail');
add_post_type_support('page', 'excerpt');
add_post_type_support('page', 'trackbacks');
add_post_type_support('page', 'custom-fields');
add_post_type_support('page', 'comments');
add_post_type_support('page', 'revisions');
add_post_type_support('page', 'page-attributes');
add_post_type_support('page', 'post-formats');

Remove adminbar (with role filter)

Info: https://codex.wordpress.org/Function_Reference/no_admin_bar

// Remove admin bar
function remove_admin_bar() 
{
	if(!current_user_can('administrator') && !is_admin()) 
	{
		show_admin_bar(false);
	}
}
add_action('after_setup_theme', 'remove_admin_bar');

Remove items from adminbar

Info: https://codex.wordpress.org/Function_Reference/remove_node

// Remove items from adminbar
function remove_from_adminbar($wp_admin_bar) 
{
	$wp_admin_bar->remove_node('wp-logo');
	$wp_admin_bar->remove_node('comments');
	$wp_admin_bar->remove_node('new-post');
	$wp_admin_bar->remove_node('new-page');
	$wp_admin_bar->remove_node('new-media');
	$wp_admin_bar->remove_node('new-content');
	$wp_admin_bar->remove_node('archive');
}
add_action('admin_bar_menu', 'remove_from_adminbar', 999);

Remove dashboard widgets

Info: https://codex.wordpress.org/Function_Reference/remove_meta_box

// Remove dashboard widgets
function remove_dashboard_widgets() 
{
	// General
	remove_action( 'welcome_panel', 'wp_welcome_panel' );
	remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );   // Right Now
	remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' ); // Recent Comments
	remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );  // Incoming Links
	remove_meta_box( 'dashboard_plugins', 'dashboard', 'normal' );   // Plugins
	remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );  // Quick Press
	remove_meta_box( 'dashboard_recent_drafts', 'dashboard', 'side' );  // Recent Drafts
	remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );   // WordPress blog
	remove_meta_box( 'dashboard_secondary', 'dashboard', 'side' );   // Other WordPress News
	remove_meta_box( 'dashboard_activity', 'dashboard', 'normal' ); // Activity
	remove_meta_box( 'dashboard_site_health', 'dashboard', 'normal' ); // Site Health
	
	// Example by user role: Remove 'Simple History' Plugin widget
	if(!current_user_can('administrator'))
	{
		remove_meta_box('simple_history_dashboard_widget', 'dashboard', 'normal'); 
	}
	
	// Example by user role: Remove 'Simple History' Plugin widget
	if($user && isset($user->user_login) && 'user' == $user->user_login)
	{
		remove_meta_box('simple_history_dashboard_widget', 'dashboard', 'normal'); 
	}
}
add_action('wp_dashboard_setup', 'remove_dashboard_widgets');

Posts data based on content type

Info: Set post type properties before load, useful to enable paged post type

// Posts data based on content type
function custom_posts_per_page($query)
{
	if(!is_admin())
	{
        switch ($query->query_vars['post_type'])
        {
            case 'custom_post_type_slug':
                $query->query_vars['posts_per_page'] = 6;
                $query->query_vars['order'] = 'DESC';
                $query->query_vars['orderby'] = 'date';
                break;
        }
        return $query;
    }
}
add_filter('pre_get_posts', 'custom_posts_per_page');

Custom theme mods fields

Usage: get_theme_mod2('slug'); Note: If the field is not inside a panel you can set a custom priority adding 'priority' => X

// Customize Theme Text Field
$customize_theme_fields['field-text'] = array(
	'panel'		=>	'',
	'type'		=>	'text',
	'title'		=>	'Field Text Button Title',
	'desc'		=>	'Field Text Desctription',
	'label'		=>	'Field Text Label Title',
	'default'		=>	'Field Text Default Value'
);

// Customize Theme Text Area Field
$customize_theme_fields['field-text-area'] = array(
	'panel'		=>	'',
	'type'		=>	'textarea',
	'title'		=>	'Field Text Area Button Title',
	'desc'		=>	'Field Text Area Desctription',
	'label'		=>	'Field Text Area Label Title',
	'default'	=>	'Field Text Area Default Value'
);

// Customize Theme Wysiwig Field
$customize_theme_fields['field-text-wysiwig'] = array(
	'panel'		=>	'',
	'type'		=>	'wysiwig',
	'title'		=>	'Field WYSIWIG Text Button Title',
	'desc'		=>	'Field WYSIWIG Text Desctription',
	'label'		=>	'Field WYSIWIG Text Label Title',
	'default'	=>	'Field WYSIWIG Text Default Value'
);

// Customize Theme Image Field
$customize_theme_fields['field-image'] = array(
	'panel'		=>	'',
	'type'		=>	'image',
	'title'		=>	'Field Image Button Title',
	'desc'		=>	'Field Image Desctription',
	'label'		=>	'Field Image Label Title',
	'default'	=>	get_bloginfo('template_url').'/img/base/favicon/global.png'
);

// Customize Theme File Field
$customize_theme_fields['field-file'] = array(
	'panel'		=>	'',
	'type'		=>	'file',
	'title'		=>	'Field File Button Title',
	'desc'		=>	'Field File Desctription',
	'label'		=>	'Field File Label Title',
	'default'	=>	get_bloginfo('template_url').'/img/base/favicon/global.png'
);

// Customize Theme Checkbox Field
$customize_theme_fields['field-checkbox'] = array(
	'panel'		=>	'',
	'type'		=>	'checkbox',
	'title'		=>	'Field Checkbox Button Title',
	'desc'		=>	'Field Checkbox Desctription',
	'label'		=>	'Field Checkbox Label Title',
	'default'	=>	'option-2', //Default
	'choices'	=>	array('option-1'  => 'Option 1',
						  'option-2'  => 'Option 2')
);

// Customize Theme Radio Field
$customize_theme_fields['field-radio'] = array(
	'panel'		=>	'',
	'type'		=>	'radio',
	'title'		=>	'Field Radio Button Title',
	'desc'		=>	'Field Radio Desctription',
	'label'		=>	'Field Radio Label Title',
	'default'	=>	'option-2', //Default
	'choices'	=>	array('option-1'  => 'Option 1',
						  'option-2'  => 'Option 2')
);

// Customize Theme Select Field
$customize_theme_fields['field-select'] = array(
	'panel'		=>	'',
	'type'		=>	'select',
	'title'		=>	'Field Select Button Title',
	'desc'		=>	'Field Select Desctription',
	'label'		=>	'Field Select Label Title',
	'default'	=>	'option-2', //Default
	'choices'	=>	array('option-1'  => 'Option 1',
						  'option-2'  => 'Option 2')
);

Custom theme mods panels

Usage: Add the slug as a value of 'panel' in a $customize_theme_fields

// Customize Theme Panel
$customize_theme_panels['custom-panel-1'] = array(
	'priority'       => 10,
	'capability'     => 'edit_theme_options',
	'theme_supports' => '',
	'title'          => 'Custom Panel 1 Title',
	'description'    => 'Custom Panel 1 Description'
);

Replace filter for no term selected text (Radio Buttons Taxonomies Plugin)

Info: https://wordpress.org/plugins/radio-buttons-for-taxonomies

// Replace filter for no term selected text, use %s for term name
function radio_buttons_no_term()
{
    return 'No %s';
}
add_filter('radio_buttons_for_taxonomies_no_term_selected_text', 'radio_buttons_no_term');

Register custom menus

Info: https://codex.wordpress.org/Function_Reference/register_nav_menus

// Register custom menus
function register_custom_menus()
{
	register_nav_menus(
		array(
			'header-menu'	=> __('Header Menu'),
			'extra-menu' 	=> __('Extra Menu')
		)
	);
}
add_action('init', 'register_custom_menus');

Register sidebars and widgets

Info: https://codex.wordpress.org/Function_Reference/register_sidebar

// Register sidebars and widgets
function custom_widgets_init()
{
	// Sidebar
	register_sidebar(array(
		'name'          => 'Custom Sidebar 1',
		'id'            => 'custom-sidebar-1',
		'description'	=> 'Custom Sidebar Description.',  
		'before_widget' => '<div id="%1$s" class="%2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="rounded">',
		'after_title'   => '</h2>',
	));
	
	// Widget
	register_widget('custom_widget_1');
}
add_action('widgets_init', 'custom_widgets_init');

Custom widget class + Custom fields (ACF Plugin)

Info: https://codex.wordpress.org/Widgets_API

class custom_widget_1 extends WP_Widget 
{
	public function __construct()
	{
		$widget_ops = array( 
			'classname' 	=> 'my_custom_widget',
			'description' 	=> 'A custom widget example.',
		);
		parent::__construct( 'my_custom_widget', 'My Custom Widget', $widget_ops );
	}

	public function widget($args, $instance)
	{
		// outputs the content of the widget
		if (!isset($args['widget_id']))
		{
			$args['widget_id'] = $this->id;
		}

		// widget ID with prefix for use in ACF API functions
		$widget_id = 'widget_' . $args['widget_id'];

		// Widget before
		echo $args['before_widget'];
		
		// Parse custom field data
		$custom_field = get_field('custom_field_slug', $widget_id);
		
		echo $custom_field;
		
		// Widget after
		echo $args['after_widget'];
	}

	public function form($instance) { }

	public function update($new_instance, $old_instance) { }
}

Custom widget class + Custom fields (Standalone)

Info: https://codex.wordpress.org/Widgets_API

// Custom widget class
class custom_widget_1 extends WP_Widget
{
	function custom_widget_1()
	{
		// Process widget
		$widget_options = array(
			'classname'=> 'custom_widget_1_classname',
			'description'=> 'A custom widget 1.',
		);
		$this->WP_Widget('custom_widget_1', 'Custom Widget 1', $widget_options);
	}
	function form($instance)
	{
		// Show widget form in admin panel
		$default_settings = array(
			'title' => 'Custom Boxes',
			'cwbox_box_1'=>'',
			'cwbox_box_2'=>'',
			'cwbox_box_3'=>'',
			'cwbox_box_4'=>'',
		);
		$instance = wp_parse_args(
			(array) $instance,
			$default_settings
		);
		$title = $instance['title'];
		$cwbox_box_1 = $instance['cwbox_box_1'];
		$cwbox_box_2 = $instance['cwbox_box_2'];
		$cwbox_box_3 = $instance['cwbox_box_3'];
		$cwbox_box_4 = $instance['cwbox_box_4'];
		
		echo '<p>
				Title: <input class="widefat" name="'.$this->get_field_name('title').'" type="text" value="'.esc_attr($title).'"/>
			</p>
			<p>
				Ads Box 1: <textarea class="widefat" name="'.$this->get_field_name('cwbox_box_1').'">'.esc_attr($cwbox_box_1).'</textarea>
			</p>
			<p>
				Ads Box 2: <textarea class="widefat" name="'.$this->get_field_name('cwbox_box_2').'">'.esc_attr($cwbox_box_2).'</textarea>
			</p>
			<p>
				Ads Box 3: <textarea class="widefat" name="'.$this->get_field_name('cwbox_box_3').'">'.esc_attr($cwbox_box_3).'</textarea>
			</p>
			<p>
				Ads Box 4: <textarea class="widefat" name="'.$this->get_field_name('cwbox_box_4').'">'.esc_attr($cwbox_box_4).'</textarea>
			</p>';
	}
	function update($new_instance, $old_instance)
	{
		// Update widget settings
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['cwbox_box_1'] = $new_instance['cwbox_box_1'];
		$instance['cwbox_box_2'] = $new_instance['cwbox_box_2'];
		$instance['cwbox_box_3'] = $new_instance['cwbox_box_3'];
		$instance['cwbox_box_4'] = $new_instance['cwbox_box_4'];

		return $instance;
	}
	function widget($args, $instance)
	{
		// Display widget
		extract($args);

		echo $before_widget;

		$title = apply_filters('widget_title', $instance['title']);
		$cwbox_box_1 = empty($instance['cwbox_box_1']) ? '' : $instance['cwbox_box_1'];
		$cwbox_box_2 = empty($instance['cwbox_box_2']) ? '' : $instance['cwbox_box_2'];
		$cwbox_box_3 = empty($instance['cwbox_box_3']) ? '' : $instance['cwbox_box_3'];
		$cwbox_box_4 = empty($instance['cwbox_box_4']) ? '' : $instance['cwbox_box_4'];

		if(!empty($title)){ echo $befor_title . $title . $after_title; }
		echo '<ul class="cli_sb_cwbox_boxes">
				<li>'.$cwbox_box_1.'</li>
				<li>'.$cwbox_box_2.'</li>
				<li>'.$cwbox_box_3.'</li>
				<li>'.$cwbox_box_4.'</li>
			</ul>';

		echo $after_widget;
	}
}

Edit custom role capabilities

Info: https://codex.wordpress.org/Function_Reference/add_cap

// Edit custom role capabilities
function custom_capability()
{
	// Role add
	$role1 = get_role('editor');
	$role1Perms = array('posts');
	
	foreach($role1Perms as $rolePerm1)
	{ 
		$role1->add_cap('publish_'.$role1Perm); 
		$role1->add_cap('edit_'.$role1Perm); 
		$role1->add_cap('delete_'.$role1Perm);
		$role1->add_cap('edit_published_'.$role1Perm); 
		$role1->add_cap('delete_published_'.$role1Perm); 
		$role1->add_cap('edit_others_'.$role1Perm); 
		$role1->add_cap('delete_others_'.$role1Perm); 
		$role1->add_cap('read_private_'.$role1Perm); 
		$role1->add_cap('edit_private_'.$role1Perm);
		$role1->add_cap('delete_private_'.$role1Perm);
		$role1->add_cap('manage_categories_'.$role1Perm); 	
	}
	
	// Individual add
	if(!$role1->has_cap('edit_theme_options'))
	{
		$role1->add_cap('edit_theme_options'); 
	}
	
	// Individual remove
	if($role1->has_cap('edit_theme_options'))
	{
		$role1->remove_cap('edit_theme_options'); 
	}
}
add_action('admin_init', 'custom_capability');

Hide menu items

Info: https://codex.wordpress.org/Function_Reference/remove_menu_page

// Hide menu items
function hide_menu_items() 
{ 
	// Remove Posts for everyone
	remove_menu_page('edit.php');
	
	// Remove Tools for non administrator
	if(!current_user_can('administrator'))
	{
		remove_menu_page('tools.php');
	}
	
	// Add theme options for editors
	if(current_user_can('editor'))
	{
		remove_submenu_page( 'themes.php', 'themes.php' ); // hide the theme selection submenu
		remove_submenu_page( 'themes.php', 'widgets.php' ); // hide the widgets submenu
		remove_submenu_page( 'themes.php', 'customize.php' ); // hide the customizer submenu
		remove_submenu_page( 'themes.php', 'nav-menus.php' ); // hide the widgets submenu
		remove_submenu_page( 'themes.php', 'theme-editor.php' ); // hide the widgets submenu
    }
}
add_action('admin_menu', 'hide_menu_items');

Remove custom post type support

Info: https://codex.wordpress.org/Function_Reference/remove_post_type_support

// Remove custom post type support
function remove_custom_post_type_support()
{
	remove_post_type_support('post_type_slug', 'post_type_feature');
}
add_action('init', 'remove_custom_post_type_support');

Custom excerpt word limit

Info: It will affect to get_the_excerpt();

// Custom excerpt word limit
function custom_excerpt_length($length)
{
	global $typenow;
	$amount = 150;
	
	//if("page" == $typenow){ 
	//	$amount = 150; 
	//}
	
	return $amount;
}
add_filter('excerpt_length', 'custom_excerpt_length', 999);

Custom excerpt append word

Info: It will affect to get_the_excerpt();

// Custom excerpt append word
function custom_excerpt_more($more)
{
    return ' ...';
}
add_filter('excerpt_more', 'custom_excerpt_more');

Custom file size limit

Info: It will affect to all file uploads

// Custom file size limit
function filter_site_upload_size_limit($size)
{
	// Set the upload size limit to 10 MB for users lacking the 'manage_options' capability.
    $size = 1024 * 1100; // 1 MB.
    return $size;
}
add_filter('upload_size_limit', 'filter_site_upload_size_limit', 20);

Custom menu items order

Info: It affect to admin sidebar menus

// Custom menu items order
function admin_menu_items_order()
{
    global $menu;
    foreach ($menu as $key => $value)
	{
        if ('upload.php' == $value[2])
		{
            $oldkey = $key;
        }
    }
    $newkey = 24; // use whatever index gets you the position you want,if this key is in use you will write over a menu item!
    $menu[$newkey]=$menu[$oldkey];
    $menu[$oldkey]=array();
}
add_action('admin_menu', 'admin_menu_items_order');

Show future posts

Info: It will affect to a post type

// Show future posts
function show_future_posts($data) 
{
	if($data['post_status'] == 'future' && $data['post_type'] == 'post-type')
	{	
		$data['post_status'] = 'publish';
	}
	return $data;
}
add_filter('wp_insert_post_data', 'show_future_posts');

Protect meta key (custom fields)

Info: It will hide a custom field on select box in edit fields

// Protect meta key (custom fields)
function protected_meta_filter($protected, $meta_key)
{
	$fields_target = array('custom-field');
	
    if(in_array($meta_key, $fields_target))
	{
		return true;
	}
	return $protected;
}
add_filter('is_protected_meta', 'protected_meta_filter', 10, 2);

Create new attachment fields

Info: Create a custom attachment field screen

// Create new attachment fields
function attachment_field_add($form_fields, $post)
{
	$form_fields['custom-field'] = array(
		'label' => 'Custom Field',
		'input' => 'text',
		'value' => get_post_meta($post->ID, 'custom_field_id', true),
		'helps' => 'Custom Field Help',
	);
	return $form_fields;
}
add_filter('attachment_fields_to_edit', 'attachment_field_add', 10, 2);

Set new attachment fields

Info: Set a custom attachment field screen

// Set new attachment fields
function attachment_field_save($post, $attachment)
{
	if(isset($attachment['custom-field']))
	{
		update_post_meta($post['ID'], 'custom_field_id', $attachment['custom-field']);
	}
	return $post;
}
add_filter('attachment_fields_to_save', 'attachment_field_save', 10, 2);

Increase post meta limit

Info: Increase the custom field limit on select box (edit page screen)

// Increase post meta limit
function customfield_limit_increase($limit)
{
	$limit = 100;
	return $limit;
}
add_filter('postmeta_form_limit', 'customfield_limit_increase');

Remove custom post type

Info: https://developer.wordpress.org/reference/functions/unregister_post_type

// Remove custom post type
function delete_custom_post_type()
{
    unregister_post_type('post_type_slug');
}
add_action('init','delete_custom_post_type');

Custom admin post filter by taxonomy

Info: Show filter for custom taxonomy on post type item list

// Custom admin post filter by taxonomy
function custom_taxonomy_filter_1()
{
	global $typenow;
 
	// an array of all the taxonomyies you want to display. Use the taxonomy name or slug
	$taxonomies = array('custom-taxonomy-1');
 
	// must set this to the post type you want the filter(s) displayed on
	if($typenow == 'custom-post-type-1')
	{
		foreach ($taxonomies as $tax_slug){
			$tax_obj = get_taxonomy($tax_slug);
			$tax_name = $tax_obj->labels->name;
			$tax_terms = get_terms($tax_slug);
			
			echo "<select name='$tax_slug' id='$tax_slug' class='postform'>";
			echo "<option value=''>Show All $tax_name</option>";
			foreach($tax_terms as $tax_term)
			{ 
				echo '<option value='. $tax_term->slug, $_GET[$tax_slug] == $tax_term->slug ? ' selected="selected"' : '','>' . $tax_term->name .'</option>'; //(' . $tax_term->count .')
			}
			echo "</select>";
		}
	}
}
add_action('restrict_manage_posts', 'custom_taxonomy_filter_1');

Create Custom Taxonomy

Info: https://codex.wordpress.org/Function_Reference/register_taxonomy

// Create Custom Taxonomy
function create_custom_taxonomy_1() 
{
	// Add new taxonomy, make it hierarchical (like categories)
	$tax_title = 'Custom Taxonomy';
	$tax_item = 'Taxonomy Item';
	$tax_slug = 'custom-taxonomy-1';
	$tax_post_type = array('custom-post-type-1');
	$tax_args = array('hierarchical'      => true, // false = NOT hierarchical (like tags)
					  'labels'            => array('name'              => _x($tax_title, 'taxonomy general name', 'websitebase'),
												   'singular_name'     => _x($tax_item, 'taxonomy singular name', 'websitebase'),
												   'menu_name'         => __($tax_title, 'websitebase'),
												   'search_items'      => __('Search '.$tax_item, 'websitebase'),
												   'all_items'         => __('All '.$tax_title, 'websitebase'),
												   'parent_item'       => __('Parent '.$tax_item, 'websitebase'),
												   'parent_item_colon' => __('Parent '.$tax_item.':', 'websitebase'),
												   'edit_item'         => __('Edit '.$tax_item, 'websitebase'),
												   'update_item'       => __('Update '.$tax_item, 'websitebase'),
												   'add_new_item'      => __('Add New '.$tax_item, 'twebsitebase ,
												   'new_item_name'     => __($tax_title, 'websitebase')),
					  'show_ui'           => true,
					  'show_admin_column' => true,
					  'query_var'         => true,
					  'rewrite'           => array('slug' => $tax_slug,
												   'with_front' => false),
					);

	register_taxonomy($tax_slug, $tax_post_type, $tax_args);
	
	//Add default items
	$parent_term = term_exists( $tax_slug, $tax_slug ); // array is returned if taxonomy is given
	$parent_term_id = $parent_term['term_id']; // get numeric term id
	
	$term_name_1 = 'General';
	$term_slug_1 = 'general';
	wp_insert_term($term_name_1, $tax_slug, array( 'slug' => $term_slug_1,'parent'=> $parent_term_id));
}
add_action('init', 'create_custom_taxonomy_1', 0);

Create Custom Post Type

Info: https://codex.wordpress.org/Function_Reference/register_post_type

// Create Custom Post Type
function custom_post_type_1() 
{
	// Set UI labels for Custom Post Type
	$post_title = 'Custom Post Type 1';
	$post_item = 'Post Type 1 Item';
	$post_slug = 'custom-post-type-1';
	$post_position = 4;
	
	// Set other options for Custom Post Type
    $post_args = array('label'               	=> __($post_slug, 'websitebase'),
					  'description'         	=> __('List '.$post_item, 'websitebase'),
					  'labels'              	=> array('name'                => _x($post_title, 'Post Type General Name', 'websitebase'),
														 'singular_name'       => _x($post_item, 'Post Type Singular Name', 'websitebase'),
														 'menu_name'           => __($post_title, 'websitebase'),
														 'parent_item_colon'   => __('Parent '.$post_item, 'websitebase'),
														 'all_items'           => __('All '.$post_title, 'websitebase'),
														 'view_item'           => __('View '.$post_item, 'websitebase'),
														 'add_new_item'        => __('Create New '.$post_item, 'websitebase'),
														 'add_new'             => __('Add '.$post_item, 'websitebase'),
														 'edit_item'           => __('Edit '.$post_item, 'websitebase'),
														 'update_item'         => __('Update '.$post_item, 'websitebase'),
														 'search_items'        => __('Search '.$post_item, 'websitebase'),
														 'not_found'           => __($post_item.' Not Found', 'websitebase'),
														 'not_found_in_trash'  => __($post_item.' Not Found in Trash', 'websitebase'),
														 'not_found_in_trash'  => __('List '.$post_item, 'websitebase')),
					  // Features this CPT supports in Post Editor
					  'supports'            	=> array('title',
														 'editor',
														 'excerpt',
														 'author',
														 'thumbnail',
														 'comments',
														 'revisions',
														 'custom-fields'),
					  // You can associate this CPT with a taxonomy or custom taxonomy.
					  'taxonomies'          	=> array('custom_taxonomy_1',
														 'post_tag'),
					  // A hierarchical CPT is like Pages and can have Parent and child items. A non-hierarchical CPT is like Posts.
					  'hierarchical'        	=> false,
					  'public'              	=> true,
					  'show_ui'             	=> true,
					  'show_in_menu'        	=> true,
					  'show_in_nav_menus'   	=> true,
					  'show_in_admin_bar'   	=> true,
					  'menu_position'       	=> $post_position,
					  'can_export'          	=> true,
					  'has_archive'         	=> true,
					  'exclude_from_search' 	=> false,
					  'publicly_queryable'  	=> true,
					  'capability_type'     	=> 'page',
    );
    
    // Registering your Custom Post Type
    register_post_type($post_slug, $post_args);
}
add_action('init', 'custom_post_type_1', 0);

Radio buttons terms custom text

// Replace filter for no term selected text, use %s for term name
function radio_buttons_no_term()
{
    return 'No category';
}
add_filter('radio_buttons_for_taxonomies_no_term_selected_text', 'radio_buttons_no_term');

Tiny MCE custom formats

// Modify TinyMCE editor formats
function tiny_mce_remove_unused_formats( $initFormats ) {
    // Add block format elements you want to show in dropdown
    $initFormats['block_formats'] = 'Paragraph=p;Heading 6=h6;Heading 5=h5;Heading 4=h4;Heading 3=h3;Heading 2=h2;Heading 1=h1';
    return $initFormats;
}
add_filter('tiny_mce_before_init', 'tiny_mce_remove_unused_formats');

WP custom text strings

Note: If you need to filter a translation with context, use gettext_with_context filter:

// Replace WP text strings
function custom_filter_gettext( $translated, $original, $domain ) 
{
    // Use the text string exactly as it is in the translation file (add %s for values)
    if ($translated == 'Category: %s') 
    {
        $translated = 'My Category: %s';
    }

    return $translated;
}
add_filter('gettext', 'custom_filter_gettext', 10, 3 );

Migrate DB

This project uses a custom CSS & JS Rebuild Method so you need to track Serialized URL's. To do that you can use this plugin to replace all URL's.

Is important to prepend http or https to localhost & production URL. For example: http://localhost/wordpress to http://mywebsite.com

migrate-db-example

Other PHP, CSS and JS

Code Sections

If you want to add an extra code in header, footer or anywhere, you can add it using require_once('resources.php'); avobe get_header(); (or include('header.php') in standalone) and put the code between them to get it working.

Note: By default, header and footer section was created.

<?php require_once('functions.php'); ?>
<?php $php->section('header','start'); ?>
<style type="text/css">
body{
	background: #FF0000;
}
</style>
<script type="text/javascript">
	alert("My Alert!");
</script>
<?php $php->section('header','end'); ?>
<?php get_header(); ?>
...

So, to get this code in the footer we use:

<?php echo $php->section('header','get'); ?>

JS Paginator

Basic CSS to get JS Paginator working properly

/* JS Paginator */
.JSpaginator {
	width: 100%;
	height: 50px;
	float: left;
	display: table;
}
.JSpaginator .JSpageItems {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.JSpaginator .JSpageItems .JSpageGroup {
	display: inline;
}
.JSpaginator .JSpageItems .JSpageGroup.JSpageGroupPrev:after,
.JSpaginator .JSpageItems .JSpageGroup.JSpageGroupNext:before{
	content: '•••';
	vertical-align: bottom;
}
.JSpaginator .JSpageItems a,
.JSpaginator .JSpageItems a:hover,
.JSpaginator .JSpageItems a:visited {
	display: none;
	color: gray;
	font-size: 24px;
	font-family: 'OpenSans';
	vertical-align: middle;
	padding: 5px 8px;
	cursor: pointer;
}
.JSpaginator .JSpageItems .JSpageGroup.JSpageActive a,
.JSpaginator .JSpageItems .JSpageGroup.JSpageActive a:hover,
.JSpaginator .JSpageItems .JSpageGroup.JSpageActive a:visited,
.JSpaginator .JSpageItems .JSpageGroup.JSpageActive a:active {
	display: inline-block;
}
.JSpaginator .JSpageItems a.JSpagePrev,
.JSpaginator .JSpageItems a.JSpageNext {
	display: inline-block;
}
.JSpaginator .JSpageItems a:hover,
.JSpaginator .JSpageItems a.JSpageActive {
	color: red;
	font-family: 'OpenSans-Semibold';
}
.JSpaginator .JSpageItems a .glyphicon {
	font-size: 15px;
	vertical-align: middle;
	margin-top: -7px;
}
@media (max-width: $screen-xs-up) 
{
	.JSpaginator .JSpageItems a,
	.JSpaginator .JSpageItems a:hover,
	.JSpaginator .JSpageItems a:visited,
	.JSpaginator .JSpageItems a:active,
	.JSpaginator .JSpageItems span {
		font-size: 20px;
	}
}
/* JS Paginator */

jQuery Date Picker

Basic CSS to edit datepicker style

/* UI Date Picker Custom */
.ui-datepicker .ui-datepicker-header {
	background: red;
	border-color: red;
	color: white;
}
.ui-datepicker .ui-datepicker-prev span {
	background: url("$global-url/resources/jquery-ui/css/images/ui-icons_ffffff_256x240.png");
	background-position: -80px -192px;
}
.ui-datepicker .ui-datepicker-next span {
	background: url("$global-url/resources/jquery-ui/css/images/ui-icons_ffffff_256x240.png");
	background-position: -48px -192px;
}
.ui-datepicker .ui-datepicker-prev-hover span {
	background: url("$global-url/resources/jquery-ui/css/images/ui-icons_ffffff_256x240.png");
	background-position: -80px -192px;
}
.ui-datepicker .ui-datepicker-next-hover span {
	background: url("$global-url/resources/jquery-ui/css/images/ui-icons_ffffff_256x240.png");
	background-position: -48px -192px;
}
.ui-state-active, 
.ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active, 
a.ui-button:active, 
.ui-button:active, 
.ui-button.ui-state-active:hover {
    border: 1px solid red;
    background: red;
    color: black;
}
.ui-state-hover, 
.ui-widget-content .ui-state-hover, 
.ui-widget-header .ui-state-hover, 
.ui-state-focus, 
.ui-widget-content .ui-state-focus, 
.ui-widget-header .ui-state-focus, 
.ui-button:hover, 
.ui-button:focus {
   border: 1px solid red;
    background: red;
    color: white;
}
.ui-datepicker .ui-datepicker-prev-hover.ui-state-hover {
	border: none;
}
.ui-datepicker .ui-datepicker-next-hover.ui-state-hover {
	border: none;
}
.ui-datepicker-title select,
.ui-datepicker-title select option{
	color: black;
}
/* UI Date Picker Custom */

Some code snippets, functions, and stuff should be used with WebsiteBase project. Anyways you can get only the things you want to use in your own project, every function is standalone.

Website Base

Custom Utilities

Wordpress

Basic Guides