I've managed to replace the Wordpress icon/logo in the admin bar with a custom one in my functions.php file as well as removing the dropdown menu linking to Wordpress documentation, support forums, feedback etc. What i'm trying to do is to disable the link present on the logo that takes you to the About Wordpress page in the admin that explains the features of the version you currently are running.
I'd like to do this from within the functions.php file. Is this possible?
This is the code i have used so far:
// Replace Wordpress logo with custom Logo
function my_custom_logo() {
echo '
<style type="text/css">
#wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-position: 0 0;
content: url(' . get_bloginfo('stylesheet_directory') . '/assets/img/my-logo.png)!important;
top: 2px;
display: block;
width: 15px;
height: 20px;
pointer-events: none!important;
cursor: default;
}
#wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}
add_action('admin_head', 'my_custom_logo');
add_action('wp_head', 'my_custom_logo');
//disable a few items on the admin bar
function remove_admin_bar_links() {
global $wp_admin_bar;
$wp_admin_bar->remove_menu('new-content'); // Remove the 'add new' button
$wp_admin_bar->remove_menu('comments'); // Remove the comments bubble
$wp_admin_bar->remove_menu('about'); // Remove the about WordPress link
$wp_admin_bar->remove_menu('wporg'); // Remove the WordPress.org link
$wp_admin_bar->remove_menu('documentation'); // Remove the WordPress documentation link
$wp_admin_bar->remove_menu('support-forums'); // Remove the support forums link
$wp_admin_bar->remove_menu('feedback'); // Remove the feedback link
}
add_action( 'wp_before_admin_bar_render', 'remove_admin_bar_links' );
I had this problem a while back.
The easiest solution would not be with css but with a function that removes that menu item from the admin bar.
Then just add a new menu item with your logo image.
I would do this instead of replacing the icon with your logo with css.
/*Remove WordPress menu from admin bar*/
add_action( 'admin_bar_menu', 'remove_wp_logo', 999 );
function remove_wp_logo( $wp_admin_bar ) {
$wp_admin_bar->remove_node( 'wp-logo' );
}
/*Adds Custom Logo to Admin Bar*/
add_action( 'admin_bar_menu', 'custom_admin_logo', 1 );
//priority 1 sets the location to the front/leftmost of the menu
function custom_admin_logo( $wp_admin_bar ) {
$custom_logo_id = get_theme_mod( 'custom_logo' ); //Uses theme logo
$custom_logo_url = wp_get_attachment_image_url( $custom_logo_id , 'full' );
$args = array(
'id' => 'custom_logo_admin',
'title' => ' ',
'meta' => array( 'html' => '<li id="custom-logo-admin-bar" style="width: 230px;padding: 10px;padding-left: 0px;padding-right: 25px;"><img class="overlay" src="'.$custom_logo_url.'" style="float: left;width: 100%;height: auto;"></li>' )
);
$wp_admin_bar->add_node( $args );
}
You can style your image with css either in your stylesheet or directly here in the meta array.
The $wp_admin_bar->add_node( $args ); is what actually adds the new node into the admin bar.
P.S. some of the styling here is just what I needed for my own purposes, feel free to change.
Maybe you should just overwrite the CSS for it and replace it with your own image so the functionality will stay in tact!
This is the original CSS:
#wp-admin-bar-wp-logo > .ab-item .ab-icon {
background-image: url("../wp-includes/images/admin-bar-sprite.png?d=20120830");
background-position: 0 -76px;
background-repeat: no-repeat;
height: 20px;
margin-top: 4px;
width: 20px;
}
You might want to change it in:
#wp-admin-bar-wp-logo > .ab-item span.ab-icon {
background-image: url("your-image.png");
background-repeat: no-repeat;
height: 20px;
margin-top: 4px;
width: 20px;
}
Notice the addiational span to .ab-icon to make it more specific.
For any legal questions check their licence page:
https://codex.wordpress.org/License
And the GPL licence:
https://www.gnu.org/copyleft/gpl.html
Related
I want to remove the thumbnails from the gallery (flexslider) of the product single page.
But I want to keep the arrow for the previous/next images (in case there is more than 1 image).
I found the following code:
add_action( 'woocommerce_product_thumbnails', 'enable_gallery_for_multiple_thumbnails_only', 5 );
function enable_gallery_for_multiple_thumbnails_only() {
global $product;
if( ! is_a($product, 'WC_Product') ) {
$product = wc_get_product( get_the_id() );
}
if( empty( $product->get_gallery_image_ids() ) ) {
remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
}
}
Source: https://stackoverflow.com/a/56238267/1788961
The problem is, that the function removes the thumbnail and the arrows.
Is there any way to keep the arrows?
And I know, that I could use display:none or maybe change the template file.
But I'm searching a solution with an own function.
if you want keep only arrow then you just put this code in functions.php:
// for arrow on single product page slide
add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/**
* Filer WooCommerce Flexslider options - Add Navigation Arrows
*/
function sf_update_woo_flexslider_options( $options ) {
$options['directionNav'] = true;
return $options;
}
And this code put it in your theme style.css file:
/*add for arrow on main image slide*/
ul.flex-direction-nav {
position: absolute;
top: 30%;
z-index: 99999;
width: 100%;
left: 0;
margin: 0;
padding: 0px;
list-style: none;
}
li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}
a.flex-next::after {
visibility:visible;content: '\f054';
font-family: 'Font Awesome 5 Free';
margin-right: 10px;
font-size: 20px;
font-weight: bold;
}
a.flex-prev::before {
visibility:visible;
content: '\f053';
font-family: 'Font Awesome 5 Free';
margin-left: 10px;
font-size: 20px;
font-weight: bold;
}
ul.flex-direction-nav li a {
color: black;
}
ul.flex-direction-nav li a:hover {
text-decoration: none;
}
.flex-control-nav .flex-control-thumbs{
display: none;
}
add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/**
* Filer WooCommerce Flexslider options - Add Navigation Arrows
*/
function sf_update_woo_flexslider_options( $options ) {
$options['directionNav'] = true;
$options['controlNav'] = false;
return $options;
}
The given approved answer is close but still resorts to CSS to hide the thumbnails.
You can disable controlNav directly on the same filter you use to show the arrows.
I'm trying to replace the WordPress login logo with the active theme logo. The active theme is using the default "Customizer" options for the logo.
I'm using the following code
function my_custom_login_logo() {
echo '<style type="text/css">
h1 a {background-image:url(https://broproud.com/wp-content/uploads/2018/08/cropped-150-Width-Logo.png) !important; margin:0 auto;}
</style>';
}
add_filter( 'login_head', 'my_custom_login_logo' );
I know, I can change the logo, with this code, but how can I display the active theme logo automatically? What kind of function is required?
Please, try this one
function my_custom_login_logo() {
$logo_url = ( function_exists( 'the_custom_logo' ) && get_theme_mod( 'custom_logo' ) ) ? wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' ) : false;
$logo_url = ( $logo_url ) ? $logo_url[0] : generate_get_option( 'logo' );
$logo_url = esc_url( apply_filters( 'generate_logo', $logo_url ) );
?>
<style type="text/css">
h1 a {
background-image:url(<?php echo $logo_url ?>) !important; margin:0 auto;}
</style>
<?php
}
add_filter( 'login_head', 'my_custom_login_logo' );
First step is to add an action to the login_enqueue_scripts, this is (as stated above) done by adding a code snippet to the themes function.php.
After that you'll find 2 things:
if you have a non-square logo it will become very small
if you click on it you'll go to wordpress.org
Both can be easily solved in the same snippet with pure css:
<style type="text/css">
body.login div#login h1 a {
background-image: url(PATH TO YOUR LOGO);
padding-bottom: 30px;
margin: 0;
width: 100%;
background-size: contain;
pointer-events: none;
}
</style>
<?php
} add_action( 'login_enqueue_scripts', 'custom_login_logo' );
My website is www.rosstheexplorer.com.
I use Wordpress. I use the Penscratch theme. I have never consciously tweaked / altered file manager.
I made a change to the custom-header.php and that change has caused me to be unable to load my site.
My webhost (Bluehost) said they could restore the file on file manager if I could tell them the directory for the file.
I have no idea what the directory is. I have always accessed the PHP files through Customise -> Appearance -> Editor.
Now I can no longer access Editor or Dashboard, my error has resulted in me being blocked from my site.
Can someone who has knowledge of the theme tell me where the custom-header.php file is kept?
The Bluehost customer service adviser earlier said
'I can see wp-blog-header.php but not custom-header.php.'
Last night I made a change to the custom-header.php file
The code was
<?php
/**
*
* #package Penscratch
*/
/**
* Setup the WordPress core custom header feature.
*
* #uses penscratch_header_style()
* #uses penscratch_admin_header_style()
* #uses penscratch_admin_header_image()
*/
function penscratch_custom_header_setup() {
add_theme_support( 'custom-header', apply_filters( 'penscratch_custom_header_args', array(
'default-image' => '',
'default-text-color' => '666666',
'width' => 937,
'height' => 300,
'flex-height' => true,
'wp-head-callback' => 'penscratch_header_style',
'admin-head-callback' => 'penscratch_admin_header_style',
'admin-preview-callback' => 'penscratch_admin_header_image',
) ) );
}
add_action( 'after_setup_theme', 'penscratch_custom_header_setup' );
if ( ! function_exists( 'penscratch_header_style' ) ) :
/**
* Styles the header image and text displayed on the blog
*
* #see penscratch_custom_header_setup().
*/
function penscratch_header_style() {
$header_text_color = get_header_textcolor();
// If no custom options for text are set, let's bail
// get_header_textcolor() options: HEADER_TEXTCOLOR is default, hide text (returns 'blank') or any hex value
if ( HEADER_TEXTCOLOR == $header_text_color ) {
return;
}
// If we get this far, we have custom styles. Let's do this.
?>
<style type="text/css">
<?php
// Has the text been hidden?
if ( 'blank' == $header_text_color ) :
?>
.site-title,
.site-description {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
<?php
// If the user has set a custom color for the text use that
else :
?>
.site-title a {
color: #<?php echo $header_text_color; ?>;
}
<?php endif; ?>
</style>
<?php
}
endif; // penscratch_header_style
if ( ! function_exists( 'penscratch_admin_header_style' ) ) :
/**
* Styles the header image displayed on the Appearance > Header admin panel.
*
* #see penscratch_custom_header_setup().
*/
function penscratch_admin_header_style() {
?>
<style type="text/css">
.appearance_page_custom-header #headimg {
background: white;
border: none;
font-family: "Roboto Slab", Georgia, Times, serif;
font-size: 15px;
max-width: 1092px;
}
#headimg .site-branding-wrapper {
border-bottom: 3px solid #eeeeee;
margin: 0 0 27px;
padding: 0 0 24px;
}
#headimg .site-branding-wrapper:before,
#headimg .site-branding-wrapper:after {
content: "";
display: table;
}
#headimg .site-branding-wrapper:after {
clear: both;
}
#headimg .site-branding {
clear: both;
margin-top: 54px;
margin-bottom: 14px;
text-align: center;
}
#headimg h1 {
clear: none;
display: inline-block;
font-size: 1.75em;
font-weight: normal;
letter-spacing: 1px;
line-height: 1;
margin: 0;
}
#headimg a {
text-decoration: none;
}
#desc {
color: #999 !important;
font-size: 16px;
font-weight: 300;
margin: 13px auto;
}
#headimg .site-logo {
max-height: 150px;
width: auto;
display: block;
margin: 0 auto 27px;
}
#headimg .custom-header {
border-radius: 5px;
display: block;
margin: 0 auto;
margin-bottom: 27px;
max-width: 100%;
height: auto;
min-height:100px;
}
</style>
<?php
}
endif; // penscratch_admin_header_style
if ( ! function_exists( 'penscratch_admin_header_image' ) ) :
/**
* Custom header image markup displayed on the Appearance > Header admin panel.
*
* #see penscratch_custom_header_setup().
*/
function penscratch_admin_header_image() {
$style = sprintf( ' style="color:#%s;"', get_header_textcolor() );
?>
<div id="headimg">
<div class="site-branding-wrapper">
<div class="site-branding">
<?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
<h1 class="displaying-header-text"><a id="name"<?php echo $style; ?> onclick="return false;" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<div class="displaying-header-text" id="desc"<?php echo $style; ?>><?php bloginfo( 'description' ); ?></div>
</div>
</div>
<?php if ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" alt="" class="custom-header">
<?php endif; ?>
</div>
<?php
}
endif; // penscratch_admin_header_image
I changed
'width' => 937,
to
'width' = 100%,
I believe this is causing my massive issue.
Since you've made changes and you're not able to enter your website anymore, I have 2 solutions that might work for you very well since it worked for me.
I had the same problem as you do, I've tried to change the headers, even functions.php which lead me to lose the access of my website.
NOTE: Everytime you do changes to the source files, make sure you have a back-up.
METHOD #1
Log in to your host
Get FTP access from your hosting provider
Use FileZilla as FTP manager to log into your host provider
Your website might be located in the "www" folder
Navigate to your theme > wp-content > theme > theme_name Open the source files you've made changes before and add the back-up code there.
Once you've changed the code of source files you've edited before (in this case custom-header.php), of course if you're sure that custom-header.php is the problem then you'll be able to log in back to your wordpress account.
METHOD #2
By using the FTP Client FileZilla which i mentioned before, download
the wp-content (all the images) and re-install wordpress.
Upon re-installation add the wp-content back to the original
directory and re-create the website.
Thank you for peoples suggestions. The problem is now fixed.
My website provider is BlueHost.
I logged into BlueHost and found CPanel.
Here you are able to make changes to your website PHP files.
I have unique design of wordpress backend and need to implement it. How can I add my own menu items there(see first attached image)? I know how to remove existing menus, but except removing I need to add my own menus. Is there a dynamic way with php to do it? (see image example here)
I tried to add my custom menus with jquery append() function but it is really bad solution. Any ideas please?
Add custom logo with user name in admin menu.
Demo link image : http://screencast.com/t/W8dcfhAgS
Add in functions file
add_action('admin_menu', 'codyfly_admin_menu');
function codyfly_admin_menu() {
global $menu;
global $current_user;
$url = 'http://codyfly.com';
$url1 = 'http://codyfly.com';
$username = '';
if ( is_user_logged_in() ) {
$username = $current_user->user_login;
}
$menu[0] = array( __(''), 'read', $url, 'my-logo', 'my-logo');
$menu[1] = array( __($username), 'read', $url1, 'my-logo1', 'my-logo1');
}
add_action('admin_head', 'codyfly_admin_style');
function codyfly_admin_style() {
echo '<link rel="stylesheet" href="' . get_template_directory_uri() . '/css/style-admin.css" type="text/css" media="all" />';
}
Add in style
#adminmenu a.my-logo,
#adminmenu a.my-logo1{
display: block;
background: url(https://dummyimage.com/140x40/fff/000) no-repeat center center;
background-size: 140px 40px;
width: 140px;
height: 40px;
margin: 0 auto;
padding: 10px 5px;
font-size: 14px;
font-weight: 400;
line-height: 18px;
}
#adminmenu a.my-logo1{
background: url(https://dummyimage.com/50x40/fff/000) no-repeat;
background-position: left center;
background-size: 50px 40px;
}
#adminmenu a.my-logo1 .wp-menu-name{
padding-left: 60px;
}
#adminmenu a.shomtek-logo div.wp-menu-name {
display: none;
}
For Add new menu in admin :
using add_menu_page we can add menu and add_submenu_page to add sub menu.
More detail
Below snippet to add admin new custom menu
add_action('admin_menu', 'register_event_menu');
function register_event_menu() {
add_menu_page('Event', 'Event', 'manage_options', 'event_details', 'event_function', 'dashicons-clipboard');
add_submenu_page('event_details', 'Event Setting', 'Event Setting', 'manage_options', 'event_setting', 'event_settings_function');
}
function event_function() {
echo "<div class='warp'>";
echo "<h2>Admin Page DalwadiWp</h2>";
echo "</div>";
}
function event_settings_function() {
echo "<div class='warp'>";
echo "<h2>Admin Page DalwadiWp</h2>";
echo "</div>";
}
For remove menu in admin list. Below snippet to remove Post menu in admin list.
More detail
add_action( 'admin_menu', 'custom_menu_page_removing' );
function custom_menu_page_removing() {
remove_menu_page( 'edit.php' ); //Posts
}
Add custom logo in admin menu.
http://screencast.com/t/dCvqzfxdup
add_action('admin_menu', 'codyfly_admin_menu');
function codyfly_admin_menu() {
global $menu;
$url = 'http://codyfly.com';
$url1 = 'http://codyfly.com';
$menu[0] = array( __(''), 'read', $url, 'my-logo', 'my-logo');
$menu[1] = array( __(''), 'read', $url1, 'my-logo1', 'my-logo1');
}
add_action('admin_head', 'codyfly_admin_style');
function codyfly_admin_style() {
echo '<link rel="stylesheet" href="' . get_template_directory_uri() . '/css/style-admin.css" type="text/css" media="all" />';
}
add style here
#adminmenu a.my-logo,
#adminmenu a.my-logo1{
display: block;
background: url(https://dummyimage.com/250x85/fff/000) no-repeat center center;
background-size: 140px 40px;
width: 140px;
opacity: 0.6;
height: 40px;
margin: 0 auto;
padding: 10px 5px;
}
#adminmenu a.shomtek-logo div.wp-menu-name {
display: none;
}
I'm building a stock photo site and it is (I think) good to show only pictures on the shops home page.
I figured out how to hide the Titles, Prices and Buttons (with remove_action) in my twentytwelve child theme (functions.php)
Now on adding masonry. I added a bit of code (a snippet from James Koster) to enqueue the WP build in Masonry script.
add_action( 'wp_enqueue_scripts', 'jk_masonry' );
function jk_masonry() {
wp_enqueue_script( 'jquery-masonry', array( 'jquery' ) );
}
I added the following code to my footer.php and I can see in the markup that it is loaded.
<script>
jQuery(document).ready(function($) {
$('#content').masonry({
itemSelector: 'products',
isAnimated: true;
});
});
</script>
No changes on my page.
I added this to my child theme styl.css:
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
#primary ul.products li.product{
margin-right: 3px;
margin-bottom: 3px;
}
Sadly, no effect on my page. No Masonry effects, no changes in the margins of the items. See screenshot.
The question is: were to go from here. I've searched the internet, found several possibilities but it seems to be that I don't understand it. (newbie) I'm looking for a result as shown here: lhotse masonry.
EDIT: html output
<div id="primary" class="site-content"><div id="content" role="main">
<div class="page-description"><div class="post-text"></div>
<p> </p>
</div>
<ul class="products">
<li class="post-70 product type-product status-publish has-post-thumbnail first sale taxable shipping-taxable purchasable product-type-simple product-cat-posters product-tag-adri instock">
<a href="http://localhost/shop/flying-ninja/">
<img width="600" height="600" src="http://localhost/wp-content/uploads/2013/06/poster_2_up-600x600.jpg" class="attachment-shop_catalog wp-post-image" alt="poster_2_up" />
</a>
</li>
<!-- Following items-->
</ul>
END EDIT
EDIT NR. 2
Yesterday I learned a method to override the standard woocommerce css files. If curious... throw me a line. However in the case of my problem it is only a bit of the solution. As formerly stated I want to use masonry on my woocommerce shoppage. The way it works looks like this:
As you can see there are 4 columns to fill the total widht of the surrounding div. However Masonry did not kicked in. When I resize my browser window to a smaller size the images are not resizing. (responsive) till a certain screen width. Then suddenly the layout changes to a 3 column layout and masonry kickes in. See screenshot.
The change to 3-columns must have something to do with css.... however I can't figure out what. Silly me.
Then when resizing the screen further (smaller) The layout went to two columns (that's understandable) but masonry stops working. See screenshot.
I did expect a working masonry and responsive layout.
END EDIT 2
Im totally stucked here.
Any help is very, very much appreciated. Thanks in advance.
At first I needed to override the standard woocommerce css behavior. As mevius suggested in the comments above this was a possibility. So I dequeued the styles, copied the files into my /childtheme/woocommerce/css folder en enqueued them on this new location. This way when an update is coming out the css files are not overwritten. Here is the code for the functions.php of my child theme:
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
function wp_enqueue_woocommerce_style(){
wp_register_style( 'woocommerce-layout', get_stylesheet_directory_uri() . '/woocommerce/css/woocommerce-layout.css' );
if ( class_exists( 'woocommerce' ) ) {
wp_enqueue_style( 'woocommerce-layout' );
}
wp_register_style( 'woocommerce-smallscreen', get_stylesheet_directory_uri() . '/woocommerce/css/woocommerce-smallscreen.css' ,array(),'4.0.1','only screen and (max-width: 768px)' );
if ( class_exists( 'woocommerce' ) ) {
wp_enqueue_style( 'woocommerce-smallscreen' );
}
wp_register_style( 'woocommerce-general', get_stylesheet_directory_uri() . '/woocommerce/css/woocommerce.css' );
if ( class_exists( 'woocommerce' ) ) {
wp_enqueue_style( 'woocommerce-general' );
}
}
To get masonry working I added the following to my functions.php just above the dequeueing and enqueuing of the woocommerce style sheets.
add_action( 'wp_enqueue_scripts', 'jk_masonry' );
function jk_masonry() {
wp_enqueue_script( 'jquery-masonry', array( 'jquery' ) );
}
and I put this code in my child themes footer.php:
<script>
jQuery(document).ready(function($) {
$('.products').masonry({
itemSelector: '.product',
isAnimated: true
});
});
</script>
Next I had to change some styles in the woocommerce css files.
I changed the rules below to: (just perform a search in your css files)
In woocommerce.css:
.woocommerce .products ul li,
.woocommerce ul.products li,
.woocommerce-page .products ul li,
.woocommerce-page ul.products li {
list-style: none;
width: 24.3%;
margin-right: 8px;
margin-bottom: 8px;
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
width: 100%;
height: auto;
display: block;
-webkit-transition: all ease-in-out .2s;
-moz-transition: all ease-in-out .2s;
-o-transition: all ease-in-out .2s;
transition: all ease-in-out .2s;
}
Some of the above ar just cosmetic.
In the woocommerce-layout.css file:
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
float: left;
margin: 0 8px 8px 0;
padding: 0;
position: relative;
width: 24.5%;
}
and in the woocommerce-smallscreen.css :
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 48%;
float: left;
clear: both;
margin: 0 2px 2px 0;
}
#media screen and (max-width: 450px) {
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 100%;
float: left;
clear: both;
margin: 0 0 2px 0;
}
}
As far as I can tell works this quite good. Responsivness is ok. Even the images are animating to their new positions when resizing the screen. Good luck with it.