Add logout link to WordPress admin dashboard left sidebar menu - php

I want to add logout link(button) in the left side of my wordpress admin dashboard. Like on the picture.. How can I do it?

UPDATED
You can achive this using admin_init action hook and global $menu.
Here is this code:
add_action('admin_init', 'text_domain_logout_link');
function text_domain_logout_link() {
global $menu;
$menu[9999] = array(__('Logout'), 'manage_options', wp_logout_url());
}
This code goes in function.php file of your active child theme (or theme) or also in any plugin file.
The code is tested and fully functional.
References:
admin_init
global $menu
Customizing Your WordPress Admin

Use following code
add_action('admin_menu', 'register_custom_menu_page');
function register_custom_menu_page() {
add_menu_page( 'admin_menu', 'Logout', '0', 'logout', 'users_add_login_logout_link');
}
function users_add_login_logout_link(){ ?>
<div id="dashboard" class="wrap">
<div style="float: left; height: 48px margin: 7px 8px 0 0; width: 48px;">
<br>
</div>
<h2>Log Out</h2>
</div>
<div style="text-align: center;"><img src="put you image link" width="128px" height="128px" /></div>
<div style="text-align: center;">Please wait we are logging you out ...</div>
<br/>
<br/>
<div style="padding: 10px 0; font-size: 25px;"><p>
</div>
<?php
$location = '"Location: ' . wp_logout_url() . '"';
echo '<meta http-equiv="refresh" content="4; url=' . wp_logout_url(home_url()) . '"/>';
}

Another alternative, with a dashicon. Based on this answer.
add_action('admin_menu', 'logout_menu_item');
function logout_menu_item() {
add_menu_page('', 'Logout', 'manage_options', 'logout', '__return_false', 'dashicons-external', 999);
}
add_action('after_setup_theme', 'redirect_loggingout');
function redirect_loggingout() {
if ( isset($_GET['page']) && $_GET['page'] == 'logout' ) {
wp_redirect( wp_logout_url() );
exit();
}
}

Related

Display the fields dynamically after clicking on add more fields button

