Author: admin

Test New6

Post author By admin
Post date February 7, 2022

Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.

Uncategorized

Test New4

Post author By admin
Post date February 7, 2022

Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue.

Uncategorized

Test New3

Post author By admin
Post date February 7, 2022

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus.

Uncategorized

Test New 2

Post author By admin
Post date February 7, 2022

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.

Uncategorized

New test

Post author By admin
Post date February 6, 2022

John Sodeyama

Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.

Uncategorized

test

Post author By admin
Post date February 6, 2022

[mailpoet_form id=”1″]

CSS

Mega menu

Post author By admin
Post date July 20, 2020

* { margin: 0; padding: 0; box-sizing: border-box; }
.nav-bar {
	width: 100%; background: #444; height: 100px; position: relative;
}

.nav-bar .nav-bar-menu-btn {
	width: 100px; height: 100px; background: blue;
	float: right; text-align: center;
	color: #fff;
	cursor: pointer; transition: all 0.4s ease;
}
.nav-bar .nav-bar-menu-btn:hover { color: red; }
.nav-bar .nav-bar-menu-btn:hover .mega-menu { color: #fff; }
.nav-bar .nav-bar-menu-btn .mega-menu li:hover { color: red; }
.header-banner { background: #18bc9c; width: 100%; height: 2350px; }

.mega-menu { 
	position: absolute; top: 0; right: 0;
	width: 100%; height: auto; background: #2c3e50;
	transition: all 0.4s ease;
	padding: 40px;
	visibility: hidden; opacity: 0;
}
.inner-mega-menu { width: 24%; float: left; list-style: none; }
.inner-mega-menu li { padding: 10px 0; text-align: left; transition: all 0.4s ease; }
.nav-bar .nav-bar-menu-btn:hover .mega-menu { 
	visibility: visible; opacity: 1; 
}

<div class="container" style="position: fixed; width: 100%;">
	<nav class="nav-bar">
		  <div class="nav-bar-menu-btn">Menu
		  	<div class="mega-menu">
		  		<ul class="inner-mega-menu">
		  			<li>Bibendum</li>
		  			<li>Mattis Ridiculus</li>
		  			<li>Ligula</li>
		  			<li>Purus Sem</li>
		  		</ul>
		  		<ul class="inner-mega-menu">
		  			<li>Bibendum</li>
		  			<li>Mattis Ridiculus</li>
		  			<li>Ligula</li>
		  			<li>Purus Sem</li>
		  		</ul>
		  		<ul class="inner-mega-menu">
		  			<li>Bibendum</li>
		  			<li>Mattis Ridiculus</li>
		  			<li>Ligula</li>
		  			<li>Purus Sem</li>
		  		</ul>
		  		<ul class="inner-mega-menu">
		  			<li>Bibendum</li>
		  			<li>Mattis Ridiculus</li>
		  			<li>Ligula</li>
		  			<li>Purus Sem</li>
		  		</ul>
		  	</div>
		</div>
	</nav>
</div>

CSS

Add line breaks on psuedo content text

Post author By admin
Post date June 30, 2020

p:after {
    content: "Ligula /A Justo /A Ridiculus
    white-space: pre-wrap;
}

Result:
Ligula
Justo
Ridiculus

PHP WordPress

Sample code: single post bottom navigation w/Ajax Load More

Post author By admin
Post date June 17, 2020

<?php if ( in_category( 'shows' )): ?>
	
	<?php $current_id = get_the_ID();
	echo do_shortcode('[ajax_load_more post__not_in="'. $current_id .'" id="post-feed-ajax" loading_style="blue" container_type="ul" post_type="post"  orderby="menu_order" posts_per_page="8" category="shows" button_label="Load more blog posts" button_loading_label="Loading posts..." scroll="false"]'); ?>
		
<?php elseif ( in_category( 'blog' )): ?>
	
	<?php $current_id = get_the_ID();
	echo do_shortcode('[ajax_load_more post__not_in="'. $current_id .'" id="post-feed-ajax" loading_style="blue" container_type="ul" post_type="post"  orderby="menu_order" posts_per_page="4" category="blog" button_label="Load more blog posts" button_loading_label="Loading posts..." scroll="false"]'); ?>
		
<?php else: ?>
	
<?php endif; ?>

JavaScript

How to disable Google Map scrolling on mobile devices

Post author By admin
Post date October 3, 2016

function initMap(){
    var isDraggable = $(document).width() > 480 ? true : false; // If document (your website) is wider than 480px, isDraggable = true, else isDraggable = false

    var mapOptions = {
        draggable: isDraggable,

        scrollwheel: false, // Prevent users to start zooming the map when scrolling down the page
        //... options options options
    };
}

Source: https://coderwall.com/p/pgm8xa/disable-google-maps-scrolling-on-mobile-layout

HTML PHP WordPress

Redirecting home page for mobile devices

Post author By admin
Post date October 17, 2018

<?php
  $ua = $_SERVER['HTTP_USER_AGENT'];
  if((strpos($ua,'iPhone')!==false)|| 
  (strpos($ua,'Android')!==false)) {
  header("Location:/mobile/");
  exit();
}
?>

PHP WordPress

WordPress Single Template for a Specific Category

Post author By admin
Post date September 30, 2018

<?php 
function get_custom_cat_template($single_template) { 
  global $post; 
    if ( in_category( 'category-name' )) {
    $single_template = dirname( __FILE__ ) . '/single-template.php';
  } 
  return $single_template;
}

add_filter( "single_template", "get_custom_cat_template" ) ;
?>

Source: https://stanhub.com/create-wordpress-single-template-for-a-specific-category-or-custom-post-type/

CSS

Creating full width container inside fixed width container

Post author By admin
Post date September 21, 2018

.row-full {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
}

PHP WordPress

Add a new hook to Woocommerce Single Product Page

Post author By admin
Post date April 4, 2018

// Add ACF Info to Product display page 

add_action( 'woocommerce_after_single_product_summary', "ACF_product_content", 10 ); 

function ACF_product_content(){
    echo '<h2> ACF Content </h2>';
    if (function_exists('the_field')){
        echo '<p>Woohoo, the_field function exists! </p>';
    the_field('test_field');
    }
}

PHP WordPress

WordPress – Declaring Menu & Widget Properties

Post author By admin
Post date May 31, 2017

//declaring menu property in functions.php
register_nav_menus(
    array(
        'main_nav' => 'main Navigation Menu'
    )
);

//declaring widget property in HTML
<?php wp_nav_menu(array('menu' => 'Name of Menu')); ?>

//*"Name of Menu" is the name of the menu declared at "Menus" settings.


//declaring widget property in fuctions.php
register_sidebar(
    array(
        'name' => 'Sidebar Widgets',
        'id' => 'sidebar-widgets',
        'description' => 'Widgets for Sidebar',
        'before_widget' => '<div class="XXXXX">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="XXXXXX">',
        'after_title' => '</h2>'
    )
);

//declaring widget property in HTML
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Name of Widgetized Area") ) : ?>
<?php endif;?>

Knowledge WordPress

Sequel Pro Setup

Post author By admin
Post date May 31, 2017

Screenshot 2017-05-31 08.29.32

Screenshot 2017-05-31 08.31.50

PHP WordPress

Customize the logo on the WP login page

Post author By admin
Post date April 13, 2017

// Customize the login page
function my_login_logo_one() { 
?> 
<style type="text/css"> 
body.login div#login h1 a {
	background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/xxxxxx_logo.png); 
	padding-bottom: 36px;
	width: 155px;
	height: 126px;
	background-size: 155px;
} 
</style>
<?php 
} add_action( 'login_enqueue_scripts', 'my_login_logo_one' );

