Category Archives: WordPress

Background overlay on mobile for Oxygen builder

Posted in CSS, Design, Development, Oxygen, PHP, WordPress on July 24, 2020 by rowej83.

In Oxygen, you can apply a background image as well as an image overlay within the options. However, these settings can not be changed per break point. Why would you want it to change based on break point? If the foreground text is hard to read due to not enough contrast when in the mobile view(or any really) then you would want to increase the rgba transparency value. Here is what I do in oxygen to do this since the overlay can’t be changed per breakpoint.

First, I give the hero section a base class of .hero , in that class I only specify settings that will apply to all other hero sections layouts that are the same minus the variable background image be used. Then, I add an additional class that is only used and is specific to that page to dictate the background image and to handle the image overlay in media queries in css.

i.e.

/* overlay for everypage. hero is homepage with it's unique layout settings, hero2 is sub pages that share the same hero layout . 

The class for the page specifies the background image and handles overlay on mobile
 */

@media(max-width:991px){
  #hero{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/background.jpg);
  }
   #hero2.v1-page{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/v1.jpg);
  }
  #hero2.v6-page{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V6-DBL.jpg);
  }
  #hero2.v5-page{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V5-DBL.jpg);
  }
   #hero2.v4-page{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V4-DBL.jpg);
  }
   #hero2.v3-page{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V3-DBL.jpg);
  }
     #hero2.v2-page{
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V2-DBL.jpg);
  }

}

/* overlay for everypage. hero is homepage with it's unique layout settings, hero2 is sub pages that share the same hero layout .

The class for the page specifies the background image and handles overlay on mobile

@media(max-width:991px){

#hero{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/background.jpg);

}

#hero2.v1-page{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/v1.jpg);

}

#hero2.v6-page{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V6-DBL.jpg);

}

#hero2.v5-page{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V5-DBL.jpg);

}

#hero2.v4-page{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V4-DBL.jpg);

}

#hero2.v3-page{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V3-DBL.jpg);

}

#hero2.v2-page{

background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://idealwebdesign.net/sites/vanilla/wp-content/uploads/2020/07/V2-DBL.jpg);

}

So here we have 2 different types of hero layouts. #hero and #hero2 – neither of these contain the background or overlay settings. The classes like .v2-page is only used for that page and contains the background image specific for that page. The overlay for mobile is also handled.

Flip Animation Bug in Oxygen Builder pro menu

Posted in Oxygen, WordPress on July 22, 2020 by rowej83.

Flip Animation Bug ( Animate on scroll issue actually)

If using a “flip” type animation there may be an issue where elements will appear when they shouldn’t. Such as below

Flip Animation bug Screenshot

The fix is below

.menu-item-has-children .sub-menu:not(.aos-animate) {
opacity: 0;
}

.menu-item-has-children .sub-menu:not(.aos-animate) {

opacity: 0;

}

Useful WordPress plugins

Posted in WordPress on December 13, 2019 by rowej83.

To allow users to use custom avatars and to disable gravatar, I use WP User Avatar

WP-Optimize can be used to see what database tables were made by other installed plugins.

WordPress Oxygen Builder notes

Posted in WordPress on November 23, 2019 by rowej83.

Easy posts and the repeater modules automatically include pagination. If you want to prevent this you can add “no_found_rows=true” to the custom query.

i.e.

posts_per_page=5&no_rows_found=true  // this will return only 5 posts with no pagination.

1	posts_per_page=5&no_rows_found=true // this will return only 5 posts with no pagination.

If you want to edit the css for the pagination links here are the selectors.

.oxy-easy-posts-pages{
/** for the container of the pagination links **/
}

.oxy-easy-posts-pages a{
/**  For the clickable pagination links **/
}
.page-numbers.current{
/**  For the current # in the pagination **/
}
a.next.page-numbers {
/** for the next link (non number) **/
}
a.previous.page-numbers {
/** for the previous link (non number) **/
}

.oxy-easy-posts-pages{

/** for the container of the pagination links **/

}

.oxy-easy-posts-pages a{

/** For the clickable pagination links **/

}

.page-numbers.current{

/** For the current # in the pagination **/

}

a.next.page-numbers {

/** for the next link (non number) **/

}

a.previous.page-numbers {

/** for the previous link (non number) **/

}

Custom Conditions Example

if( function_exists('oxygen_vsb_register_condition') ) {

global $oxy_condition_operators;

// Condition to check if a URL parameter is present.
oxygen_vsb_register_condition('Access Code', array('options'=>array(), 'custom'=>true), $oxy_condition_operators['string'], 'oxy_access_code_callback', 'Other');

function oxy_access_code_callback($value, $operator) {

if( $operator == '==') {

	if( !empty( $_GET['access'] ) && $_GET['access'] == $value ) {
	return true;
	} else {
	return false;
	}
	
} else if( $operator == '!=' ) {
	
	if( empty( $_GET['access'] ) || $_GET['access'] != $value ) {
		return true;
	} else {
		return false;
	}
	
}

}
	
}

