Categories
WordPress

How To Access PODS Custom Post Types Using The WP Rest API

Recently I have been working with the WordPress Rest API to use WordPress as a data source. One of the issues that I ran into is when trying to access custom post types created with pods. When trying to access the end point for the custom post type I received the following error:
{"code":"rest_no_route","message":"No route was found matching the URL and request method","data":{"status":404}}

A quick read of the WP Rest API docs will reveal that Custom Post Types don’t have routes by default. But no worries support for WP Rest API can be added to any custom post type.

To add support for the WP Rest API to a custom post type created with PODS you need to log into your WP admin area. From the menu you select Pods Admin > Edit Pods. Edit Pods
Hover over the custom post type you want to access and then choose edit. At this point you need to decide if you want to allow access to the entire custom post type or just specific fields.

Allow access to specific fields

Click to edit the field you want to access using the WP Rest API. On the PODS Field Rest API tab you can choose to allow read access, write access, or both. PODS field Rest Access

Allow access to entire custom post type

On the PODS Rest API tab you can enable Rest API Support for the custom post type. You can check the Show All Fields to or follow the steps above to just allow read access of certain fields. You can also allow all fields to be updated using the Rest API or set the write settings individually for each field.Pods CPT Rest API Support

Access PODS Custom Post Type With WP Rest API

Now you should be able to access the custom post type using something like
https://yourdomain.com/wp-json/wp/v2/quote/
Be mindful that you must change https://yourdomain.com to the site you have the custom post type on. And change quote to the REST Base for your custom post type.

 

 

Categories
WordPress

How To Add Timestamp Links In Your Podcast Show Notes

If you don’t know I have a podcast that I do over at 2DWebsolutions with Kerry Carron. Each month we answer questions that are submitted on our site, via our app, or in the Slack group. From the beginning we added the questions discussed in the show notes. As early as episode two we started to receive feedback from listeners that it would be better if we also add the time stamp for when each question is answered. Even though it takes a lot of time and patience to get the time stamp for each question, Kerry does it each month and adds them to the show notes. At the time we thought that was the best we could do, but..

I was reading the show notes on one of the many podcasts that I listen to when I tried to go to the time stamp they had in the show notes. Do you know how frustrating it is to try to scrub to a specific time stamp?

That got me thinking that there has to be a way to make time stamps in the show notes more useful. Youtube lets you add a time stamp link in your Youtube video description, so I knew it was possible. I looked for a WordPress plugin that would add a time stamp link, but I could not find one that worked without breaking the site. So, what did I do?

I created a WordPress plugin that would add a time stamp link in the show notes on our site. After using for a while I realized that other podcasters can benefit from the plugin. These time stamps can help your listeners find the important parts of the podcast. Time stamps especially help in the cases of long episodes, episodes with segments, or episodes with especially important moments.

Watch the video to see how the Link Timestamp WordPress plugin allows you to add a time stamp link in your podcast show notes.

Powered By S3 Media Maestro

Time stamp links
Automatic Linking – 1:28
Manual linking from the editor – 2:56

I want to point out that it is for the WordPress platform and it will hyperlink to time stamps in Youtube embeds, Vimeo embeds, HTML5 audio players, and HTML5 video players. You don’t have to go to all your past show notes and manually add the time stamp link if you don’t want to. You can just use the automatic links.

Categories
Code Snippets WordPress

WooCommerce Shipping Options Based on Weight

WooCommerce shipping options based on weight can be accomplished by creating a callback function for the woocommerce_cart_shipping_packages filter. The filter hook allows you to make a change to the cart package such as conditional shipping options based on shipping class, location, or weight.

To get the weight of all the products in the shopping cart you can use the cart_contents_weight method of the WooCommerce Cart class. The code below will allow only UPS shipping method if the weight is great than 4 pounds. If the weight is below 4 pounds USPS will be the only shipping options. The shipping options can be changed on lines 15 and 30. The weight condition can be changed on line 13.

/** 
 * Shipping based on cart contents weight
 */
add_filter( 'woocommerce_cart_shipping_packages', 'ps_woocommerce_cart_shipping_packages_by_weight' );

function ps_woocommerce_cart_shipping_packages_by_weight( $packages ) {

    $packages = array();
 
  
    $cart_items = WC()->cart->get_cart(); 
   
   if( WC()->cart->cart_contents_weight > 4){
        $packages[] = array(
            'ship_via' => array( 'ups'  ), /*Shipping methods that are available for order over 4 lbs */
            'contents' => $cart_items,
            'contents_cost' => array_sum( wp_list_pluck( $cart_items, 'line_total' ) ),
            'applied_coupons' => WC()->cart->applied_coupons,
            'destination' => array(
                'country' => WC()->customer->get_shipping_country(),
                'state' => WC()->customer->get_shipping_state(),
                'postcode' => WC()->customer->get_shipping_postcode(),
                'city' => WC()->customer->get_shipping_city(),
                'address' => WC()->customer->get_shipping_address(),
                'address_2' => WC()->customer->get_shipping_address_2()
            )
        );
    }else{
       $packages[] = array(
            'ship_via' => array('usps'), /*Shipping methods that are available for order under 4 lbs */
            'contents' => $cart_items,
            'contents_cost' => array_sum( wp_list_pluck( $cart_items, 'line_total' ) ),
            'applied_coupons' => WC()->cart->applied_coupons,
            'destination' => array(
                'country' => WC()->customer->get_shipping_country(),
                'state' => WC()->customer->get_shipping_state(),
                'postcode' => WC()->customer->get_shipping_postcode(),
                'city' => WC()->customer->get_shipping_city(),
                'address' => WC()->customer->get_shipping_address(),
                'address_2' => WC()->customer->get_shipping_address_2()
            )
        ); 
    }
      
    return $packages;
}
Categories
Photos

