I don't understand the style bug that I encounter, here is a picture.
Photo of the bug and the console.
This problem comes on mobile and tracker links on PC with the chrome browser.
I encounter it most often on the safari browser, chrome mobile.
I have a child theme here that called the stylesheet here is the code.
Code:
/**
* Theme functions and definitions
*
* #package HelloElementorChild
*/
/**
* Load child theme css and optional scripts
*
* #return void
*/
function hello_elementor_child_enqueue_scripts()
{
wp_enqueue_style(
'hello-elementor-child-style',
get_stylesheet_directory_uri() . '/style.css',
[
'hello-elementor-theme-style',
],
'1.0.0'
);
}
add_action('wp_enqueue_scripts', 'hello_elementor_child_enqueue_scripts', 20);
I tested to move the jQuery in the head it did not change anything and I call the jQuery by script in WordPress plugin snippets.
```````
`
I'm stalling, I don't know what to look for with this bug.
Thanks in advance for any ideas on how to get around it.
Related
How can I make my website theme's font the same as Wordpress Gutenberg visual editor default font family ?
Everytime I publish a new post, my website font will default back to the theme's font.
I want to use the Visual Editor font in Wordpress. How to do this?
If I'm not mistaking, Gutenberg default font is based out of your OS. This approach to fonts is used to effectively reset browsers default styling.
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
One of the possible approach would be using enqueue_block_editor_assets action hook to fire inside the editor and overwrite the font-family selector.
We can use .editor-styles-wrapper to overwrite the font-samilly and set it to whatever we want.
In the following example I chose the Ubuntu font-family from the Google Font website.
Now of course for production use, you would base your font out of your theme's font.
<?php
/**
* Fires after block assets have been enqueued for the editing interface.
* #link https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/
* In the function call you supply, simply use wp_enqueue_script and wp_enqueue_style to add your functionality to the block editor.
*/
add_action( 'enqueue_block_editor_assets', function() {
/**
* Register & Enqueue gfont_css.
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*/
wp_enqueue_style( 'gfont_css', 'https://fonts.googleapis.com/css2?family=Ubuntu:wght#400;700&display=swap', [], wp_get_theme()->version, 'all' ); //... replace by any font, if your theme isn't using Google Font just enqueue a font font from your theme's directory instead and remove the data_gfont_css function below.
/**
* Add mandatory Google Font rel='preconnect' <link> and required attributes to gfont_css
* Filters the HTML link tag of an enqueued style & add required attributes
* #link https://developer.wordpress.org/reference/hooks/style_loader_tag/
*/
add_filter( 'style_loader_tag', 'data_gfont_css', 10, 3 );
function data_gfont_css( $tag, $handle, $src ) {
if( $handle === 'gfont_css' ) {
$tag = str_replace(
"<link rel='stylesheet'",
"<link rel='preconnect' href='https://fonts.gstatic.com'>" . PHP_EOL . "<link rel='stylesheet'",
$tag
);
};
return $tag;
};
} );
/**
* Fires in head section for all admin pages.
* Overwrite default Wordpress Gutenberg default font-familly.
* #link https://developer.wordpress.org/reference/hooks/admin_head/
*/
add_action( 'admin_head', function() {
/**
* Get the current screen object.
* If the screen object is the Gutenberg editor then inject our overwrite.
* #link https://developer.wordpress.org/reference/functions/get_current_screen/
*/
if ( get_current_screen()->is_block_editor() )
echo "<style>.editor-styles-wrapper{font-family:'Ubuntu',sans-serif!important}</style>";
} );
?>
PHP > 7.1 required, anonymous functions used.
I've locally compiled the fontawesome.less to my main.min.css, and also changed the font path in variables.less, but I still having problem with loading the icons? Can't figure out why. I've successfully loaded it through this way on my local html file but can't get through on WordPress. BTW, I'm using WinLess as my LESS compiler.
You have to make sure that your final minified CSS is linking to the fonts. It sounds like you're missing the path to the fonts – check your inspector tool.
Another alternative is to load from a CDN, e.g.
/**
* Enqueue javascript
*
*/
if( !function_exists( "theme_js" ) ) {
function theme_js(){
wp_register_script( 'fontawesome', 'https://use.fontawesome.com/9a8a083038.js',
array('jquery'),
'4.7.1', true);
wp_enqueue_script( 'fontawesome' );
}
}
add_action( 'wp_enqueue_scripts', 'datonomy_theme_js' );
I am new to wordpress. I have been working on a plugin, and when I refreshed the admin page its white. I have enabled all the debugging options on the wp-config file and its still showing a white screen. I have deleted all the code on the plugin I was working on which I assumed caused the white screen and still nothing happens.
Does anyone know how I else I can debug this issue?
Below is my wp-config file. I don't know if I am missing anything or not.
**
* For developers: WordPress debugging mode.
*
* Change this to true to enable the display of notices during development.
* It is strongly recommended that plugin and theme developers use WP_DEBUG
* in their development environments.
*
* For information on other constants that can be used for debugging,
* visit the Codex.
*
* #link https://codex.wordpress.org/Debugging_in_WordPress
*/
error_reporting(E_ALL); ini_set('display_errors', 1);
define('WP_DEBUG', TRUE);
// Tells WordPress to log everything to the /wp-content/debug.log file
define('WP_DEBUG_LOG', true);
// Doesn't force the PHP 'display_errors' variable to be on
define('WP_DEBUG_DISPLAY', TRUE);
// Hides errors from being displayed on-screen
//#ini_set('display_errors', 0);
/* That's all, stop editing! Happy blogging. */
/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');
/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');
I found out the issue...
I didn't wrap ABSPATH using a string..
if(!defined(ABSPATH)){
exit;
}
i changed it to
if(!defined("ABSPATH")){
exit;
}
I am new to wordpress. Here is a task for me.
I need to active a plugin that is created already.
Now, when I try to active it, it gives me following error.
The plugin generated 239 characters of unexpected output during activation. If you notice “headers already sent” messages, problems with syndication feeds or other issues, try deactivating or removing this plugin.
So, first thing I did was google. One of the reasong I found was the white-space left behind code somewhere.
So, I followed it and removed blanks from my code. but did not help me out.
Now, I am putting my code herewith this post. Can anyone please help me out. its going really irritating.
<?php
/*
* Plugin Name: Lucky Draw
* Description: Plugin For Lucky Draw Voucher And Spinning
* Author: Techuz Infoweb Pvt. Ltd
*/
/* Die page if access directly from url */
defined('ABSPATH') or die('No script kiddies please!');
ob_start();
/* Runs when plugin is activated */
register_activation_hook(__FILE__, 'luckydraw_install');
/* = Use Wordpress functions in plugin files
---------------------------------------------------- */
if (file_exists(ABSPATH.'wp-load.php')) {
require_once(ABSPATH.'wp-load.php');
}
/* = Include Wordpress datatable class
---------------------------------------------------- */
if(!class_exists('WP_List_Table')){
require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' );
}
/* = Setup Tables in database
---------------------------------------------------- */
require_once(plugin_dir_path(__FILE__).'ws_setup.php');
register_activation_hook(__FILE__,'ws_luckydraw_setup_tables');
/* = Include All the plugin pages in ws_register_pages.php file
---------------------------------------------------- */
require_once(plugin_dir_path(__FILE__).'ws_register_pages.php');
/* = Include scripts and styles
---------------------------------------------------- */
add_action('admin_enqueue_scripts','ws_luckydraw_load_scripts');
if(!function_exists('ws_luckydraw_load_scripts')) {
function ws_luckydraw_load_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_media();
wp_enqueue_style('thickbox'); // call to media files in wp
wp_enqueue_script('thickbox');
wp_enqueue_script('media-upload');
wp_enqueue_style('jquery-ui-css', plugins_url('lucky-draw/css/jquery-ui.css'));
wp_enqueue_style('style', plugins_url('lucky-draw/css/ld_style.css'));
wp_enqueue_script('jquery-ui-js', plugins_url('lucky-draw/js/jquery-ui.js'));
wp_enqueue_script('jquery-datetimepicker-script', plugins_url('lucky-draw/js/jquery.datetimepicker.js'));
wp_enqueue_script('jquery-validate-js', plugins_url('lucky-draw/js/jquery.validate.js'));
wp_enqueue_script('common-js', plugins_url('lucky-draw/js/common.js'));
}
}
/* = Luckydraw Deactivation
---------------------------------------------------- */
if(!function_exists('ws_luckydraw_deactivate')):
function ws_luckydraw_deactivate() {
flush_rewrite_rules();
}
endif;
register_deactivation_hook(__FILE__, 'ws_luckydraw_deactivate');
?>
Thanks in advance.....
I dont know why? no ones gonna answer here. however I found one, it was silly mistake.
register_activation_hook(FILE, 'luckydraw_install');
was called twice, and above call was of no use for me. So I have removed above call, and error has gone.
The admin tab for (www.mkehome.com) module css is not working. When I click on MODULES, I get no css with result page. The controller is not calling the css for admin module UI. When I go to update from the list of updates needed, I still get no css with result page.
I have all the other UI's are working just fine.
The Hover over (JS) on topmenublock on homepage also stop working.
Any Idea?
what hoook do you use in backend for add CSS file?
Note:
public function install() {
if (!parent::install() OR
!$this->registerHook('displayHeader') OR
!$this->registerHook('displayBackOfficeHeader') ....
/**
* use this for Frontend
*/
public function hookDisplayHeader() {
$this->context->controller->addCSS(($this->_path) . 'css/styles.css', 'all');
}
/**
* use this for Backoffice
*/
public function hookDisplayBackOfficeHeader() {
$this->context->controller->addCSS(($this->_path) . 'css/admin-styles.css', 'all');
$this->context->controller->addJS(array(
_PS_JS_DIR_ . 'fileuploader.js',
));
}
Regards