Templating a Wordpress Plugin? - wordpress

I have just created a simple Wordpress Plugin which basically gets some data from sources and displays it using a loop.
I want to be able to template this so that users can have a choice in how it displays or even create their own.
Something like Smarty would be fantastic but I can't seem to find a way to do this?
Currently my code is like this:
echo '<div class="row">';
foreach ($results->products as $product) {
echo '<div class="col-md-4 col-xs-12 text-center fiflitem">';
echo '<div class="thumbnail"><img src="' . $product->thumbnail . '" width="125px" height="125px"></div>';
echo '<div class="prodname">'.$product->product_name.'</div>';
echo '<div class="store"><img src="'.$product->merchant_logo.'" alt="'.$product->merchant_name.'"></div>';
if ($product->price_was!='0.00') {
echo '<div class="pricing">£'.$product->price.' (was £'.$product->price_was.')</div>'; }
else {
echo '<div class="pricing">£'.$product->price.'</div>';
}
echo '<div class="buybutton"><a href="' . $product->link . '" target="_blank" class="btn btn-default">More Info</div>';
echo '</div>';
}
echo '</div>';
So as you can see it is going to be quite complicated for somebody to edit, however if it was using something like Smarty (or similar) I could simplify the templates a lot more for users to be able to edit it.
Where would I start trying to get something like this working inside the plugin?

In the end I just installed Smarty as part of the plugin and using that function for templating the plugin.

Related

Custom button appearing on all product pages in Woocommerce

I'm currently using this code with a hook to a specific product but the button seems to be appearing for all other products on my website as well.
add_action('woocommerce_after_add_to_cart_button','additional_single_product_button');
function additional_single_product_button() {
$product_ids = is_single(871);
echo "<br>";
echo "<br>";
echo '<div>';
echo '<a data-type="inline" class="button alt" href="/contact-us/">Pay at Spa # $218 nett</a>';
echo '</div>';}
Here's my website: http://offers.elements.com.sg/
Please advise how I can just add this button for a specific product. Thank you.

How to use safely wordpress $wpdb