Figure Out What You’re Good At

Figure out what you’re really, really, really good at, love it, and stick with it…

 

 

Categories
Code Snippets jQuery WordPress

Mobile Friendly Menu

In this tutorial I explain how to create a mobile friendly menu for the iThemes Builder theme. By default the menu will wrap on smaller screens. When the menu wraps it is not very mobile friendly.

The menu wraps on small screens.
The menu wraps on screens.

In your child theme directory create a new file for some jQuery. You can call it what you want but I am going to call it mobile_script.js. The code in this file should not run until the page loads. The script needs to be enqueued in the functions.php file.

Add Mobile Menu Functionality
After the page loads add a class to the menu and to the navigation module. The Menu label is added before the module navigation. If you click on ≡ Menu the menu items are shown or hidden. The sub-menu items are hidden until the parent item is tapped.

jQuery(document).ready(function() {

	jQuery(".builder-module-navigation .menu").addClass("mobile-menu-hidden");
	jQuery(".builder-module-navigation").addClass("mobile");
	
	jQuery(".mobile-menu-hidden").before('<div class="mobile-menu">≡ Menu</div>');
	
	jQuery(".mobile-menu").click(function(){
		jQuery(this).next().slideToggle();
	});


	jQuery(".mobile.builder-module-navigation li:has(ul)").click(function(){
		jQuery(".mobile.builder-module-navigation li ul").hide('fast');
		jQuery("ul",this).toggle();
	});

});

Style The Mobile Menu
After you add the jQuery file ≡ Menu will show above the navigation on a desktop. So in the style.css file it is hidden or told not to display.

.mobile-menu{
display: none;
}

Then the mobile navigation style is added to the main style sheet, responsive style sheet, or mobile style sheet that is available with most Builder child themes.


@media screen and (max-width:767px) { 
/*********************************************
	Mobile Menu
*********************************************/
.mobile-menu {
  color: #4b9eec;
  width: auto;
  font-weight: 700;
  font-size: 1.5rem;
  cursor: pointer;
  display: block;
  padding: .65em 0;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  transition: all .2s ease-in;
  text-align: center;
}

.mobile.builder-module-navigation .mobile-menu-hidden {
	display: none;
	margin-bottom: 1em;
}

.mobile .builder-module-navigation-menu-wrapper {
	display: block;
}
.builder-module-navigation-background-wrapper {
	padding: 0;
}
.builder-module-outer-wrapper .mobile.builder-module-navigation {
	padding: 0;
}
.mobile.builder-module-navigation {
	display: block;
	line-height: 1;
	width: 100%;
}
.mobile.builder-module-navigation ul.menu {
	border-bottom: 0;
}
.mobile.builder-module-navigation ul.menu:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.mobile.builder-module-navigation ul {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
.mobile.builder-module-navigation ul * {
	margin: 0;
}
.mobile.builder-module-navigation li {
	padding: 0;
	display: block;
	width: 100%;
	background-color: rgba(255, 255, 255,.8);
}

.mobile.builder-module-navigation li a,
.mobile.builder-module-navigation .current_page_item li a,
.mobile.builder-module-navigation .current-cat li a,
.mobile.builder-module-navigation .current-menu-item li a {
	color: #333333;
	font-size: 1em;
	font-weight: 600;
	text-decoration: none;
	padding: .5em 1em;
	border: 0;
	border-bottom: 1px solid #C9C9C9;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}
.mobile.builder-module-navigation .current_page_item > a,
.mobile.builder-module-navigation .current-cat > a,
.mobile.builder-module-navigation .current-menu-item > a {
	color: #252525;
	background: #F5F5F5;
}
.mobile.builder-module-navigation li a:hover,
.mobile.builder-module-navigation .current_page_item li a:hover,
.mobile.builder-module-navigation .current-cat li a li a:hover,
.mobile.builder-module-navigation .current-menu-item li a:hover {
	color: #252525;
	background: #F5F5F5;
}
/* Second Level */
.mobile.builder-module-navigation li ul {
	background: #FFFFFF;
	border: 0;
	width: 100%;
	left: 0;
	position: relative;
	display: none; 
}

.mobile.builder-module-navigation li li {
	border: 0;
	width: 100%;
}
.mobile.builder-module-navigation li li a,
.mobile.builder-module-navigation .current_page_item li a,
.mobile.builder-module-navigation .current-cat li a,
.mobile.builder-module-navigation .current-menu-item li a {
	float: none;
	font-size: 1em;
	line-height: 1;
	margin: 0;
	padding-left: 2em;
}
.mobile.builder-module-navigation li li a:hover,
.mobile.builder-module-navigation li li a.sfhover {

}
.mobile.builder-module-navigation li ul ul {
	margin: 0;
}
.mobile.builder-module-navigation li:hover ul,
.mobile.builder-module-navigation li li:hover ul,
.mobile.builder-module-navigation li li li:hover ul,
.mobile.builder-module-navigation li li li li:hover ul,
.mobile.builder-module-navigation li li li li li:hover ul,
.mobile.builder-module-navigation li.sfhover ul,
.mobile.builder-module-navigation li li.sfhover ul,
.mobile.builder-module-navigation li li li.sfhover ul,
.mobile.builder-module-navigation li li li li.sfhover ul,
.mobile.builder-module-navigation li li li li li.sfhover ul {
	left: 0;
}

.builder-module-navigation .builder-module-sidebar-outer-wrapper {
  display: none;
}
}

Final Result

Example Mobile Friendly Menu