Wordpress: Shortcodes - widget

I have the following shortcode. What I would like to do is turn this shortcode into a sidebar area so that I can run a decent contact widget. I have googled and tried a few tutorials but I cannot get it working.
Index.php
<?php
$classes = '';
if (strtolower($menuItem->title) == $precision_contact_page) {
?>
<div id="<?php echo strtolower($menuItem->title); ?>scroller">
<?php
$page_data = get_page($menuItem->page_id);
echo do_shortcode($page_data->post_content);
?>
Functions.php:
//contactform shortcode
function contactform_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
'class' => 'content'
), $atts ) );
$returncontent = '<div class="' . esc_attr($class) . '">';
$returncontent .= 'ContactInformation
<h5>Get In Touch</h5><div id="contactform">
<div id="response"></div>
<form id="precision-contact-form" method="POST" action="" class="form">
<div id="main">
<p class="name">
<input type="text" name="uname" id="uname" />
<label for="uname" class="overlabel">Name</label>
</p>
<p class="email">
<input type="text" name="uemail" id="uemail" />
<label for="uemail" class="overlabel">E-mail</label>
</p>
<p class="text">
<textarea name="ucomments" id="ucomments" ></textarea>
</p>
<p class="submit">
<button type="submit" name="submit" id="submit" class="graybutton">Send Email</button>
</p>
</div><!--end main-->
</form>
</div><!--end contact form-->';
$returncontent .= '</div>';
return $returncontent;
}
add_shortcode('contactform', 'contactform_shortcode');
?>

Past this where you want in side bar
<?php echo do_shortcode('[contactform']'); ?>

If you want your shortcode to work in the side bar then you can do the following.
in functions.php add the following
add_filter('widget_text', 'do_shortcode');
This will run all your text widget's content through the *do_shortcode* function.
You can now add a new text widget to your sidebar and use your shortcode inside it, just as if you were in the post edit screen.
[contactform]

Related

Button next to my entry always shows below the entry

I have a blog I am building with entries. I have a form with hidden variables to submit the entryID and other data to "delete" the post. The button always shows below the entry, instead of beside it.
I have tried using CSS Clear, and putting everything in a single <p> line to see if that helps. I feel like the issue is that there is a form with hidden variables, but I'm not sure how to fix this.
<div id="subformposts">
<?php echo $subentry['Body']; ?>
<?php echo $subentry['CreateDate']; ?> - <?php echo $subentry['UserName']; ?><br />
<!-- Determine whether to show the delete button -->
<form action="Delete_entry.php" method="post" id="Deletesub<?php echo $subentry['EntryID'];?>" onsubmit="return confirmdelete('Deletesub<?php echo $subentry['EntryID'];?>')">
<input type="hidden" readonly="true" name="EntryID" value="<?php echo $subentry['EntryID']; ?>" />
<input type="hidden" readonly="true" name="UserID" value="<?php echo $subentry['UserID']; ?>" />
<?php if ($userid == 1 || $userid == $res['UserID']) { ?>
<input type="image" src="redx.png" alt="Delete Post" id="btnDelete" value="Delete Post" />
<?php } ?>
</form>
</div>
I want to see the button floating to the right of my entry, (or to the left at this point.) If I could have it tucked into the div that would be great.
You can use display: inline-flex on subformposts.
Like this one :
<div id="subformposts" style="display: inline-flex;">
<?php echo $subentry['Body']; ?>
<?php echo $subentry['CreateDate']; ?> - <?php echo $subentry['UserName']; ?><br />
<!-- Determine whether to show the delete button -->
<form action="Delete_entry.php" method="post" id="Deletesub<?php echo
$subentry['EntryID'];?>" onsubmit="return confirmdelete('Deletesub<?php echo $subentry['EntryID'];?>')">
<input type="hidden" readonly="true" name="EntryID" value="<?php echo $subentry['EntryID']; ?>" />
<input type="hidden" readonly="true" name="UserID" value="<?php echo $subentry['UserID']; ?>" />
<?php if ($userid == 1 || $userid == $res['UserID']) { ?>
<input type="image" src="redx.png" alt="Delete Post" id="btnDelete" value="Delete Post" />
<?php } ?>
</form>
</div>
Or you can keep both in two different div and put display:inline-block on both of those div. Like this .
<div id="subformposts" style="display: inline-block;">
<?php echo $subentry['Body']; ?>
<?php echo $subentry['CreateDate']; ?> - <?php echo $subentry['UserName']; ?><br />
</div>
<div style="display: inline-block;">
<!-- Determine whether to show the delete button -->
<form action="Delete_entry.php" method="post" id="Deletesub<?php echo
$subentry['EntryID'];?>" onsubmit="return confirmdelete('Deletesub<?php echo $subentry['EntryID'];?>')">
<input type="hidden" readonly="true" name="EntryID" value="<?php echo
$subentry['EntryID']; ?>" />
<input type="hidden" readonly="true" name="UserID" value="<?php echo
$subentry['UserID']; ?>" />
<?php if ($userid == 1 || $userid == $res['UserID']) { ?>
<input type="image" src="redx.png" alt="Delete Post" id="btnDelete" value="Delete Post" />
<?php } ?>
</form>
</div>

