I installed the Front-End Publishing plugin on my website, and it displays this menu:
FEP menu
I want to remove the 'tags' and 'choose featured image' option from the menu.
Since I want users to upload media only for the post content, I would also like to prevent users from typing words in the content box.
This is the plugin's submission-form.php What code do I have to edit to achive this? (I tried to put all the code in code format but part of the code refused to be put in the code sample box)
<?php
$post = false;
$post_id = -1;
$featured_img_html = '';
if( isset($_GET['fep_id']) && isset($_GET['fep_action']) && $_GET['fep_action'] == 'edit' ){
$post_id = $_GET['fep_id'];
$p = get_post($post_id, 'ARRAY_A');
if($p['post_author'] != $current_user->ID) return 'You don\'t have permission to edit this post';
$category = get_the_category($post_id);
$tags = wp_get_post_tags( $post_id, array( 'fields' => 'names' ) );
$featured_img = get_post_thumbnail_id( $post_id );
$featured_img_html = (!empty($featured_img))?wp_get_attachment_image( $featured_img, array(200,200) ):'';
$post = array(
'title' => $p['post_title'],
'content' => $p['post_content'],
'about_the_author' => get_post_meta($post_id, 'about_the_author', true)
);
if(isset($category[0]) && is_array($category))
$post['category'] = $category[0]->cat_ID;
if(isset($tags) && is_array($tags))
$post['tags'] = implode(', ', $tags);
}
?>
This form needs JavaScript to function properly. Please turn on JavaScript and try again!
<div id="fep-new-post">
<div id="fep-message" class="warning"></div>
<form id="fep-submission-form">
<label for="fep-post-title">Title</label><br/>
<input type="text" name="post_title" id="fep-post-title" value="<?php echo ($post) ? $post['title']:''; ?>"><br/>
<label for="fep-post-content">Content</label><br/>
<?php
$enable_media = (isset($fep_roles['enable_media']) && $fep_roles['enable_media'])?current_user_can($fep_roles['enable_media']):1;
wp_editor( $post['content'], 'fep-post-content', $settings = array('textarea_name'=>'post_content', 'textarea_rows'=> 7, 'media_buttons'=>$enable_media) );
wp_nonce_field('fepnonce_action','fepnonce');
?>
<?php if(!$fep_misc['disable_author_bio']): ?>
<label for="fep-about">Author Bio</label><br/>
<textarea name="about_the_author" id="fep-about" rows="5"><?php echo ($post) ? $post['about_the_author']:''; ?></textarea><br/>
<?php else: ?>
<input type="hidden" name="about_the_author" id="fep-about" value="-1">
<?php endif; ?>
<label for="fep-category">Category</label><br/>
<?php wp_dropdown_categories(array('id'=>'fep-category', 'hide_empty' => 0, 'name' => 'post_category', 'orderby' => 'name', 'selected' => $post['category'], 'hierarchical' => true, 'show_option_none' => __('None'))); ?><br/>
<label for="fep-tags">Tags</label><br/>
<input type="text" name="post_tags" id="fep-tags" value="<?php echo ($post) ? $post['tags']:''; ?>"><br/>
<div id="fep-featured-image">
<div id="fep-featured-image-container"><?php echo $featured_img_html; ?></div>
<a id="fep-featured-image-link" href="#">Choose Featured Image</a>
<input type="hidden" id="fep-featured-image-id" value="<?php echo (!empty($featured_img))?$featured_img:'-1'; ?>"/>
</div>
<input type="hidden" name="post_id" id="fep-post-id" value="<?php echo $post_id ?>">
<button type="button" id="fep-submit-post" class="active-btn">Submit</button><img class="fep-loading-img" src="<?php echo plugins_url( 'static/img/ajax-loading.gif', dirname(__FILE__) ); ?>"/>
</form>
For Question # 1:
Add a class to these elements (I have called the class removal)
<label for="fep-tags" class="removal">Tags</label><br/>
<input type="text" name="post_tags" class="removal" id="fep-tags" value="<?php echo ($post) ? $post['tags']:''; ?>"><br/>
<div class="removal" id="fep-featured-image">
<div id="fep-featured-image-container"><?php echo $featured_img_html; ?></div>
<a id="fep-featured-image-link" href="#">Choose Featured Image</a>
<input type="hidden" id="fep-featured-image-id" value="<?php echo (!empty($featured_img))?$featured_img:'-1'; ?>"/>
</div>
Add custom CSS to your theme:
.removal{
display:none !important;
}
For Question # 2:
You can do two things. You can completely remove the user's ability to type text in by removing the textarea altogether in CSS:
#fep-about{
display:none !important;
}
If for any reason you actually need the text box (not sure why). I would add custom Javascript to detect if the user has entered a key or copy and pasted any text. Considering the ID of the textarea element is fep-about:
var ele = document.getElementById('fep-about')
ele.addEventListener('keyup',function(){
this.value = "";
alert("Only direct media uploads are allowed!");
});
ele.addEventListener('onchange',function(){
this.value = "";
alert("Only direct media uploads are allowed!");
});
Here is the JSFiddle for this: https://jsfiddle.net/a3zsdo88/1/
Compatibility Issues
If there are some sort of issues in CSS classes overriding the above ones, just add the display statements inline with the elements:
<div id="fep-featured-image" style="display:none !important;">
<div id="fep-featured-image-container"><?php echo $featured_img_html; ?> </div>
<a id="fep-featured-image-link" href="#">Choose Featured Image</a>
<input type="hidden" id="fep-featured-image-id" value="<?php echo (!empty($featured_img))?$featured_img:'-1'; ?>"/>
</div>
See how I added the display statement to the parent element. Do that for the elements you do not want shown.
If you don't have a way to customize your Javascript easily, then add a <script></script> block directly in your HTML in your form file.
<script>
var ele = document.getElementById('fep-about')
ele.addEventListener('keyup',function(){
this.value = "";
alert("Only direct media uploads are allowed!");
});
ele.addEventListener('onchange',function(){
this.value = "";
alert("Only direct media uploads are allowed!");
});
</script>
Related
I have used the youtube video: (https://www.youtube.com/watch?v=OJdIUU1pjl4&t=1261s) to learn how to create my first custom widget. From here I have create a class with a front end display and a backend display (forms) I want to create a form to post the information, then gets saved to the database that later gets generated on the front end.
I have done this with an options page using update_option() and get_option() however, this would be a hard coded variable and since someone can use my widget in multiple places I would want each one to have a unique storage.
Here is currently what I have with php variables with no values because I am uncertain how to make my form post save the details to the database.
//Back-end display of widget
public function form($instance) {
?>
<form method="post">
<label for="inner-text">Inside Text</label>
<input name="inner-text" type="text">
<label for="bg-image">Background Image</label>
<input name="bg-image" type="image">
</form>
<?php
}
//front end display of widget
public function widget($args, $instance ) {
echo $args['before_widget'];
?>
//$bg_img & $inner_text are currently unassigned but would like to use the back end to assign them
<div class="bg-img" style="background: url('<?= $bg_img ?>');">
<div class="container">
<div class="inner-rectangle">
<?= $inner_text ?>
</div>
</div>
</div>
<?php
echo $args['after_widget'];
return;
}
The reason I have refrained from using get_option() is because it is a static variable and can't have a unique value for each widget.
Use get_field_name() & get_field_id() * $instances to display
//Back-end display of widget
public function form($instance) {
// DECLARE VARIABLES
$inner_text = '';
$widget_background = '';
if($instance) {
$inner_text = esc_textarea($instance['inner_text']);
$widget_background = esc_url($instance['widget_background']);
}
?>
<form method="post">
<label for="<?php echo $this->get_field_id('widget_background'); ?>"><?php _e('Widget Background URL', 'wp_widget_plugin'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('widget_background'); ?>" name="<?php echo $this->get_field_name('widget_background'); ?>" type="text" value="<?php echo $widget_background; ?>">
<label for="<?php echo $this->get_field_id('inner_text'); ?>"><?php _e('Inner text', 'wp_widget_plugin'); ?></label>
<textarea class="widefat" id="<?php echo $this->get_field_id('inner_text'); ?>" name="<?php echo $this->get_field_name('inner_text'); ?>" type="text" value=""><?php echo $inner_text; ?></textarea>
</form>
<?php
}
// AUTOMATICALLY UPDATE THE STORED FIELDS
function update($new_instance, $old_instance) {
$instance = $old_instance;
// Fields
$instance['inner_text'] = strip_tags($new_instance['inner_text']);
$instance['widget_background'] = strip_tags($new_instance['widget_background']);
return $instance;
}
//front end display of widget
public function widget($args, $instance ) {
echo $args['before_widget'];
?>
<div class="bg-img" style="background: url('<?= $instance['widget_background'] ?>');">
<div class="container">
<div class="inner-rectangle">
<?= $instance['inner_text']?>
</div>
</div>
</div>
<?php
echo $args['after_widget'];
return;
}
}
Current Situation
So, this is a follow up question from my previous question (Submit button to affect multiple files)
The approach was good in terms of how to "click" multiple buttons together by using a "super-button" (patent pending) by #oMiKeY. It does what it is supposed to do, clicking all buttons.
The mark up is the following:
Title.php
<form role="form" method="post">
<div class="edit_title">
<input type="hidden" value="<?php echo $post_id; ?>">
<?php post_input_box( $post_id, 'post_title', array( 'placeholder' => 'Article title..', 'value' => $post->post_title ) ); ?>
<div class="update-button-wrap">
<input id="save_button" type="submit" name="update_product" value="<?php esc_attr_e( 'Update', 'site' ); ?>"/>
</div>
</div>
</form>
Content.php
<form role="form" method="post">
<div class="edit_content">
<?php post_input_box( $post_id, 'post_content', array( 'placeholder' => 'Short description..', 'value' => $post->post_content ), 'textarea' ); ?>
</div>
<div class="update-button-wrap">
<input id="save_button" type="submit" name="update_product" value="<?php esc_attr_e( 'Update', 'site' ); ?>"/>
</div>
</form>
Article.php
<button type='button' onclick="$('[type="submit"]').click()">Submit</button>
Problem
So, when the "Submit" button is clicked, both buttons in each title.php and content.php are also clicked (ie. in regards to clicking buttons, it works fine). However, because two forms are simultaneously clicked, only the second one is updated (either content or title) while the first one is ignored, when both data are needed to be updated.
My approach
Now, I can merge two files together and have both title and content within a single form, but that really messes up my overall setup and I heard it is better to have multiple smaller php files for updating and speed than a large one big file.
Or here is my another approach.
In the article.php, I will have the form and submit button while the title.php and content.php only has the editable forms. Then these two forms are somehow linked to the form in article.php, like the image below.
Do you think the second approach can be achieved or any other suggestions?
Thanks
Just add a global form on article.php and drop the title and content forms (and submit buttons). Every named input inside the global form will be submitted together no matter what php file generated them.
Edit:
Title.php
<div class="edit_title">
<input type="hidden" value="<?php echo $post_id; ?>">
<?php post_input_box( $post_id, 'post_title', array( 'placeholder' => 'Article title..', 'value' => $post->post_title ) ); ?>
</div>
Content.php
<div class="edit_content">
<?php post_input_box( $post_id, 'post_content', array( 'placeholder' => 'Short description..', 'value' => $post->post_content ), 'textarea' ); ?>
</div>
Article.php
<form role="form" method="post">
<?php include "Title.php"; include "Content.php"; ?>
<button type='submit'>Submit</button>
</form>
Option 2:
Alternatively you could use some sort of functionality that allows you to create forms only once, even if you have "inner forms". This way Title.php and Content.php would also work as standalone code snippets.
$formDeep = 0;
function openForm() {
global $formDeep;
if ($formDeep == 0) {
echo "<form role=\"form\" method=\"post\">";
}
$formDeep++;
}
function closeForm() {
global $formDeep;
$formDeep--;
if ($formDeep == 0) {
echo "</form>";
}
}
Title.php
<?php openForm(); ?>
<div class="edit_title">
<input type="hidden" value="<?php echo $post_id; ?>">
<?php post_input_box( $post_id, 'post_title', array( 'placeholder' => 'Article title..', 'value' => $post->post_title ) ); ?>
</div>
<?php closeForm(); ?>
Content.php
<?php openForm(); ?>
<div class="edit_content">
<?php post_input_box( $post_id, 'post_content', array( 'placeholder' => 'Short description..', 'value' => $post->post_content ), 'textarea' ); ?>
</div>
<?php closeForm(); ?>
Article.php
<?php openForm(); ?>
<?php include "Title.php"; include "Content.php"; ?>
<button type='submit'>Submit</button>
<?php closeForm(); ?>
I'm creating an image upload form for a custom post type but i don't know how to upload the image to the custom post type. The custom post type is called 'art'.
Here is my code.
form html
<form id="art_submission_form" enctype="multipart/form-data" method="post" action="art_process.php">
<div class="art_upload_container" <?php echo $style; ?>>
<div class="art_sub_row">
<select class="art_sub_select" name="art_creation_date">
<option value="Creation Date">Creation Date</option>
<?
$dates = array("2014","2013","2012","2011","2010","2009","2008","2007","2006","2005","2004","2003","2002","2001","2000","1999",
"1998","1997","1996","1995","1994","1993","1992","1991","1990","1989","1988","1987");
foreach($dates as $value) {
echo "<option value='$value'>$value</option>";
}
?>
</select>
<div class="art_sub_col"><label>Art Title</label><input type="text" class="art_title" name="art_title[]" value="<?php echo $art_title; ?>" /></div>
</div>
<div class="art_sub_row">
<div class="art_sub_col"><label>Width(cm)</label><input type="text" class="art_width" name="art_width[]" value="<?php echo $art_width; ?>" /></div>
<div class="art_sub_col"><label>Height(cm)</label><input type="text" class="art_height" name="art_height[]" value="<?php echo $art_height; ?>" /></div>
<div class="art_sub_col"><label>Price</label><input type="text" class="art_price" name="art_price[]" value="<?php echo $art_price; ?>" /></div>
</div>
<div class="art_sub_row">
<div class="art_sub_col"><label>Upload Art:</label> <input type="file" name="art_upload[]" class="art_upload"></div>
</div>
</div>
<input type="submit" class="art_sub_send" value="Send" />
</form>
art_process.php - what i've done so far
$art_title = $_POST['art_title'];
$i = 0;
foreach($art_title as $value) {
$art_title = $_POST['art_title'][$i];
$art_width = $_POST['art_width'][$i];
$art_height = $_POST['art_height'][$i];
$art_price = $_POST['art_price'][$i];
$art_creation_date = $_POST['art_creation_date'][$i];
// Add the content of the form to $post as an array
$new_post = array(
'post_title' => $art_title,
'post_status' => 'draft',
'post_type' => 'art'
);
//save the new post
$pid = wp_insert_post($new_post);
$i++;
}
Is there a built in wordpress function to upload image to a custom post type?
media_handle_upload() is the function you're looking for:
handles the file upload POST request, and creates the attachment post
in the database.
If successful, you can use the parent post ID ($pid) and the attachment ID to set the image as post thumbnail with set_post_thumbnail().
when i try to post html from my textarea the variable value is empty and form_validation show error message that the input is required......
i search for solution and i didn't found ....
this is my code
<form accept-charset="utf-8" method="post" action="<?php echo base_url('send_message/validate'); ?>">
<?php
echo validation_errors();
echo form_dropdown('cat_name', $plan_cat);
?>
<div>
<span><label>اسم الراسل باللغه الانجليزية</label></span>
<span><input name="from" type="text" class="textbox" value="<?php echo set_value('from'); ?>" /></span>
</div>
<div>
<span><label>العنوان</label></span>
<span><input name="subject" type="text" class="textbox" value="<?php echo set_value('subject'); ?>" /></span>
</div>
<div>
<span><label>الرساله</label></span>
<?php
/*
$options = array(
'name' => 'message',
'id' => 'elm1'
);
echo form_textarea($options);
*/
?>
<textarea name="message" id="elm1"><?php echo set_value('message'); ?></textarea>
</div>
<div>
<span><input type="submit" value="ارسل" /></span>
</div>
<?php
echo form_close();
?>
and this is my controller code :
$this->load->library('form_validation');
$this->form_validation->set_rules('from', 'الراسل', 'required|min_length[8]');
$this->form_validation->set_rules('subject', 'عنوان الرساله', 'required|min_length[6]');
$this->form_validation->set_rules('message', 'الرساله', 'trim|required|min_length[10]|xss_clean');
if($this->form_validation->run() == false){
$user_id = $this->session->userdata('user_id');
$send = array(
'title' => 'ارسل الرساله',
'plan' => $this->user_plan->get_plan($user_id)
);
$this->load->library('parser');
$this->parser->parse('header', $send);
$this->parser->parse('send_message', $send);
$this->parser->parse('footer', $send);
}else{
$user_id = $this->session->userdata('user_id');
$plan_cat = $this->input->post('cat_name');
$from = $this->input->post('from', true);
$subject = $this->input->post('subject', true);
$message = $this->input->post('message', true);
$message = '<code>'.$message.'</code>';
i hope to find way to solve this :)
First , before going deep in your code , I have to say that : using base_url functionality as action attribute is bad. You have to use site_url instead in this way :
echo site_url('send_message/validate');
The reason stands behind that :
site_url gives you the full URL including the main processing file (index.php) which is important to handle your MVC requests (e.g http://domain.com/codeigniter/index.php/send_message/validate)
base_ur gives you the URL without any consideration for the main file (index.php) (e.g http://domain.com/codeigniter/send_message/validate)
Second (And the important). I see that you are using XSS Filter for the (message) which means you are trying to put illegal content in the textarea. Try to put anything else everything will be ok.
So , make sure that your message value doesn't contain illegal characters.
I'm creating my first options page and i'm trying to upload images for a slider, I don't know how many images are going to be in the slider so I will need to add more with a + button, It will automatically show one text input an upload button and a + button to start off with, should I require more i'll click the + button which will then add another text input, upload button a + button and a - button.
I've got this working to a point, it still needs a little help but it's getting there http://jsfiddle.net/vs8p5/5/
So far if I upload an image and click the + button, it will give me the option to upload another, this is working great and the images upload to wordpress.
Now for the issue.
I'm using this part of code to retrieve the data from wordpress
if( isset( $hero_options['upload_image_link_1'] ) && $hero_options[ 'upload_image_link_1' ] ) {
echo "<script type='text/javascript'>alert('yes it has');</script>";
}
This tells me that if there is a value then echo the alert
Now, working form that code above I've
function kandibox_hero_upload_image_link_callback($args) {
$hero_options = get_option( 'hero_options' ); ?>
<div id="upload_image_sets"> <?php
$hero_options = get_option ( 'hero_options' );
if( isset( $hero_options['upload_image_link_1'] ) && $hero_options[ 'upload_image_link_1' ] ) { ?>
<div id="clonedInput1" class="clonedInput">
<input id="upload_image_link_1" type="text" size="36" name="hero_options[upload_image_link_1]" value="<?php echo $hero_options['upload_image_link_1']; ?>" />
<input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" />
<div class="actions">
<button class="clone">Clone</button>
<button class="remove">Remove</button>
</div>
</div> <?php
}
else { ?>
<div id="clonedInput1" class="clonedInput">
<input id="upload_image_link_1" type="text" size="36" name="hero_options[upload_image_link_1]" value="<?php echo $hero_options['upload_image_link_1']; ?>" />
<input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" />
<div class="actions">
<button class="clone">Clone</button>
<button class="remove">Remove</button>
</div>
</div>
<?php } ?>
</div> <?php
}
What i'm trying to do here is echo a form with a value, if nothing exists, echo a blank form, this seems to work although I don't think it's correct.
The main issue is that it will only echo the first form, when you click the + buttons, the form's id, name, and value script increments.
So now the question.
How can I get the form to look for all the $hero_options['upload_image_link_...'] and echo out a form for each if it exists? then echo out 1 blank form if nothing exists?
I'm pretty sure i've covered everything you might need but if i've missed something, let me know and i'll add it.
I've followed about 20 tutorials old and new and come up with this.
To add the information to the wordpress database, i'm using the following code.
function register_hero_options() {
add_settings_section(
'hero_settings_section', // ID used to identify this section and with which to register options
__( 'hero Options', 'kandibox' ), // Title to be displayed on the administration page
'kandibox_hero_options_callback', // Callback used to render the description of the section
'hero_options' // Page on which to add this section of options
);
add_settings_field(
'show_hero_options', // ID used to identify the field throughout the theme
__( 'hero', 'kandibox' ), // The label to the left of the option interface element
'kandibox_toggle_hero_callback', // The name of the function responsible for rendering the option interface
'hero_options', // The page on which this option will be displayed
'hero_settings_section' // The name of the section to which this field belongs
);
$hero_options = get_option ( 'hero_options' );
if( isset( $hero_options['show_hero_options'] ) && $hero_options[ 'show_hero_options' ] ) {
add_settings_field(
'hero_size',
__( 'Size', 'kandibox' ),
'kandibox_hero_size_callback',
'hero_options',
'hero_settings_section'
);
add_settings_field(
'hero_background',
__( 'Background', 'kandibox' ),
'kandibox_hero_background_callback',
'hero_options',
'hero_settings_section'
);
add_settings_field(
'upload_image_links',
__( 'Upload Image', 'kandibox' ),
'kandibox_hero_upload_image_link_callback',
'hero_options',
'hero_settings_section'
);
}
register_setting(
'hero_options',
'hero_options'
);
}
add_action( 'admin_init', 'register_hero_options' );
$hero_options = get_option( 'hero_options' );
$count=count($hero_options);
$totalimg=$count-4; ?>
<div id="upload_image_sets"> <?php
if( isset( $hero_options['upload_image_link_1'] ) && $hero_options[ 'upload_image_link_1' ] ) {
for($i=1;$i<=$totalimg;$i++){ ?>
<div id="clonedInput1" class="clonedInput">
<input type="text" size="36" name="hero_options[upload_image_link_<?=$i ?>]" value="<?php echo $hero_options['upload_image_link_'.$i]; ?>" />
<input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" />
<div class="actions">
<button class="clone">Clone</button>
<button class="remove">Remove</button>
</div>
</div> <?php
}}
?>
ok i juss wrote a rough code for you might this will help you. this is according to the array you have go. there might be some better ways of doing it.
$hero_options = get_option( 'hero_options' );
$count=count($hero_options);
$totalimg=$count-4; ?>
<div id="upload_image_sets"> <?php
if( isset( $hero_options['upload_image_link_1'] ) && $hero_options[ 'upload_image_link_1' ] ) {
for($i=1;$i<=$totalimg;$i++){ ?>
<div id="clonedInput1" class="clonedInput">
<input type="text" size="36" name="hero_options[upload_image_link_<?=$i ?>]" value="<?php echo $hero_options['upload_image_link_'.$i]; ?>" />
<input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" />
<div class="actions">
<button class="clone">Clone</button>
<button class="remove">Remove</button>
</div>
</div> <?php
}}
?>
</div> <?php
Updated the code so now it's correct.