Uncategorized

ACF: Declaring what image size to use

Post author By admin
Post date April 12, 2017

<?php
    $attachment_id = get_field('image');
    $size = "medium";
    $size2 = "large";
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $image2 = wp_get_attachment_image_src( $attachment_id, $size2 );
    $alt_text = get_post_meta($attachment_id , '_wp_attachment_image_alt', true);
?>
<a href="<?php echo $image2[0];"><img src="<?php echo $image[0]; ?>" alt="<?php echo $alt_text; ?>" /></a>

You must set the image return type to ‘ID’.
Change “get_field” to “get_sub_field” if using repeater.

CSS

Object-fit

Post author By admin
Post date April 8, 2017

.container {
    width: 500px;
    height: 250px;
}
.container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<div class="container">
    <img src="xxxxx.jpg" data-object-fit="cover">
</div>

<script src="js/objectFitPolyfill.min.js"></script>

Resource:
https://github.com/constancecchen/object-fit-polyfill

PHP WordPress

Set featured image from ACF image field

Post author By admin
Post date April 8, 2017

Create an image field with the field name of “_thumbnail_id”, and ACF will just update the featured image for you.

Resources:
https://support.advancedcustomfields.com/forums/topic/set-featured-image-from-acf-image-field/

CSS HTML

iframe Responsive Fluid Width (Youtube, Google Map, etc,)

