Common HTML Codes
Add to HTML section
<div style="padding: 0px 0px 0px 25px;"></div>
<p style="font-size: 24px; line-height: 24px; letter-spacing: 10px; margin: 9px 0 0;"></p>
<font size="3" color="red"></font>
<h1 style="color:blue;"></h1>
<p style="color:red;"></p>
<p style="text-align:center;"></p>
<span class="title-white">About Us</span>
<sup>Superscript</sup>
<sub>Subscript</sub>
<blockquote>Text Block Quote</blockquote>
© - Copyright
™ - Trademark
Buttons
Add to CSS section
.cta-button {
background-color: #590172;
border-radius: 4px;
border: 2px solid;
border-color: #590172;
color: #ffffff !important;
padding: 6px 12px;
text-align: center;
text-decoration: none;
vertical-align: -8px;
margin-top: 20px;
margin-bottom: 20px;
cursor: pointer;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
display: inline-block;
}
.cta-button:hover {
background-color: #9a51cd;
border-radius: 4px;
border: 2px solid;
border-color: #9a51cd;
color: white !important;
padding: 6px 12px;
text-align: center;
text-decoration: none;
vertical-align: -8px;
margin-top: 20px;
margin-bottom: 20px;
cursor: pointer;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
display: inline-block;
}
Add to HTML section
<a class="cta-button" href="/2022-Registration.pdf" target="_blank">View Flyer</a>
Popup Window
Insert before closing </body> tag
<script>var disclaimer = document.getElementById('disclaimer_p')
if(disclaimer!=null) {
disclaimer.onclick = function(e){ e.preventDefault();
alert("Text goes here.");}}
</script>
Add to HTML section
View our third-party <a href="#" id="disclaimer_p">disclaimer</a>
Gradient Text
Add to CSS section
.gradient-text {
background: linear-gradient(90deg, #0076FF, #18ee7d);
filter: drop-shadow (1px 1px rgba(0,0,0,.15));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Add to HTML section
<span class="gradient-text">Text goes here</span>
Videos & iFrame
Add to HTML section
<video width="660" height="340" loop preload="none" poster="/wp-content/uploads/2023/08/uqual-brand-video-thumb.png" onclick="this.play();this.setAttribute('controls','controls')" onclick="this.load();this.removeAttribute('controls')"><source src="/wp-content/uploads/2023/08/uqual-brand-video.mp4" type="video/mp4" /></video>
<iframe src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&autopause=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
Tables
Add to CSS section
table, tr, td {
border: none !important;
}
Add to HTML section
<table width="100%">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td style="vertical-align: top;"></td>
<td></td>
<td></td>
</tr>
</table>
Hyperlinks
Add to CSS section
.footer-hyperlink a {
color: #dbdbdb;
}
.footer-hyperlink a:hover {
color: #9a51cd;
}
Add to HTML section
<a rel="nofollow" href="http://example.com/" style="color:#FF0000;">Red Link</a>
Custom Fonts
Add to CSS section
@font-face {
font-family: 'YourFontName';
src: url('/fonts/Poppins-Regular.ttf');
font-weight: normal;
font-style: normal;
}
.custom-font-name {
font-family: 'YourFontName';
font-size: 34px;
font-weight: 800;
line-height: 38px;
color: #ffffff;
}
Add to HTML section
<span class="custom-font-name">Text goes here</span>
Font Awesome
Insert before closing </head> section
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
Add to HTML section
<i class="fa fa-desktop" style="font-size:50px;color:blue"></i>
<i class="fa-solid fa-coffee fa-2xs"></i>
<i class="fa-solid fa-coffee fa-xs"></i>
<i class="fa-solid fa-coffee fa-sm"></i>
<i class="fa-solid fa-coffee fa-lg"></i>
<i class="fa-solid fa-coffee fa-xl"></i>
<i class="fa-solid fa-coffee fa-2xl"></i>
Bullet Lists
Add to CSS section
ul.special-bullet {
list-style: none;
}
ul.special-bullet li:before {
content: "\21C1";
margin-left: 0px;
padding-right: 12px;
}
Add to HTML section
<ul class="special-bullet">
<li></li>
</ul>
Contact Form 7
Add to CSS section
/*--- Contact Form 7 ---*/
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
border: 0px !important;
background-color: #ffffff !important;
width: 100% !important;
color: #333333 !important;
margin-top: 8px !important;
padding: 10px !important;
}
.wpcf7-submit {
color: #ffffff !important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
background: #590172 !important;
border: 2px solid #590172;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.wpcf7-submit:hover {
background-color: #333333 !important;
border-color: #333333 !important;
color: #ffffff !important;
padding: 6px 20px !important;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #333333 !important;
opacity: 50;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #333333 !important;
opacity: 50;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #333333 !important;
opacity: 50;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #333333 !important;
opacity: 50;
}
Add to CSS section
/*--- 2 Column Form ---*/
#left {
width: 47%;
float: left;
margin-right:6%;
}
#right {
width: 47%;
float: left;
}
.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
margin-bottom:1px;
}
.clearfix {
display:block;
}
#bottombox {
margin-top:11%;
margin-bottom:2%;
}
CF7 Custom Masks
Install Masks Form Fields (by Ivan Petermann)
Add to Functions.php or Snippets
function card_number_form_fields() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('input.card_number').mff_mask('0000-0000-0000-0000');
});
</script>
<?php
}
add_action('wp_footer', 'card_number_form_fields', 111);
function card_exp_form_fields() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('input.card_exp').mff_mask('00/00');
});
</script>
<?php
}
add_action('wp_footer', 'card_exp_form_fields', 111);
Add to CF7 form
<div class="clearfix">
<div id="left">
<span class="cf7-title">First Name</span>
[text* first-name]
</div>
<div id="right">
<span class="cf7-title">Last Name</span>
[text* last-name]
</div>
<br>
<div id="left">
<span class="cf7-title">Phone Number</span>
[tel* your-phone class:phone_us placeholder "(___) ___-____"]
</div>
<div id="right">
<span class="cf7-title">Email Address</span>
[email* your-email]
</div>
<div id="bottombox">
<span class="cf7-title">Your Message</span>
[textarea* your-message]
</div>
</div>
<div style="padding: 14px 0px 20px 0px;">[recaptcha]</div>
<p>[submit "Send Message"]</p>
Add to CF7 form
<div class="clearfix">
<div id="topbox">
<span class="cf7-title">Name on Card</span>
[text* name-on-card]
</div>
<div id="topbox">
<span class="cf7-title">Card Number</span>
[text* card-number class:card_number placeholder "____-____-____-____"]
</div>
<div id="left">
<span class="cf7-title">Expiration</span>
[text* card-expiration class:card_exp placeholder "__/__"]
</div>
<div id="right">
<span class="cf7-title">CVV</span>
[text* card-cvv]
</div>
<div id="left">
<span class="cf7-title">Address</span>
[text* address-1]
</div>
<div id="right">
<span class="cf7-title">Apt / Unit #</span>
[text address-2]
</div>
<div id="left">
<span class="cf7-title">City</span>
[text* city]
</div>
<div id="right">
<span class="cf7-title">State</span>
[text* state]
</div>
<div id="right">
<span class="cf7-title">ZIP Code</span>
[text* zip-code]
</div>
</div>
<div style="padding: 14px 0px 20px 0px;">[recaptcha]</div>
<p>[submit "Submit"]</p>
Logged In / Out
Add to Functions.php or Snippets
// Add CSS class for logged in and logged out users
add_filter('body_class','er_logged_in_filter');
function er_logged_in_filter($classes) {
if( is_user_logged_in() ) {
$classes[] = 'logged-in-condition';
} else {
$classes[] = 'logged-out-condition';
}
// return the $classes array
return $classes;
}
Add to CSS section
.logged-in-condition .hide-logged-in {
display: none !important;
}
.logged-out-condition .hide-logged-out {
display: none !important;
}
Additional CSS
Add to CSS section
.scroll-on-mobile {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.vl {
border-left: 6px solid white;
height: 100%;
}
.hz {
border-bottom: 6px solid #ba3f64;
width: 250px;
text-align: center;
}
.center-content {
align-content: center;
}
.verticle-align-content {
vertical-align: top;
}
Sidebar Widgets
Add to CSS section
.et_pb_widget ul li {
margin-top: 4px;
display: inline-block;
}
.wp-block-latest-posts__featured-image img {
border-radius: 4px;
}
.wp-block-latest-posts__featured-image.alignleft {
padding-right: 14px !important;
}
.et_pb_bg_layout_light .et_pb_widget li a {
color: #856b4d;
font-size: 16px;
font-weight: 600;
margin-left: 14px;
line-height: 1.3em;
display: flex;
}
.wp-block-latest-posts__post-date {
margin-left: 14px;
display: flex;
}
Add to Widgets section
<div style="padding: 0px 0px 15px 0px;"><h3>Latest Posts</h3></div>
<!-- wp:latest-posts {"excerptLength":15,"displayPostDate":true,"displayFeaturedImage":true,"featuredImageAlign":"left","featuredImageSizeWidth":75,"featuredImageSizeHeight":75,"align":"left"} /-->
Dynamic Content
Add to Functions.php or Snippets
function show_loggedin_function( $atts ) {
global $current_user, $user_login;
get_currentuserinfo();
add_filter('widget_text', 'do_shortcode');
if ($user_login)
return 'Welcome, ' . $current_user->display_name . '';
else
return '<a href="' . wp_login_url() . ' ">Login</a>';
}
add_shortcode( 'show_loggedin_as', 'show_loggedin_function' );
function show_useremail_function( $atts ) {
global $current_user, $user_email;
get_currentuserinfo();
add_filter('widget_text', 'do_shortcode');
if ($user_email)
return 'Email: ' . $current_user->user_email . '';
else
return '<a href="/wp-login.php?action=lostpassword">Reset Password</a>';
}
add_shortcode( 'show_useremail_as', 'show_useremail_function' );
Add to HTML section
[show_loggedin_as]
[show_useremail_as]
Event Listener
Add to JavaScript section
<iframe style="width: 1px; min-width: 100%; height: 1580px;" src="https://belrea.populiweb.com/router/admissions/onlineinquiries/respond/g3ccd2f5443e713a9f37d0d365271a39ffe06f3393edde66e0a184babfe1741575956d657756bffcc486d0c45f0a21aaa306a4d1c2a32dce7b5f200280e40d45411404753591c26c827bd553bf87c025f84d6?embedded=1&program=35408" frameborder="0"></iframe>
<script>
window.addEventListener('message',function(message){
if(message.data.type == 'populi.inquiry.submitted'){
window.location.href = "https://apply.belrea.edu/whats-next-apply-now/";
}
});
</script>
Hide Admin Bar
Add to Functions.php or Snippets
add_action('after_setup_theme', 'remove_admin_bar');
function remove_admin_bar() {
if (!current_user_can('administrator') && !is_admin()) {
show_admin_bar(false);
}
}
Snippets (PHP)
Add to Functions.php or Snippets | Shortcode Example – 2024
/*--- Copyright Year ---*/
function this_year(){
return date("Y");
}
add_shortcode('this-year', 'this_year');
/*--- Site Name ---*/
function site_name(){
return 'Mile High Hot Tubs';
}
add_shortcode('site-name', 'site_name');
/*--- Phone Link ---*/
function phone_link(){
$hypen = "\u{2011}";
return '<a href="tel:720-500-2521">720' . $hypen . '500' . $hypen . '2521</a>';
}
add_shortcode('phone-link', 'phone_link');
/*--- Site Email ---*/
function site_email(){
return '<a href="mailto:support@milehighhottub.com">support@milehighhottub.com</a>';
}
add_shortcode('site-email', 'site_email');