I added the custom fields in the WordPress admin panel I added a button called Add more fields so that users can add more than one. Now my issue is, I have to display fields dynamically by clicking on the Add more fields button.
I tried the below code but when I click on the Add more fields button then I am getting the browser warning and clicking on the leave button page then the page refreshed.
What is the issue with my code?
Full code here
function woocommerce_register_2col_layout_fields() {
global $post;
// Nonce field to validate form request came from current site
wp_nonce_field( basename( __FILE__ ), 'layout' );
// Output the field
echo '<button id="addMore_layout">Add more fields</button>';
echo '<div class="create_custom_layout" id="create_custom_layout"><div class="row">';
echo '<div class="col-md-6">';
echo '<h4>Description</h4>';
//We first get the post_meta from the DB if there's any there.
$description = get_post_meta( $post->ID, 'pDescription', true );
//Second ID the field.
$description_field = 'pDescription';
//Provide the settings arguments for this specific editor in an array
$description_args = array( 'media_buttons' => false, 'textarea_rows' => 12, 'textarea_name' => 'pDescription[]',
'editor_class' => 'description-editor widefat', 'wpautop' => true );
wp_editor( $description, $description_field, $description_args );
echo '</div>';
echo '<div class="col-md-6">
<h4>Banner image</h4>
<input type="button" id="meta-image-button" class="button" value="Choose or Upload an Image" style="padding: 8px 10px; height: auto; line-height: normal;"/>
<input type="hidden" name="pimage[]" id="meta-image" class="meta_image" value="'.get_post_meta(get_the_ID(), 'pimage', true ).'" /><br />
<img style="width: 100px;height: 100px;object-fit: cover;" id="meta-image-preview" src="'.get_post_meta(get_the_ID(), 'pimage', true ).'" />
</div>
</div>
</div>
<style>
.create_custom_layout .row{display: flex;flex-wrap: wrap;}
.create_custom_layout .col-md-6 {
flex: 0 0 auto;
width: 50%;
}
</style>
<script>
jQuery("#meta-image-button").click(function() {
var send_attachment_bkp = wp.media.editor.send.attachment;
wp.media.editor.send.attachment = function(props, attachment) {
jQuery("#meta-image").val(attachment.url);
jQuery("#meta-image-preview").attr("src",attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open();
return false;
});
jQuery(function() {
jQuery("#addMore_layout").click(function(e) {
e.preventDefault();
jQuery("#create_custom_layout").append("
<div class="row"><div class="col-md-6"><h4>Description</h4>';
//We first get the post_meta from the DB if there's any there.
$description = get_post_meta( $post->ID, 'pDescription', true );
//Second ID the field.
$description_field = 'pDescription';
//Provide the settings arguments for this specific editor in an array
$description_args = array( 'media_buttons' => false, 'textarea_rows' => 12, 'textarea_name' => 'pDescription[]',
'editor_class' => 'description-editor widefat', 'wpautop' => true );
wp_editor( $description, $description_field, $description_args );
'</div>
<div class="col-md-6">
<h4>Banner image</h4>
<input type="button" id="meta-image-button" class="button" value="Choose or Upload an Image" style="padding: 8px 10px; height: auto; line-height: normal;"/>
<input type="hidden" name="pimage[]" id="meta-image" class="meta_image" value="'.get_post_meta(get_the_ID(), 'pimage', true ).'" /><br />
<img style="width: 100px;height: 100px;object-fit: cover;" id="meta-image-preview" src="'.get_post_meta(get_the_ID(), 'pimage', true ).'" />
</div>
</div>
");
});
});
</script>';
}

Insert custom field to custom post type

I have a component made by a plugin which displays a list of articles from a custom post type. Each article has the class post-id associated with. I can't override plugin's files in child theme to loop inside the template that generates the list so I need to create a function in functions.php. What I need is to replace a div inside the article with a new div styled with a custom field ( color picker ) made with advanced custom field plugin, that is associated to each article dynamically.
loop {
display: flex;
width: 100%;
}
article {
width: 200px;
height: 200px;
background: red;
margin:20px;
display:flex;
justify-content:center;
align-items:center;
}
.overlay {
width:150px;
height:150px;
}
<article class="portfolio-item post-53">
<div class="overlay" style="background-color:#000"></div>
</article>
<article class="portfolio-item post-65">
<div class="overlay" style="background-color:#000"></div>
</article>
<article class="portfolio-item post-70">
<div class="overlay" style="background-color:#000"></div>
</article>
function insert_custom_div() {
$args = array(
'meta_key' => 'new_color',
'post_type' => 'portfolio-item'
);
$posts = get_posts($args);
foreach ($posts as $post):
$color_picker_custom_field = get_field('new_color', $post->ID);
if ($color_picker_custom_field) {
?>
<script>
jQuery( document ).ready( function() {
jQuery('article').append('<div class="overlay post-<?php echo $post->ID; ?>" style="background-color:<?php echo $color_picker_custom_field; ?>"></div>');
});
</script>
<?php
}
endforeach;
}
add_action('wp_head','insert_custom_div');
You can get new color from each post to array and then pass the array to javascript with json_encode()
Here is modified fragment of your code, I'm not sure it will work since html injections to functions.php is bad practice, it's better to do it in template. Well it's just direction for thoughts:
<?php
$new_div = array();
foreach ($posts as $post):
$color_picker_custom_field = get_field('new_color', $post->ID);
$new_div[] = '<div class="overlay" style="background-color:<?php echo $color_picker_custom_field; ?>"></div>';
endforeach;
?>
<script>
jQuery( document ).ready( function() {
var new_divs = <?php echo json_encode($new_div); ?>;
jQuery( '.overlay' ).each( function(ind, el) {
jQuery(this).replaceWith(new_divs[ind]');
});
});
</script>

How to put the HTML output with overlay inside the OwlCarousel

I have a slider in my page and every slider has it's own overlay descriptions and this descriptions are in the HTML format.
In my admin module there is a setting there that the user can create their own slider images with custom message using CKEditor.
And my problem is when I try to display the descriptions in the slider it's just plain HTML code.
Here's a bit of my code:
Controller Part
foreach($results as $result) {
if ($result['banner_image'] && file_exists(DIR_IMAGE . $result['banner_image'])) {
$image = $this->model_tool_image->resize($result['banner_image'], 40, 40);
$banner_image_large = HTTP_IMAGE . $result['banner_image'];
} else {
$image = $this->model_tool_image->resize('no_image.jpg', 40, 40);
}
$url = '&banner_id=' . (int)$result['banner_id'];
$this->data['banners'][] = array(
'banner_id' => $result['banner_id'],
'banner_image' => $image,
'banner_image_large' => $banner_image_large, // here's the image to be use in the slider
'code_description' => $result['banner_description'], //here's the raw HTML formatted description
'description' => strip_tags(html_entity_decode($result['banner_description'])),
'banner_link' => $result['banner_link'],
'action' => $this->url->link('project/banner_slider/update', 'token=' . $this->session->data['token'] . $url, 'SSL')
);
}
In my View
<h1>Carousel Demo</h1>
<div id="owl-demo" class="owl-carousel owl-theme">
<?php foreach($banners as $banner) { ?>
<div class="item">
<div class="textoverlay"><?php echo $banner['code_description']; ?></div> <!-- overlay the decription -->
<img src="<?php echo $banner['banner_image_large']; ?>" />
</div>
<?php } ?>
</div>
Here's some CSS
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
.textoverlay{
position: absolute;
display:block;
}
And JS:
$('#owl-demo').owlCarousel({
autoPlay : 3000,
stopOnHover : true,
navigation : false, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
autoHeight : true,
transitionStyle:"fade"
});
surround the raw html with $.parseHTML("your html here");
Ok I solved it by using html_entity_decode() function

Remove master slider admin menu item from wordpress

I need to remove the Master Slider menu item from the wordpress admin menu. I have already tried the below but with no luck.
function edit_admin_menus() {
remove_menu_page('master-sliders');
}
add_action( 'admin_menu', 'edit_admin_menus' );
This should work for you. I tried it on my end and it works with no problems:
function sb_remove_admin_menus(){
if ( function_exists('masterslider') ) { ?>
<style type="text/css">
#toplevel_page_master-slider {
display: none;
}
</style>
<?php }
}
add_action('admin_menu', 'sb_remove_admin_menus');
See if that resolves.
function sb_remove_admin_menus(){
if ( current_user_can('editor') ) { ?>
<style type="text/css">
#toplevel_page_master-slider {
display: none;
}
</style>
<?php }
}
add_action('admin_menu', 'sb_remove_admin_menus');

Ajax not working in submit button

I am creating this wordpress plugin it works well but the issue here in subimt data using ajax. I already created the ajax code but it doesn't work.
Please help to figure it out
Thank You
Here is the code
<script>
var data = {
action: 'join_mailinglist',
email: email
};
jQuery("#mailinglistsubmit").hide();
jQuery(".ajaxsave").show();
jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data,
function(response){
jQuery(".ajaxsave").hide();
jQuery("#mailinglistsubmit").show();
});
return false;
</script>
<?php
/*
Plugin Name: MyFirst
Plugin URI: http://zachis.it
Description: ajax form.
Version: 1.0
Author: Zachary Smith
Author URI: http://zachis.it
License: GPL2
*/
?>
<?php
/* What to do when the plugin is activated? */
register_activation_hook(__FILE__,'my_first_plugin_install');
/* What to do when the plugin is deactivated? */
register_deactivation_hook( __FILE__, 'my_first_plugin_remove' );
function my_first_plugin_install() {
/* Create a new database field */
add_option("my_first_data", 'Testing !! My Plugin is Working Fine.', 'This is my first plugin panel data.', 'yes');
}
function my_first_plugin_remove() {
/* Delete the database field */
delete_option('my_first_data');
}
add_action('admin_menu', 'my_first_admin_menu');
function my_first_admin_menu() {
add_options_page('Plugin Admin Options', 'My Plugin Settings', 'manage_options',
'my-first', 'plugin_admin_options_page');
}
?>
<?php
function plugin_admin_options_page() {
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2>Plugin Options Admin Page</h2>
</div>
<div class="content">
<div class="output"><p><?php echo get_option('my_first_data'); ?></p></div>
<p>
<form method="post" action="options.php">
<?php wp_nonce_field('update-options'); ?>
<h2>Enter Text: </h2>
<textarea name="my_first_data" id="my_first_data" cols="200" rows="20"></textarea>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="my_first_data" /><br />
<input style="position: fixed; left: 40%;" id="mailinglistsubmit" type="submit" value="Save Changes" /><img src="<?php admin_url(); ?>/wp-admin/images/wpspin_light.gif" alt="" class="ajaxsave" style="display: none;" />
</form>
</p>
</div>
<?php
}
?>
<?php add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');
?>
<?php function join_mailinglist_callback() {
$email = $_POST['email'];
if(!empty($email)) {
$yourEmail = 'c#bavotasan.com';
$subject = 'Add me to your mailing list';
$success = mail($yourEmail, $subject, $email);
if(!empty($success)) {
echo 'Your email is subscribed to our mailing list.';
} else {
echo 'There was a problem. Please try again.';
}
}
die();
} ?>
<style>
.content { padding-left:150px;}
.output p {width:700px; height:auto;}
</style>
I see several things wrong with this plugin of yours.
Firstly, why is your JavaScript code appended to the top of the plugin? The right way to include JS in WordPress is to have it in a separate .js file and loaded by enqueing it using wp_enqueue_script(). Same for your styles at the bottom.
An example is as follows:
function my_scripts_method() {
wp_enqueue_script(
'your-script-name',
plugins_url( 'js/your-script.js' , __FILE__ ),
array('jquery')
);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
Secondly, your PHP plugin file MUST NOT be outputting any content and that means you shouldn't see any ?> tags after the headers as that would output a few linebreaks.
Next, in order to get the admin-ajax-url in your static JS file, you should use this function:
wp_localize_script( 'ajax_get_permalink', 'ajax_get_permalink', array(
ajax_url => admin_url( 'admin-ajax.php' )
));
In your JS file, you should wrap your main code in a function that is called when the form submits.
function mailingListSubmit() {
var data = {
action: 'join_mailinglist',
email: jQuery('#mailingListEmail')
};
jQuery("#mailinglistsubmit").hide();
jQuery(".ajaxsave").show();
jQuery.post(ajax_get_permalink.ajax_url, data,
function(response){
jQuery(".ajaxsave").hide();
jQuery("#mailinglistsubmit").show();
});
}
And finally, your action hooks are wrong too. You copied it from the codex (or who knows where) but didn't even bother to read the docs.
add_action('wp_ajax_my_action', 'my_action_callback');
You need to change my_action_callback to reflect your function name join_mailinglist_callback and wp_ajax_my_action to wp_ajax_join_mailinglist -- the action you defined in your JS file.
The above codes aren't tested for syntax errors but should point you in the right direction. You shouldn't expect your plugin to magically work even if you copy and paste these code in.
Read more about AJAX in WordPress plugins here: http://codex.wordpress.org/AJAX_in_Plugins

Categories