WordPress Custom Repeater Controller For Customizer

I want to create custom repeater controller for theme, for this i tried but i am stuck with issue and i am unable to save any changes to my repeater section, any help is highly appreciated, here is link to my code
The code for customizer class is
if (class_exists('WP_Customize_Control')):
class Test_Testimonial_Control extends WP_Customize_Control {
public $type = 'textarea';
public function render_content() {
?>
<div class="test-rep-section-wrap">
<div class="test-rep-section">
<h3 class="test-title"><?php echo esc_html( $this->label ); ?></h3>
<div class="test-contents">
<input type="text" name="testimonial" placeholder="Image URL" id="img-link-testimonial">
Upload Image
<span><?php _e('Description Text','text-domain'); ?></span>
<textarea rows="2" style="width:100%;"><?php echo esc_textarea( $this->value() ); ?></textarea>
<input type="text" name="cl_name" placeholder="Name">
</div>
Add More
<input <?php $this->link(); ?> type="hidden" value="<?php echo esc_attr($this->value()); ?>"/>
</div>
</div>
<?php
}
}
endif;
jquery code is
$('.test-contents').hide();
$('body').on('click', '.test-title', function(){
$('.test-contents').slideToggle();
});
$('body').on('click', '.new_section', function(){
var tCount = 0;
$('.test-rep-section-wrap').append('<div class="test-rep-section"><h3 class="test-title">Testimonial Options</h3><div class="test-contents" style="display: block;"><input type="text" name="testimonial" placeholder="Image URL" id="img-link-testimonial">Upload Image<span>Description Text</span><textarea rows="5" style="width:100%;"></textarea><input type="text" name="cl_name" placeholder="Name"></div>Add More<input data-customize-setting-link="ripple_pro_testimonial_repeater" type="hidden" value=""><div class="delete-test-feature">Delete Feature</div></div>');
});
$(document).on('click', '.delete-test-feature > a', function(){
$(this).parents('.test-rep-section').remove();
});

Bootstrap Style broken with autocomplete widget

I am working in a project with codeigniter and bootstrap, I made an autocomplete system, but the css looks broken like this
https://gyazo.com/4af7ae2bbdfd5547233d192b80ef947e
There is no custom style, only the bootstrap min css, here is my view html code, any help to look like it should be would be appreciated
<h2>Welcome to Crossover Laboratory</h2>
<div class="row">
<div class="col-md-1">
</div>
<div class='col-md-10 text-center'>
<h3>Patients</h3>
<?php echo $error2; ?>
<?php
$attributes2 = array(
"class"=>"form-horizontal",
"id" => "LoginForm2",
"name" => "LoginForm2",
"method" => "post"
);
echo form_open("laboratory/patients", $attributes2); ?>
<div class="form-group">
<input type="text" name="username_patients" id="username_patients" class="ui-autocomplete-input" value="" required placeholder="Name" />
<p id="patient_name"></p>
</div>
<div class="form-group">
<input type="password" name="password_patients" id="password_patients" value="" required placeholder="Code"/>
</div>
<div class="form-group">
<?php echo form_submit("Login2","Login"); ?>
</div>
<?php echo form_close(); ?>
</div>
<div class="col-md-1">
</div>
</div>
<script type="text/javascript">
$(document).ready(function($) {
$("#username_patients").autocomplete({
source: '<?php echo site_url('laboratory/autocomplete'); ?>',
minlenght: 2,
html: true,
open: function(event, ui)
{
$(".ui-autocomplete").css("z-index",1000);
}
});
});
</script>
I think you have missed the jQueryUI CSS references. Add the below CSS in your application <head> section and try..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

