WordPress - Overwriting a template plugin Shortcode - wordpress

I'm new to php and wordpress.
When I edit an icon box from the theme in the admin panel, i have a few fields, like "title" and "content". The title is inside <h4> </h4> and content is inside <p>
</p>
I need to add another <p style='iconbox_price'></p> after the content, so i can edit it in the admin panel.
This is the code for the iconbox. How can i add this to it, so it would work out.
<?php
function easyweb_webnus_iconbox( $attributes, $content = null ) {
extract(shortcode_atts(array(
"type"=>'',
'icon_title'=>'',
'icon_link_url'=>'',
'icon_link_text'=>'',
"icon_name"=>'',
"iconbox_content"=>'',
"icon_size"=>'',
"icon_color"=>'',
"title_color"=>'',
"content_color"=>'',
"link_color"=>'',
"icon_image"=>'',
"featured"=>'',
"border_left"=>'',
"border_right"=>'',
), $attributes));
ob_start();
$type = ( $type == 0 ) ? '' : $type ;
$iconbox_style = $type17_start_wrap = $type17_end_wrap = '';
if ( $type==17 ) {
$iconbox_style = ( !empty($icon_color) ) ? ' style="color: ' . esc_attr($icon_color) . '"' : '' ;
$type17_start_wrap = '<div class="icon-wrap" style="background-color:' . esc_attr($icon_color) . '">';
$type17_end_wrap = '</div>';
}
$iconbox22_class = '';
if ( $type == 22 ) {
$iconbox22_class .= $featured ? ' ' . $featured : '';
$iconbox22_class .= $border_left ? ' ' . $border_left : '';
$iconbox22_class .= $border_right ? ' ' . $border_right : '';
}
echo '<article class="icon-box' . $type . $iconbox22_class . '" ' . $iconbox_style . '>';
if(!empty($icon_name) && $icon_name != 'none') :
if(!empty($icon_link_url))
echo '' . $type17_start_wrap . '' . do_shortcode( "[icon name='$icon_name' size='$icon_size' color='$icon_color']" ).'' . $type17_end_wrap . '';
else
echo $type17_start_wrap . do_shortcode( "[icon name='$icon_name' size='$icon_size' color='$icon_color']" ) . $type17_end_wrap;
elseif(!empty($icon_image)) :
if(is_numeric($icon_image)){
$icon_image = wp_get_attachment_url( $icon_image );
}
if(!empty($icon_link_url))
echo "<a href='$icon_link_url'>" . '<img src="'.$icon_image.'" alt="" />' . '</a>' ;
else
echo '<img src="'.$icon_image.'" alt="" />';
endif;
$title_style = !empty($title_color)?' style="color:'.$title_color.'"':'';
echo '<h4'.$title_style.'>' . $icon_title . '</h4>';
$content_style = !empty($content_color)?' style="color:'.$content_color.'"':'';
echo '<p'.$content_style.'>'.$iconbox_content .'</p>' ;
$link_style = !empty($link_color)?' style="color:'.$link_color.'"':'';
echo (!empty($icon_link_url) && (!empty($icon_link_text)) )?"<a".$link_style." class=\"magicmore\" href=\"{$icon_link_url}\">{$icon_link_text}</a>":'';
echo '</article>';
$out = ob_get_contents();
ob_end_clean();
$out = str_replace('<p></p>','',$out);
return $out;
}
add_shortcode('iconbox', 'easyweb_webnus_iconbox');
In html this is the code, that is generated:
<article class="icon-box14">
<a href="/razrabotka-saitov/">
<i class="sl-screen-desktop" style=" font-size:42px;"></i>
</a>
<h4 style="height: 22px;">Title</h4>
<p style="height: 116px;">Content<br></p>
<a class="magicmore" href="#">More</a>
</article>

You see the line there:
echo '<p'.$content_style.'>'.$iconbox_content .'</p>' ;
You can add your custom paragraph to that line:
echo '<p'.$content_style.'>'.$iconbox_content .'</p>
<p style='iconbox_price'></p>' ;

