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.
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' );
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
I'm in the process of transferring an HTML/CSS/jquery mockup of a website into a wordpress theme. The site runs perfectly as an HTML site and all of the css rules are selecting the correct html elements.
However, when I enqueue the scripts to Wordpress and look at the site, only certain rules are being applied, resulting in the website having a broken look. I know the css is being correctly enqueued since I can see it showing up in the page source for the website. When I look at specific elements with web inspector it shows that only certain rules are being implemented but not others. Why would transferring my css to Wordpress change how the css rules apply to almost identical HTML?
Below the code for how I'm enqueuing scripts. Note the dependency on normalize:
<?php
//
function theme_styles() {
wp_enqueue_style( 'normalize', get_template_directory_uri() . '/normalize.css' );
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css', array( 'normalize' ) );
}
// Load the theme JS
function theme_js() {
wp_register_script('stickynav',get_template_directory_uri() . '/js/stickynav.js', array('jquery'), '', true);
wp_register_script('nouislider',get_template_directory_uri() . '/js/nouislider.js', array('jquery'), '', true);
wp_register_script('bootstrap2',get_template_directory_uri() . '/js/bootstrap2.js', array('jquery'), '', true);
wp_register_script('foundation',get_template_directory_uri() . '/js/foundation.js', array('jquery'), '', true);
wp_register_script('orbit',get_template_directory_uri() . '/js/foundation.orbit.js', array('jquery'), '', true);
wp_register_script('modernizr',get_template_directory_uri() . '/js/modernizr.custom.49510.js', array('jquery'), '', true);
wp_enqueue_script('stickynav');
wp_enqueue_script('nouislider');
wp_enqueue_script('bootstrap2');
wp_enqueue_script('modernizr');
wp_enqueue_script('theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true);
if (is_home() && !is_paged() ) {
wp_enqueue_script('foundation');
wp_enqueue_script('orbit');
}
}
add_action( 'wp_enqueue_scripts', 'theme_js');
add_action('wp_enqueue_scripts','theme_styles');
// Enable custom menus
add_theme_support ('menus');
?>
This is the html/php I have in header.php:
<!DOCTYPE html>
<html>
<head>
<title>
<?php
wp_title( '-', true, 'right' );
bloginfo('name');
?>
</title>
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<?php wp_head(); ?>
</head>
<body>
<div id="header_top_wrapper">
<!-- header and subheader -->
<div class="row" id="header-top">
<div class="large-12 columns" id="my_logo">
<?php bloginfo( 'name'); ?>
</div>
<div class="large-6 columns large-uncentered" id="subheader">
<h4><?php bloginfo( 'description'); ?></h4>
</div>
</div>
<!-- sticky navigation bar -->
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="navigation_items">
<li class="nav-left">HOUSEPLANS.INFO</li>
<li class="nav-left">SEARCH PLANS</li>
<li class="nav-left">MOST VIEWED</li>
<li class="nav-right">ABOUT</li>
<li class="nav-right" id="site-search">
<form action="/search" method="get">
<input type="text" name="s" data-provide="typeahead" autocomplete="off" placeholder="Search";>
<i class="icon-search"></i>
</form>
</li>
</div>
</div>
</div>
</div><!-- end #header_top_wrapper -->
As an example of the selective application, these are the rules that are being applied to a link nested inside of an list item li on the HTML mockup
#sticky_navigation ul li a {
float: left;
margin: 0 0 0 5px;
height: 36px;
padding: 0;
line-height: 36px;
font-size: 12px;
font-weight: normal;
color: white;
}
#sticky_navigation ul {
list-style: none;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-style: normal;
}
And this is what is being applied to the same link in the Wordpress version of the same HTML and CSS
a {
color: inherit;
text-decoration: none;
line-height: inherit;
}
li {
text-align: -webkit-match-parent;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
}
Below is the CSS style for the area in question:
/* Logo and subheader */
#my_logo {
font:45px Georgia, Times, serif;
padding-left: 8px;
}
#subheader h4{
margin: 6px 0 0 0;
}
/* our menu styles */
#sticky_navigation_wrapper {
width:100%;
height:36px;
}
#sticky_navigation {
width:100%;
height:36px;
/* background: rgba(65, 105,255,.4); */
background: black;
z-index: 1030;
}
.navigation_items {
width:960px;
margin:0 auto;
}
.navigation_items ul{
padding-left: 0;
}
.navigation_items ul.pull-left:after {
clear: both;
}
#sticky_navigation ul {
list-style:none;
margin: 0;
/* padding:0; */
}
#sticky_navigation ul li{
margin:0;
display:inline-block;
}
#sticky_navigation ul li a{
/* float:left; */
/*margin:0 0 0 5px;*/
height:36px;
/* padding: 0; */
line-height:36px;
font-size:12px;
font-weight:normal;
color:white;
}
.nav-left{
padding-left: 10px;
padding-right: 20px;
}
.nav-right {
float: right !important;
padding-right: 10px;
padding-left: 20px;
}
What is going on here? I've been up all night trying to figure this out.
I'm enqueuing correctly, and according to the page source the exact same css is in the header as in my non-Wordpress version.
You have:
add_action('wp_enqueue_scripts','theme_styles');
But probably you should change it to:
add_action('wp_enqueue_style','theme_styles');
Ref: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Change
add_action('wp_enqueue_scripts','theme_styles');
to
add_action('wp_enqueue_style','theme_styles');
Also please remember that if you change or edit the css, you need to delete your cache and your visitors also needs to delete their browser's cache. But of course there's a better way to do it. Just fill in the "version" arguments on the wp_enqueue_style.
Do it like this:
add_action('wp_enqueue_style','theme_styles', array(), '1.0.0');
Every time you edit your css. Just change the version to '1.0.1' or '1.0.2' and so on. This will force your visitor's browser to get the latest version of the css.
Figured it out...
UL tags were missing for the li's - somehow deleted while inserting PHP.
DOH!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
In WordPress if I add "Photo Gallery" to my theme template using this code:
<?php echo do_shortcode('[gallery link="file"]'); ?>
Then WordPress Core will "use_default_gallery_style" cause its set to "true" in:
wp-include/media.php line 755 starts like:
if ( apply_filters( 'use_default_gallery_style', true ) )
$gallery_style = "
<style type='text/css'>
#{$selector} {
margin: auto;
}
#{$selector} .gallery-item {
float: {$float};
margin-top: 10px;
text-align: center;
width: {$itemwidth}%;
}
#{$selector} img {
border: 2px solid #cfcfcf;
}
#{$selector} .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
</style>";
$size_class = sanitize_html_class( $size );
$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";
$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
The problem is: The HTML code for my page will NOT get validated by online HTML validators cause WordPress Core prints CSS in HTML page, it's not using a separated CSS file which is the right way to do.
The CODE WordPress outputs to HTML looks like:
<style type='text/css'>
#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-1 img {
border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
</style>
My solution for now:
I know its NOT recommended to EDIT WordPress CORE files! BUT I have edited wp-include/media.php line 755
From:
if ( apply_filters( 'use_default_gallery_style', true ) )
To:
if ( apply_filters( 'use_default_gallery_style', false ) )
And I have updated/added this to my style.css:
#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-1 img {
border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
margin-left: 0;
}
My question: How can I set filter: use_default_gallery_style to false using function.php?
How to write a hook, function or action in function.php to remove or set use_default_gallery_style to false?
Whats the best way to do it?
Im new and don't want to mess with WordPress CORE files, it would be great if someone can help me or guide me with this function.
Thanks in advance :D
Try:
add_filter( 'use_default_gallery_style', '__return_false' );
as suggested here: http://wordpress.org/ideas/topic/wordpress-media-gallery-please-that-cant-be-true/page/6