How can I use a Wordpress Widget to fill in blanks in HTML

Building my first WP widget. (below) Need to provide the client access to input Thumbnail Link, Youtube Link, Project Title and Description. The Widget is storing and retrieving data but I'm stumped on how to send that data to the HTML fields.
<?php
/*
Plugin Name: Red Viking Video
Plugin URI: http://digital-persona.com
Description: Bla Bla Bla
Version: 1.0
Author: Dan
Author URI: Bio Page
Licence: none
*/
class WP_red_viking_video extends WP_Widget {
function __construct() {
parent::__construct(false, $name = __('Red Viking Video'));
}
function form($instance) {
$thumbnail = esc_textarea( $instance['thumbnail'] );
$you_tube_link = esc_textarea( $instance['you_tube_link'] );
$project_title = esc_textarea( $instance['project_title'] );
$project_details = esc_textarea( $instance['project_details'] );
?>
<p>
<label for="<?php echo $this->get_field_id('thumbnail'); ?>"><?php _e('Thumbnail' ); ?></label>
<textarea class="widefat" rows="3" cols="30" id="<?php echo $this->get_field_id('thumbnail'); ?>" name="<?php echo $this->get_field_name('thumbnail'); ?>"><?php if (!empty($thumbnail)) echo $thumbnail; ?></textarea>
<p>
<label for="<?php echo $this->get_field_id('you_tube_link'); ?>">
<?php _e('You Tube Link', 'wp_widget_plugin'); ?>
</label>
<textarea class="widefat" rows="3" cols="30" id="<?php echo $this->get_field_id('you_tube_link'); ?>" name="<?php echo $this->get_field_name('you_tube_link'); ?>"><?php if (!empty($you_tube_link)) echo $you_tube_link; ?></textarea>
</p>
<p>
<label for="<?php echo $this->get_field_id('project_title'); ?>">
<?php _e('Project Title', 'wp_widget_plugin'); ?>
</label>
<textarea class="widefat" rows="3" cols="30" id="<?php echo $this->get_field_id('project_title'); ?>" name="<?php echo $this->get_field_name('project_title'); ?>"><?php if (!empty($project_title)) echo $project_title; ?></textarea>
</p>
<p>
<label for="<?php echo $this->get_field_id('project_details'); ?>">
<?php _e('Project Details', 'wp_widget_plugin'); ?>
</label>
<textarea class="widefat" rows="10" cols="30" id="<?php echo $this->get_field_id('project_details'); ?>" name="<?php echo $this->get_field_name('project_details'); ?>"><?php if (!empty($project_details)) echo $project_details; ?></textarea>
</p>
<?php
}
function update($new_instance, $old_instance) {
$instance = $old_instance;
// Fields
$instance['thumbnail'] = esc_textarea($new_instance['thumbnail']);
$instance['you_tube_link'] = strip_tags($new_instance['you_tube_link']);
$instance['project_title'] = strip_tags($new_instance['project_title']);
$instance['project_details'] = strip_tags($new_instance['project_details']);
return $instance;
}
function widget($args, $instance) {
?>
<div class="widget featured-video one-third column project">
<!-- ====================== YOU TUBE LINK ======================= -->
<a class="youtube" href="<?php echo $you_tube_link; ?>" title="Orchestra London Promo">
<!-- ==================== END YOU TUBE LINK ===================== -->
<div class="thumbnail slide">
<!-- ===================== THUMBNAIL LINK ======================= -->
<img class="thumbnail" src="http://<?php echo $thumbnail; ?>" />
<!-- =================== END THUMBNAIL LINK ===================== -->
<div class="project snipit">
<!-- ==================== OVERLAY CONTENT ======================= -->
<h4><?php echo $project_title; ?></h4>
<!-- PROJECT TITLE -->
<p><?php echo $project_details; ?></p>
<!-- PROJECT DESCRIPTION -->
<!-- ================= END OVERLAY CONTENT ===================== -->
</div>
</div>
</a> </div>
<?php
}
}
add_action('widgets_init', function() {
register_widget('WP_red_viking_video');
})
?>
They are stored in the $instance variable, similarly to what you have in your update() function. Just add the following on top of your widget() function:
$thumbnail = $instance['thumbnail'];
$you_tube_link = $instance['you_tube_link'];
$project_title = $instance['project_title'];
$project_details = $instance['project_details'];

