I am creating a wordpress theme and trying to set a custom background image and allow an admin to change the background image, but my image is not appearing. What can be missing?. Below is my functions.php
<?php
function scripts_enqueue() {
wp_enqueue_style('body',get_template_directory_uri().'/css/styling.css',array(),'1.0.0 ','all');
}
add_action('wp_enqueue_scripts','scripts_enqueue');
function theme_setup() {
add_theme_support('menus');
add_theme_support('custom-background');
}
add_action('init','theme_setup');
register_nav_menu('Main Menu','Main menu');
register_nav_menu('Footer Menu','footer menu');
?>
(1)
Add theme support on the after_setup_theme action, and provide defaults:
function my_custom_background_setup() {
$args = array(
'default-color' => 'FFFFFF',
'default-image' => '',
);
add_theme_support( 'custom-background', $args );
}
add_action( 'after_setup_theme', 'my_custom_background_setup' );
(2)
Remember to call body_class() in your header.php:
<body <?php body_class(); ?>>
Related
I am just learning Wordpress development and am building a theme. I use bootstrap and my own custom css. I know custom files are to be declared AFTER bootstrap, but this hasn't gotten my css going.
My function's code:
<?php
function smartwp_remove_wp_block_library_css(){
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
wp_dequeue_style( 'wc-block-style' ); // Remove WooCommerce block CSS
}
add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css', 100 );
function load_stylesheets() {
wp_register_style('bootstrap',get_template_directory_uri() . '/css/bootstrap.min.css',
array(),false,'all');
wp_enqueue_style('bootstrap');
wp_register_style('style',get_template_directory_uri() . '/style.css',
array(),false,'all');
wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
function loadjs() {
wp_register_script('customjs',get_template_directory_uri() . '/js/scripts.js','',true);
wp_enqueue_script( 'customjs');
}
add_action('wp_enqueue_scripts','loadjs');
You see I tried also some code I found on the net to disable Guttenberg css, but to no effect. I see from the console that my style.css is included and I see bootstrap working.
My css isn't much yet:
/*
Theme name:
Author:
*/
body {
background: "#ff03ab";
}
I must be doing something wrong, typos maybe? Also tried clearing browser history, and variety of css elements in my style.css
To make sure the custom CSS file is loaded after bootstrap, you have to add bootstrap as a dependency in wp_register_style():
https://developer.wordpress.org/reference/functions/wp_register_style/
wp_register_style( 'style', get_template_directory_uri() . '/style.css', array( 'bootstrap' ), false, 'all' );
I am using wordpress and I wanted to create a scroll to top button so I added this code to a HTML widget in the header widget area of my site :
<div id="top"></div>
<style>html {
scroll-behavior: smooth;
}</style>`
I then added this custom menu item to the footer menu : #top.
The scroll works great, except that it doesn't scroll to the very top of the page. But in my case, instead of a sticky header I have a social icons header, see screenshot : https://ibb.co/NFsgJ1H.
Can someone help me add code that will make scrolling until the top of this header ?
Thank you in advance.
I now have a plugin that's doing the scroll offset, this is why I asked this question, I'm trying to get rid of it because it can be done in a more efficient way. Anyway there's this code in a JS file of this plugin. When I delete it it doesn't affect the smooth scrolling and the scroll offset.
app.scroll = function( scrollTo ) {
app.$html_and_body.stop().animate({
'scrollTop': scrollTo // scroll and offset
}, 900, 'swing', function( evt ) {
app.initialScroll = app.isScrolling = false;
app.$html_and_body.trigger( 'hash_link_scroll_offset.complete', evt );
} );
I also found this code in a php file of the plugin, and when I delete it the smooth scrolling and scroll offset is stopped, so perhaps we can somehow combine the code and use it :
public function enqueue_js() {
$min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
wp_enqueue_script( 'hash_link_scroll_offset', self::$url . "assets/js/hash-link-scroll-offset$min.js", array( 'jquery' ), self::VERSION, true );
wp_localize_script( 'hash_link_scroll_offset', 'hlso_offset', array( 'offset' => get_option( 'hash_link_scroll_offset', 0 ) ) );
}
And were should I enter the JS code ? And would it work If I changed the code to something like this :, and then instead of the code in the functions.php I'll keep the #top menu item ?
const toTop = document.getElementById('toTop');
toTop.onclick = () => {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
}
<div id="top"></div>
You can try to use javascript something like this. can refer to this document for this one
const toTop = document.getElementById('toTop');
toTop.onclick = () => {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
}
<button id="toTop">Go To Top</button>
To include that code in the wordpress, you can add this to your functions.php
add_action('wp_footer', 'add_go_to_top');
function add_go_to_top()
{
?>
<script>
window.onload = () => {
// add above javascript here
}
</script>
<?php
}
I'm developing wordpress theme using Understrap, with using customstrap child theme of livecanvas. It uses Bootstrap 4.
I developed my theme, but there is unnecessary border when I clicked the content area on theme. I checked the code on browser using inspects but i could not find the code that caused this problem.
here is understrap repo: https://github.com/understrap/understrap
and my page.php
<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* #package understrap
*/
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
get_header();
$container = get_theme_mod( 'understrap_container_type' );
?>
<div class="wrapper" id="page-wrapper">
<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">
<div class="row">
<!-- Do the left sidebar check -->
<?php get_template_part( 'global-templates/left-sidebar-check' ); ?>
<main class="site-main" id="main">
<?php
while ( have_posts() ) {
the_post();
get_template_part( 'loop-templates/content', 'page' );
}
?>
</main><!-- #main -->
<!-- Do the right sidebar check -->
<?php get_template_part( 'global-templates/right-sidebar-check' ); ?>
</div><!-- .row -->
</div><!-- #content -->
</div><!-- #page-wrapper -->
<?php
get_footer();
Which selector that I need to use to prevent this problem?
Here is the image of this be like:
1- 1st image is Default
2- 2nd image When I clicked the content area
When I clicked the content area
I'm pretty sure this is outline property in CSS.
As we cannot see your code right now, for debugging I would suggest to try pasting this in your styles to check if that helps:
* {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
Look at the following code there tabindex is used for keyboard accessibility. :focus is triggered Where tabindex is used.
<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">
The div mentioned above has an id content so if you'd like to remove outline only from there use the following CSS code.
#content { outline: none !important; }.
Don't use asterisk with :focus like *:focus to solve this then that might also remove outline from some other styles.
When I add the code below to custom css in wordpress:
*:focus{outline: none !important;}
It works.
But I don't understand that why it does not work when I add it into style.css
If I use the Wordpress text editor and put tags into the html, when it renders, it displays the literal code inside the style tags. This seems to be because Wordpress will strip out the style tags - I can see them being removed/stripped out as soon as I click update. Does anyone know why the style tags are being stripped out of the document after it gets processed by Wordpress?
This is happening when I use the following editor view:
The style tag is stripped so then we get literal text:
The WordPress tinymce stripe out some tag inlcuding style tag.
You can add support for style tag.
Add the following code in functions.php
add_filter('tiny_mce_before_init', 'prefix_filter_tiny_mce_before_init');
function prefix_filter_tiny_mce_before_init( $options ) {
if ( ! isset( $options['extended_valid_elements'] ) ) {
$options['extended_valid_elements'] = 'style';
} else {
$options['extended_valid_elements'] .= ',style';
}
if ( ! isset( $options['valid_children'] ) ) {
$options['valid_children'] = '+body[style]';
} else {
$options['valid_children'] .= ',+body[style]';
}
if ( ! isset( $options['custom_elements'] ) ) {
$options['custom_elements'] = 'style';
} else {
$options['custom_elements'] .= ',style';
}
return $options;
}
I am currently migrating a site to Wordpress from a custom-created HTML/CSS/Bootstrap website. I have downloaded the Navwalker .php extension that automatically converts the Bootstrap navbar to Boostrap.
Here is the gap I am referring to. http://imgur.com/LfUEF6o
Where specifically in my CSS can I fix this problem?
Here is the php section in my header.php file:
<?php
$args = array(
'menu' => 'header-menu',
'menu_class' => 'nav nav-pills nav-justified navbar-inverse',
'container' => 'false',
'walker' => new wp_bootstrap_navwalker()
);
wp_nav_menu ( $args );
?>
If anyone could direct me toward the right place, I would greatly appreciate it.
Try adding this to your theme's style.css file:
.dropdown-menu {
margin-top: 0;
}
Feel free to play with the value of 0 so that it lines up nicely with your navbar. For example, you could instead use -10px or 10px.