I found the solution in my case. Maybe it will help somebody else. I had to edit two files. In my case this is where the first file was located.
wp-content/plugins/'theme'-shortcodes/shortcodes/iconbox.php
I tried to look for where comes the variable $iconbox_content and found it in getting extracted in the code above from an array at this point:
extract(shortcode_atts(array(
"type"=>'',
'icon_title'=>'',
'icon_link_url'=>'',
'icon_link_text'=>'',
"icon_name"=>'',
"iconbox_content"=>'',
"icon_size"=>'',
"icon_color"=>'',
"title_color"=>'',
"content_color"=>'',
"link_color"=>'',
"icon_image"=>'',
"featured"=>'',
"border_left"=>'',
"border_right"=>'',
), $attributes));
So i searched through all the wordpress directory files, because i did not even have an idea where can i find it.
And found it in the themes => 'my theme' => 'my theme' => visualcomposer => shortcodes directory as 03-iconbox.php
I had there different arrays such as this:
array(
"type"=>'textarea',
"heading"=>esc_html__('Content', 'ew'),
"param_name"=> "iconbox_content",
"value"=>"",
"description" => esc_html__( "IconBox Content Goes Here", 'ew')
),
So i guess, the other half of what i did is very logical already, but here it is anyway:
I added an array in this file:
array(
"type"=>'textarea',
"heading"=>esc_html__('Price', 'ew'),
"param_name"=> "iconbox_price",
"value"=>"",
"description" => esc_html__( "Price goes here", 'ew')
),
And in the first file:
To extract "iconbox_price" =>'',
And lower: echo '<p class="iconbox_price">'.$iconbox_price .'</p>' ;
Wish that this helps someone!

Related

Which selector would I use in CSS to make a Buddypress users profile image round?

I am using the BuddyPress, woo-commerce and WC vendors plugins to build my latest WordPress project.
For each of my vendors I wanted their Buddypress profile pictures displayed on each of their products listed for sale so I added the following code to my functions.php file:
function change_wcvendors_cart_sold_by_meta_template( $meta_html, $product_id, $vendor_id ) {
if( ! $vendor_id ) {
return $meta_html;
}
if( ! class_exists( 'WCV_Vendors' ) || ! function_exists( 'bbp_get_user_profile_url' ) ) {
return $meta_html;
}
$profile_url = bbp_get_user_profile_url( $vendor_id );
$profile_name = WCV_Vendors::is_vendor( $vendor_id ) ? WCV_Vendors::get_vendor_sold_by( $vendor_id ) : bp_core_get_user_displayname( $vendor_id );
$profile_image = bp_core_fetch_avatar( 'html=false&item_id=' . $vendor_id );
$meta_html = '%1$s %2$s <a href="' . $profile_url . '" class="no-lightbox vendor-bp-link">
<img src="' . $profile_image . '" class="avatar user-' . $vendor_id . '-avatar avatar-50 photo" alt="Profile picture" width="45" height="45">
' . $profile_name . '
</a>';
return $meta_html;
}
...and it worked and is now showing the user's BP profile image next to their username, next to the "sold by" text, please see here:
https://prnt.sc/s9paz8
But I was just wondering if it was possible to also make the image round using CSS? I have tried using the following code in the custom CSS section to make the image circle but it did not work so I think I am using the wrong selector:
. $profile_image {
border-radius: 50px;
}
Could anybody advise what the correct selector would be to use for selecting the BP profile image, this is how it looks when I inspect element using google chrome:
https://prnt.sc/s9pf8u
https://prnt.sc/s9pgat
Thank you in advance,
you can use the CSS property border-radius to make your images round. I've found this js fiddle for you take a look.
http://jsfiddle.net/2QyY3/2/
Edit: Here's the demo code from your question:
function change_wcvendors_cart_sold_by_meta_template( $meta_html, $product_id, $vendor_id ) {
if( ! $vendor_id ) {
return $meta_html;
}
if( ! class_exists( 'WCV_Vendors' ) || ! function_exists( 'bbp_get_user_profile_url' ) ) {
return $meta_html;
}
$profile_url = bbp_get_user_profile_url( $vendor_id );
$profile_name = WCV_Vendors::is_vendor( $vendor_id ) ? WCV_Vendors::get_vendor_sold_by( $vendor_id ) : bp_core_get_user_displayname( $vendor_id );
$profile_image = bp_core_fetch_avatar( 'html=false&item_id=' . $vendor_id );
$meta_html = '%1$s %2$s <a href="' . $profile_url . '" class="no-lightbox vendor-bp-link">
<img src="' . $profile_image . '" class="round-image avatar user-' . $vendor_id . '-avatar avatar-50 photo" alt="Profile picture" width="45" height="45">
' . $profile_name . '
</a>';
return $meta_html;
}
CSS:
.round-image{
border-radius: 50%;
}