if( function_exists('oxygen_vsb_register_condition') ) {

global $oxy_condition_operators;

// Condition to check if a URL parameter is present.

oxygen_vsb_register_condition('Access Code', array('options'=>array(), 'custom'=>true), $oxy_condition_operators['string'], 'oxy_access_code_callback', 'Other');

function oxy_access_code_callback($value, $operator) {

if( $operator == '==') {

if( !empty( $_GET['access'] ) && $_GET['access'] == $value ) {

return true;

} else {

return false;

}

} else if( $operator == '!=' ) {

if( empty( $_GET['access'] ) || $_GET['access'] != $value ) {

return true;

} else {

return false;

}

WordPress REST API and Custom Post Types

Posted in WordPress on February 27, 2019 by rowej83.

In my examples, I will be using a custom post type of “recipes”

In order to get a custom post type to show on the REST API (i.e. https://jmrowe.com/blog/wp-json/wp/v2/recipes ) , two options when using register_post_type can be set.

show_in_rest (boolean) (optional) Whether to expose this post type in the REST API.

rest_base (string) (optional) The base slug that this post type will use when accessed using the REST API. Default: $post_type

show_in_rest must be set to true

rest_base will be the “base” of the url when calling it in the rest API. So if nothing is set, the $post_type slug will be used.. i.e. recipes. If rest_base is changed to say “recipes-api” then to call it via the REST api it would look like: https://jmrowe.com/blog/wp-json/wp/v2/recipes-api

Sending the rest_url from WordPress to Javascript

wp_localize_script should be used to send the rest api url to javascript in a portable way such as:

wp_localize_script('registered-js-handle','site_variables', 
array('rest_url'=>rest_url('wp/v2/recipes-api/'))
);

// Now the rest url for recipes-api can be used in javascript 
// such as console.log(site_variables.rest_url);

wp_localize_script('registered-js-handle','site_variables',

array('rest_url'=>rest_url('wp/v2/recipes-api/'))

);

// Now the rest url for recipes-api can be used in javascript

// such as console.log(site_variables.rest_url);

Creating new fields in the REST responses

To add more/custom fields in the REST response. A function that does so must be added to the hook “rest_api_init” so..

add_action('rest_api_init','function_name_that_adds_custom_fields');

1	add_action('rest_api_init','function_name_that_adds_custom_fields');

register_rest_field() is used to register/add the custom field in the rest response

add_action( 'rest_api_init', 'create_api_posts_meta_field' );
 
function create_api_posts_meta_field() {
 
    // register_rest_field ( 'name-of-post-type', 'name-of-field-to-return', array-of-callbacks-and-schema() )
    register_rest_field( 'post', 'post-meta-fields', array(
           'get_callback'    => 'get_post_meta_for_api',
           'schema'          => null,
        )
    );
}

// function below is "callback" which provides what the
// value of the new rest field will be.
// in this case, it simply adds all post meta for an ID
// to the rest field 'post-meta-fields'

// the callback gives you access to the post object 
// so you can retrieve the post id
 
function get_post_meta_for_api( $object ) {
    //get the id of the post object array
    $post_id = $object['id'];
 
    //return the post meta
    return get_post_meta( $post_id );
}

add_action( 'rest_api_init', 'create_api_posts_meta_field' );

function create_api_posts_meta_field() {

// register_rest_field ( 'name-of-post-type', 'name-of-field-to-return', array-of-callbacks-and-schema() )

register_rest_field( 'post', 'post-meta-fields', array(

'get_callback' => 'get_post_meta_for_api',

'schema' => null,

)

);

}

// function below is "callback" which provides what the

// value of the new rest field will be.

// in this case, it simply adds all post meta for an ID

// to the rest field 'post-meta-fields'

// the callback gives you access to the post object

// so you can retrieve the post id

function get_post_meta_for_api( $object ) {

//get the id of the post object array

$post_id = $object['id'];

//return the post meta

return get_post_meta( $post_id );

}

A good reference for using nonces in custom REST endpoints: https://viastudio.com/wordpress-rest-api-secure-ajax-calls-custom-endpoints/

One thing to note from this example is that WordPress suggest passing the nonce via the header and not the request content data. So, below is the better way of passing the nonce from js back to WordPress:

$.ajax( {
    url: site_variables.root + 'wp/v2/posts/1',
    method: 'POST',
    beforeSend: function ( xhr ) {

 // this is "safer" way to send the nonce via ajax rather then
// in a $GET or $POST field.

        xhr.setRequestHeader( 'X-WP-Nonce', site_variables.nonce );
    },
    data:{
        'title' : 'Hello Moon'
    }
} ).done( function ( response ) {
    console.log( response );
} );

$.ajax( {

url: site_variables.root + 'wp/v2/posts/1',

method: 'POST',

beforeSend: function ( xhr ) {

// this is "safer" way to send the nonce via ajax rather then

// in a $GET or $POST field.

xhr.setRequestHeader( 'X-WP-Nonce', site_variables.nonce );

data:{

'title' : 'Hello Moon'

}

} ).done( function ( response ) {

console.log( response );

} );

Online Journal

My online journal about design and development related topics and what I've learned.