I am working on a Wordpress website. I need to display dynamic data from a table of my database and display them in one of my pages.
I used the following code (in my page) to retrieve my data:
global $wpdb;
$result = $wpdb->get_results ( "SELECT fieldA, fieldB, fieldC FROM myTable" );
foreach ( $result as $print ) {
echo '<tr>';
echo '<td align="center">' . $print->fieldA. '</td>';
echo '<td align="center">' . $print->fieldB. '</td>';
echo '<td align="center">' . $print->fieldC . '</td>';
echo '</tr>';
Everything is working properly and I can see the data on my page.
The problem is that if I do a right click on my page and select "View page source" on my brower, then everyone can see my query.
I think this is not very safe. How can I convert my code so no one can see my table name and fields?
Thank you in advance!

Send custom field value to email

I created custom post type named Emails, and added a custom field using advanced custom fields plugin to one post inside the custom post type called email footer, the field is image field that is supposed to show at the bottom of each automatic email going out of the website.
the current code I'm using
function wpcf7ev_verify_email_address2( $wpcf7_form ){
$email_footer = '<html>
<body style="color:#000000;">
<div style="font-size:16px;font-weight:bold;margin-top:20px;">
Regards,
<br/>
$email_footer .= '<img src="http://mysite.col/footer_image.jpg" width="100%" alt=""/>
</div>';
$email_footer .='<div style="display:none;">'.generateRandomString().
'</div></body>
</html>
';
the code is working, it displays the image with this url at the bottom: http://mysite.col/footer_image.jpg
but I don't want hardcoded, I want to be able to modify it with the custom field I created
I looked at ACF documentation and found this, but I don't know how to use it to still show that exact field on custom post type I created:
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
The code you've outlined from the ACF documentation tells you how to get the image from an ACF field using Image (with type array).
If we were to implement this into your function, we'd have to reference the image from the page somewhere. Without knowing how you're calling this there are a couple of ways you could embed it.
The first way, we pass it through to the function called on the page, like so...
wpcf7ev_verify_email_address2(get_field('image'));
and then update your function like so...
function wpcf7ev_verify_email_address2($image, $wpcf7_form)
{
$email_footer = '<div style="font-size:16px;font-weight:bold;margin-top:20px;">Regards,<br/>';
// get the image from the passed in image function.
$email_footer .= '<img src="' . $image['url'] . '" width="100%" alt="' . $image['alt'] . '"/></div>';
$email_footer .='<div style="display:none;">' . generateRandomString() . '</div>';
}
Or, the second way, if you are calling the function to modify an action or something, you'd have to get the image from whichever page ID / options page it is assigned to in your ACVF settings. This would make your function look a little like this:
function wpcf7ev_verify_email_address2($wpcf7_form)
{
// get image acf field from page with id 1
$image = get_field('image', 1);
// or get image from acf field on options page
// $image = get_field('image', 'options');
$email_footer = '<div style="font-size:16px;font-weight:bold;margin-top:20px;">Regards,<br/>';
$email_footer .= '<img src="' . $image['url'] . '" width="100%" alt="' . $image['alt'] . '"/></div>';
$email_footer .='<div style="display:none;">' . generateRandomString() . '</div>';
}
All of the above is presuming that your function is working as intended, with you needing help grabbing the ACF field, and the image is uploaded. You can wrap your declarations of get_field in if statements if required.

WordPress | Using imagehover on Featured Images

I'm not a a big pro-Pro, but I do know my way around in basic scripting/adjusting/editing and stuff when it comes to CMS. Right now, I'm using WordPress for my website. I modified a theme and all is running quite well (it's in construction mode).
However, there's one thing I've been trying to accomplish, but I can't get it to work.
WordPress has this feature called Featured Image. It's an image/thumbnail you can include to an article. What I'm trying to do here, is to turn that Featured Image into a imagehover. So when people move their mouse over the (black and white) image, it turns into another (colored) image.
One of the things I've been able to figure out, is using a WordPress pluging called Multiple Post Thumbnails. It lets you add 2 Featured Images (thumbnails) to a single article. In this case: a black and white image and a colored image.
Now here's the thing; there in fact can be found some sort of a tutorial on how to activate this modification, but I can't get it to work. URL: http://www.scratchinginfo.net/hover-two-featured-images-wordpress-via-multiple-post-thumbnails-plugin/
So my two questions:
Is there a better (easier) way to accomplish this imagehover?
As for the tutorial:
I used copy/paste on all code and added it to my own files/theme. All it gave me was a blanc page. I had to remove and adjust some code from the functions.php code (for instance the name of the theme) to get it to work at all (meaning: to be able to show my page at all):
Tutorial:
if (class_exists('MultiPostThumbnails')) {
new MultiPostThumbnails(
array(
'label' => 'Colored Image',
'id' => 'colored-image',
'post_type' => 'post'
)
);
}
Only shows up anything like this:
if (class_exists('MultiPostThumbnails')) {
new MultiPostThumbnails(
array(
'label' => 'Colored Image',
'id' => 'colored-image',
'post_type' => 'post'
)
);
}
Like I said, I can't get it to work. Adjusting this piece of code leaves me off where I started. Black and white images (Featured Image 1) only.
I'm using this Cosmox theme: http://cosmox.ozythemes.com/. I created a page with a couple of images/thumbnails (which are the Featured Images) of partners (faces) under each other. When you scroll over those images, a textbox with information is revealed. It's basically the same as the WHATS NEW section.
Hopefully there's a simple solution to this one ;)
Thanks so much!
#dingo_d:
foreach( $myposts as $post ) : the_post(); $more = 0;
echo '<li>';
echo ' <div class="item-wrapper">';
echo ' <div>';
if ( has_post_thumbnail() ):
$upload_dir = wp_upload_dir();
$custom = get_post_custom(); $custom = get_post_meta($custom["_thumbnail_id"][0]);
$custom = unserialize($custom['_wp_attachment_metadata'][0]); $upload_folder = dirname($custom['file']);
if(isset($custom['sizes']) && !empty($custom['sizes'])) {
echo '<img src="'. $upload_dir['baseurl'] . '/' . $upload_folder . '/' . $custom['sizes']['portfolio-featured-thumb-460']['file'] . '" width="100%"/>';
}else{
echo '<img src="'. $upload_dir['baseurl'] . '/' . $custom["file"] . '" width="100%"/>';
}
else:
//no image image
echo '<img src="' . OZY_BASE_URL . 'images/no-image310x140.png" width="100%"/>';
endif;
echo ' <div class="hover"></div>';
echo ' </div>';
echo ' <span class="cfnt" align="center">';
the_title();
echo ' </span>';
echo ' </div>';
if($xml->description=='1') echo '<div class="desc"><span class="cfnt">' . get_the_title() . '</span><p>' . strip_tags(get_the_content('','')) . '</p></div>';
echo "</li>";
endforeach;
EDIT 2:
echo '<img src="'. $upload_dir['baseurl'] . '/' . $upload_folder . '/' . $custom['sizes']['portfolio-featured-thumb-460']['file'] . '" width="100%" class="nohover" /><img alt="imagehover" src="URL TO HOVER IMAGE" class="hover" />';
From the code above your output should be something like this (in html)
<li>
<div class="item-wrapper">
<div>
<img src=""/>
<div class="hover"></div>
</div>
<span class="cfnt" align="center"></span>
</div>
<div class="desc"><span class="cfnt"></span><p></p></div>
</li>
Under the image there is an empty div with the class hover that you can use in conjuncture with this effect, to make your image first be black, and then be revealed on hover.

WordPress: output custom post type not displaying

I'm trying to output a custom post type but nothing shows up. The code is very simple - what could I be missing?
<?php
$favorites = new WP_Query(array('post_type' => 'favorites', 'posts_per_page' => 10));
while ($favorites->have_posts()) : $favorites->the_post();
echo '<li><img class="rounded" src="' . bloginfo('template_directory') . the_post_thumbnail(array(101,99)) . '" alt="' . the_title() . '" /></li>';
endwhile;
?>
Have you checked that;
You have definitely registered a post type called favorites (note plural)
The browser is not choking on your markup (your HTML is invalid - for starters, you should wrap list items in a <ul>
The function simple_fields_get_post_value() exists and is working correctly

Resources