How to apply human_time to get_the_modified_time?

I am using this variable and it works correctly:
echo '<i class="fa fa-clock"></i> ' . str_replace('', '', human_time_diff( get_the_time('G'), current_time('timestamp') ) . '');
But now I need to make it work by changing get_the_time to get_the_modified_time and it doesn't work, it shows me a result from 50 years ago
Can anyone help me please?
I got what I needed.
I add it in this answer in case someone needs it:
<?php
$lastmodified = get_the_modified_time('U');
$posted = get_the_time('U');
if ($lastmodified > $posted) {
echo "Posted: " . human_time_diff($lastmodified,current_time('U')) . "";
} else {
echo 'Edited: ' . str_replace('', '', human_time_diff( get_the_time('G'), current_time('timestamp') ) . '');
}
?>

After image is deleted WordPress visual editor doesn't remove additional code that I added to default img html output via image_send_to_editor filter

I'm trying to replace the default image html output in WordPress editor with responsive images picture tag.
I created a custom function that replaces the default img html and hooked it into editor via image_send_to_editor filter:
function mystic_responsive_insert_image($html, $id, $caption, $title, $align, $url) {
$image_url = wp_get_attachment_url($id);
$attachment_id = attachment_url_to_postid( $image_url );
$alt_text = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
if ( !$alt_text ) { $alt_text = esc_html( get_the_title($post_id) ); }
$thumb_xl_hpt1 = wp_get_attachment_image_src($attachment_id, 'xl-thumb-hpt1');
$thumb_lg_hpt1 = wp_get_attachment_image_src($attachment_id, 'lg-thumb-hpt1');
$thumb_md_hpt1 = wp_get_attachment_image_src($attachment_id, 'md-thumb-hpt1');
$thumb_sm_hpt1 = wp_get_attachment_image_src($attachment_id, 'sm-thumb-hpt1');
$thumb_xs_hpt1 = wp_get_attachment_image_src($attachment_id, 'xs-thumb-hpt1');
$thumb_xl_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'xl-thumb-hpt1-2x');
$thumb_lg_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'lg-thumb-hpt1-2x');
$thumb_md_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'md-thumb-hpt1-2x');
$thumb_sm_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'sm-thumb-hpt1-2x');
$thumb_xs_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'xs-thumb-hpt1-2x');
$thumb_data = array(
'thumb_xl_hpt1_2x' => $thumb_xl_hpt1_2x[0],
'thumb_large_hpt1_2x' => $thumb_lg_hpt1_2x[0],
'thumb_medium_hpt1_2x' => $thumb_md_hpt1_2x[0],
'thumb_small_hpt1_2x' => $thumb_sm_hpt1_2x[0],
'thumb_xs_hpt1_2x' => $thumb_xs_hpt1_2x[0],
'thumb_xl_hpt1' => $thumb_xl_hpt1[0],
'thumb_large_hpt1' => $thumb_lg_hpt1[0],
'thumb_medium_hpt1' => $thumb_md_hpt1[0],
'thumb_small_hpt1' => $thumb_sm_hpt1[0],
'thumb_xs_hpt1' => $thumb_xs_hpt1[0],
'thumb_alt' => $alt_text
);
$html = '<picture>';
$html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
$html .= '<source srcset="' . $thumb_data['thumb_xl_hpt1'] . ', ' . $thumb_data['thumb_xl_hpt1_2x'] . ' 2x" media="(min-width: 1200px)">';
$html .= '<source srcset="' . $thumb_data['thumb_large_hpt1'] . ', ' . $thumb_data['thumb_large_hpt1_2x'] . ' 2x" media="(min-width: 992px)">';
$html .= '<source srcset="' . $thumb_data['thumb_medium_hpt1'] . ', ' . $thumb_data['thumb_medium_hpt1_2x'] . ' 2x" media="(min-width: 768px)">';
$html .= '<source srcset="' . $thumb_data['thumb_small_hpt1'] . ', ' . $thumb_data['thumb_small_hpt1_2x'] . ' 2x" media="(min-width: 576px)">';
$html .= '<!--[if IE 9]></video><![endif]-->';
$html .= '<img srcset="' . $thumb_data['thumb_xs_hpt1'] . ', ' . $thumb_data['thumb_xs_hpt1_2x'] . ' 2x" alt="' . $thumb_data['thumb_alt'] . '">';
$html .= '</picture>';
return $html;
}
add_filter( 'image_send_to_editor', 'mystic_responsive_insert_image', 10, 9 );
I then created a test post and inserted the image into it to see if my code works. It does. But then after I deleted the image and inserted another one, inside the chrome inspector I noticed that the additional html code from the deleted image is still present on the page. Everything except the img tag that was placed inside the picture tag is still there. Deleting the image from the editor removed only the img tag.
I'm making this for someone who is not familiar with html and I'm certain that they will not be able to delete the leftover code from the text editor if they ever edit the images in their posts so I need to figure out why is this happening and how can I fix it?
This is because while removing image, visual editor only removes image in img tag and rest of the HTML is still there. On updating, it updates the HTML in database.
Also, It appends previous HTML with new HTML.
You just have to filter data before it is saved. Have to remove 'picture' tag in which there is no image. You can use 'wp_insert_post_data' hook for this.