I want to make the background image of joomla login be full width

I have custimized the css of my joomla login page, everything is perfect, but I would like the image that I have inserted in the background through css to scale to whole width. Right now it is of a certain width size, despite the fact that in my css I have added width:100%.
Here is the login code:
<?php
/**
* #package Joomla.Site
* #subpackage com_users
* #copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* #license GNU General Public License version 2 or later; see LICENSE.txt
* #since 1.5
*/
defined('_JEXEC') or die;
JHtml::_('behavior.keepalive');
?>
<div class="login<?php echo $this->pageclass_sfx?>">
<?php //if ($this->params->get('show_page_heading')) : ?>
<div class="page-header">
<h1 class="title">
<?php echo $this->escape($this->params->get('page_heading')); ?>
</h1>
</div>
<?php //endif; ?>
<?php if (($this->params->get('logindescription_show') == 1 && str_replace(' ', '', $this->params->get('login_description')) != '') || $this->params->get('login_image') != '') : ?>
<div class="login-description">
<?php endif ; ?>
<?php if (($this->params->get('login_image')!='')) :?>
<img src="<?php echo $this->escape($this->params->get('login_image')); ?>" class="login-image" alt="<?php echo JTEXT::_('COM_USER_LOGIN_IMAGE_ALT')?>"/>
<?php endif; ?>
<?php if($this->params->get('logindescription_show') == 1) : ?>
<?php echo $this->params->get('login_description'); ?>
<?php endif; ?>
<?php if (($this->params->get('logindescription_show') == 1 && str_replace(' ', '', $this->params->get('login_description')) != '') || $this->params->get('login_image') != '') : ?>
</div>
<?php endif ; ?>
<form class="form-horizontal" action="<?php echo JRoute::_('index.php?option=com_users&task=user.login'); ?>" method="post">
<fieldset class="well">
<?php foreach ($this->form->getFieldset('credentials') as $field): ?>
<?php if (!$field->hidden): ?>
<div class="control-group">
<div class="control-label">
<?php echo $field->label; ?>
</div>
<div class="controls">
<?php echo $field->input; ?>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
<div class="control-group">
<label id="remember-lbl" class="control-label" for="remember"><?php echo JText::_('JGLOBAL_REMEMBER_ME') ?></label>
<input id="remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="<?php echo JText::_('JGLOBAL_REMEMBER_ME') ?>" />
</div>
<?php endif; ?>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn-send"><?php echo JText::_('JLOGIN'); ?></button>
<input type="hidden" name="return" value="<?php echo base64_encode($this->params->get('login_redirect_url', $this->form->getValue('return'))); ?>" />
<?php echo JHtml::_('form.token'); ?>
</div>
</div>
</fieldset>
</form>
</div>
<div class="other-link">
<ul class="yt-list type-square">
<li class="pull-left">
<a href="<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
<?php echo JText::_('COM_USERS_LOGIN_RESET'); ?></a>
</li>
<?php
$usersConfig = JComponentHelper::getParams('com_users');
if ($usersConfig->get('allowUserRegistration')) : ?>
<li class="pull-right">
<a href="<?php echo JRoute::_('index.php?option=com_users&view=registration'); ?>">
<?php echo JText::_('COM_USERS_LOGIN_REGISTER'); ?></a>
</li>
<?php endif; ?>
</ul>
</div>
Don't modify core Joomla files, learn about overrides (1, 2 & 3) and use them, that way when a security update is released you can apply it safely and not have to worry about your changes being overwritten.
Did you mean backgroud-size: 100% rather than width: 100%? That would make more sense for background images. In that case, I would recommend reading this primer on "Scaling background images"
To help further we will need to see your existing CSS that you've created and either a link showing the problem or a good screen shot of the issue.