Post author By admin
Post date October 13, 2016

.iframe-wrap {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}
.iframe-wrap iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

<div class="iframe-wrap">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/pEIu-WG-D-s" frameborder="0" allowfullscreen=""></iframe>
</div>

PHP WordPress

Display WP tagcloud in list format

Post author By admin
Post date October 11, 2016

<ul>
    <?php echo get_the_term_list( $post->ID, 'keywords', '<li>', ', ', '</li>' ) ?>
</ul>

CSS HTML

How to hide placeholder with CSS

Post author By admin
Post date May 30, 2020

::-webkit-input-placeholder {
   opacity: 0;
}
:-moz-placeholder { /* Firefox 18- */
   opacity: 0;  
}
::-moz-placeholder {  /* Firefox 19+ */
   opacity: 0;  
}
:-ms-input-placeholder {  
   opacity: 0;
}

Reference: http://frontendbabel.info/articles/styling-placeholder-using-css/

CSS HTML

CSS – Add commas to each span except the last one

Post author By admin
Post date September 23, 2016

<div class="wrap">
    <span>AAAA</span>
    <span>BBBB</span>
    <span>CCCC</span>
    <span>DDDD</span>
</div>
.wrap > span:not(:last-child):after {
	content: ", ";
}

Result
AAAA, BBBB, CCCC, DDDD

PHP WordPress

WordPress – How to display taxonomy list without links

Post author By admin
Post date September 21, 2016

<?php
$terms = get_the_terms( get_the_ID(), 'custom_post_type_slug' );
if ( !empty($terms) ) : if ( !is_wp_error($terms) ) :
?>
<?php foreach( $terms as $term ) : ?>
<?php echo $term->name; ?>&emsp;
<?php endforeach; ?>
<?php endif; endif; ?>

PHP WordPress

WordPress – Pagenation fix for custom post type

Post author By admin
Post date September 21, 2016

<?php
    $wp_query = new WP_Query();
    $param = array(
        'posts_per_page' => '10',
        'post_type' => 'vidablog',
        'post_status' => 'publish',
        'orderby' => 'post_date',
        'order' => 'DESC',
        'paged' => $paged
    );
    $wp_query->query($param);

    if($wp_query->have_posts()): while($wp_query->have_posts()) : $wp_query->the_post();
?>

JavaScript Knowledge

JavaScript Jargon

Post author By admin
Post date April 27, 2016

Data Types	Numbers Strings Booleans Arrays Objects (built-in: window, document, and more objects have properties)
Veriables	JavaScript’s nouns
Operators	JavaScript’s verbs
Functions	JavaScript’s paragraphs (also a data type) Inside an object: a method
Arguments	How we get data into a function for processing
Control Structures	if, else, switch
Loops	for, while
The DOM	DOM = Document Object Model The Outline of a page The method available for manipulating the goods Lots of methods document.getElementById Fastest, but there are others Lots of properties value, checked, className, id

CSS

CSS Defaults

Post author By admin
Post date April 25, 2016

.reset-this {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-span : 1;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font : normal;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
orphans : 0;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
/* May need to alter quotes for different locales (e.g fr) */
quotes : ‘\201C’ ‘\201D’ ‘\2018’ ‘\2019’;
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
widows : 0;
width : auto;
word-spacing : normal;
z-index : auto;
}

Knowledge

Making div height to auto-adjust to background size

Post author By admin
Post date April 25, 2016

<div style="background-image: url(http://your-image.jpg);">
    <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>