Use WP Shortcode as an attribute in another Shortcode

I'm trying to use the Advanced Custom Fields plugin shortcode as a attribute in another shortcode.
The company my theme was made by is not offering custom support at this time.
The original shortcode is made list this
public function plan( $atts, $content )
{
$html = array();
extract( shortcode_atts( array(
'price' => '',
'price_info' => '',
'type' => '',
'delay' => '',
'class' => '',
), $atts ) );
$html[] = '<div class="' . ( $class ) . '">';
$html[] = '<div class="plan has-animation" data-delay="' . ( (int)$delay ) . '">';
$html[] = '<div class="plan-container">';
$html[] = '<ins class="plan-price">' .( $price ) . '</ins>';
$html[] = '<span class="price-info">' . ( $price_info ) . '</span>';
$html[] = '<h2 class="second_color">' . ( $type ) . '</h2>';
$html[] = do_shortcode( $content );
$html[] = '</div>';
$html[] = '</div>';
$html[] = '</div>';
return implode("\n", $html);
}
And when i call the shortcode [pt_plan price="$12.99" price_info="per month" type="Standard" delay="400" class="col-lg-4 col-md-4 col-sm-4"] I want to make the price attribute allow a shortcode as a value to take advantage of Advanced Custom Fields.
However, if I place [acf field='session_price_1'] as the attribute value, like this, [pt_plan price="[acf field='session_price_1']" price_info="per month" type="Standard" delay="400" class="col-lg-4 col-md-4 col-sm-4"] it comes out as if that was a string and breaks the original pt_plan shortcode.
Could someone point me in the right direction? I thought it would be to add do_shortcode() to the $price variable in the plan shortcode, but it did not work.
Hope all this makes sense and thanks in advance!!
I actually got it to work.
Because the way shortcodes work in WP, the ending ] of the nested shortcode was closing off the original shortcode, screwing everything up.
To get around this, I did the following:
$html[] = '<div class="plan-price">'.do_shortcode('['.$price.']').'</div>';
and
[pt_plan price="acf field='session_price_1'" price_info="per month" type="Standard" delay="400" class="col-lg-4 col-md-4 col-sm-4"]
and that worked great!
Basically I just typed the text of the shortcode and ' instead of " into the attribute, concatenated the [ and ] in when it prints the attribute value into the , and used do_shortcode() to run the shortcode.

Problems Adding Woocommerce Bookings info into the Description of Google Calendar

I have synched Woocommerce Bookings with Google Calendar so that employees (with access to a shared Google Calendar) can see instantly when a customer books a trip.
I'm trying to get product add-ons to show up in the description as well. So far the only thing showing up are resources and # of persons. The following code kicks back an error:
Fatal error: Call to a member function get_order_item_totals() on a non-object in /home/content/12/10265512/html/wp-content/plugins/woocommerce-bookings/includes/integrations/class-wc-bookings-google-calendar-integration.php on line 454
I'm just learning my way around PHP out of necessity to get this system to fit our needs. Any help or suggestions would be / are greatly appreciated!
public function sync_booking( $booking_id ) {
$event_id = get_post_meta( $booking_id, '_wc_bookings_gcalendar_event_id', true );
$booking = get_wc_booking( $booking_id );
$api_url = $this->calendars_uri . $this->calendar_id . '/events';
$access_token = $this->get_access_token();
$timezone = wc_booking_get_timezone_string();
$product = $booking->get_product();
$summary = '#' . $booking->id . ' - ' . $product->get_title();
$description = '';
// Add resources in description
if ( $resource = $booking->get_resource() ) {
$description .= __( 'Resource #', 'woocommerce-bookings' ) . $resource->ID . ' - ' . $resource->post_title;
}
// Add ProductAdd on in description testing this
if ( $totals = $order->get_order_item_totals() ) {
$i = 0;
foreach ( $totals as $total ) {
$i++;
if ( $i == 1 ) {
$description .= sprintf($total['label']) . PHP_EOL;
$description .= sprintf($total['value']) . PHP_EOL;
}
}
}
// Add persons in description
if ( $booking->has_persons() ) {
$description .= ( '' != $description ) ? PHP_EOL . PHP_EOL : '';
foreach ( $booking->get_persons() as $id => $qty ) {
if ( 0 === $qty ) {
continue;
}
$person_type = ( 0 < $id ) ? get_the_title( $id ) : __( 'Person(s)', 'woocommerce-bookings' );
$description .= sprintf( __( '%s: %d', 'woocommerce-bookings'), $person_type, $qty ) . PHP_EOL;
$description .= wp_kses_post( $product->post->post_excerpt, array() ) . PHP_EOL;
$description .= sprintf("ADDITIONAL NOTES:") . PHP_EOL;
$description .= sprintf("Hey John passing static notes to Calender test") . PHP_EOL;
}
}
Edit
I tried adding Billing Email and Billing Phone and still cannot get it right. All I see in Google Calendar is Email followed by blank space.
$description .= sprintf( __('Email: %s', 'woocommerce'), $order->billing_email ) . PHP_EOL;
$description .= sprintf( __('Phone: %s', 'woocommerce'), $order->billing_phone ) . PHP_EOL;
the wp_kses_post method in the code up above does return the short description from WooCommerce and places into the Google Calendar description so I will try that next.
I'm still pluggin away at this and after looking at some other websites tried the following
$description .= sprintf( __('%s', 'woocommerce'), $order->email_order_items_table( true, false, true )) . PHP_EOL;
Which is used to pass the same information on in an email to the site admin.
<?php echo $order->email_order_items_table( true, false, true ); ?>
I'm still getting a Fatal Error call to a member function on a non-object. I contacted support at WooCommerce a few days ago. I'll report back here incase someon else is trying to do the same thing as me.
I was able to solve the issue by pulling all order info from the email_orders_table. I'm posting my answer in case someone else is attempting to do the same thing. Customer Support at WooCommerce was unable to help stating it was outside of their support policy and considered custom code.
// Add First Name of Guest
$description .= sprintf( __( 'NAME: %s', 'woocommerce-bookings' ), $booking->get_order()->billing_first_name ) . PHP_EOL;
// Add their email address
$description .= sprintf( __('EMAIL: %s', 'woocommerce-bookings'), $booking->get_order()->billing_email ) . PHP_EOL;
// Add their Phone Number
$description .= sprintf( __('PHONE: %s', 'woocommerce-bookings'), $booking->get_order()->billing_phone ) . PHP_EOL;
// Purchase Notes and WooCommerce Product Add Ons
$description .= sprintf("ADDITIONAL NOTES:") . PHP_EOL;
$description .= sprintf ( __('%s', 'woocommerce-bookings'), strip_tags($order->email_order_items_table( $order->is_download_permitted(), true, true ))) . PHP_EOL ;
This works really well after stripping the HTML tags and all the Guest information is shown in a Private Google Calendar for the entire Staff to Reference. Looking back I certainly worked around in a circle. I had forgotten.
do_action( 'woocommerce_email_after_order_table', $order, true, false );

Resources