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.
Related
So, I am trying to use the Rubik Mono One font on a website of mine, but it won't show up for anyone. I use #font face and tried clearing my cache ant it still did not work, here is the css:
#font-face {
font-family: 'Rubik Mono One';
src: url(https://fonts.gstatic.com/s/rubikmonoone/v9/UqyJK8kPP3hjw6ANTdfRk9YSN983TKU.woff2) format('woff2');
}
I just made 3 different tests with 3 different fonts including Rubik Mono One and everything is working fine.
Either you're enqueuing it badly. eg: You're not using <link rel="preconnect" href="https://fonts.gstatic.com">.
Or you're using some kind of framework like Bootstrap which is taking priority over your font.
Understanding dependencies and sequential order
Wordpress let you specify a dependency array upon script enqueuing.
$deps (string[]) (Optional) An array of registered stylesheet handles this stylesheet depends on. Default value: array()
Source # https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Your css enqueuing order should look like this:
framework → google font → stylesheet
If your stylesheet is enqueued last, your defined style will be higher up in the firing sequence.
As I mentioned, we also need to add <link rel="preconnect" href="https://fonts.gstatic.com"> for Google Font to actually work. We can do just that by using style_loader_tag wordpress filter, which will filters the HTML link tag of our enqueued Google Font.
Here is the final code. Do keep in mind that, if you're using a framework you must specify the dependency for the Google Font tag.
<?php
add_action( 'wp_enqueue_scripts', 'theme_fonts' );
function theme_fonts() {
if ( ! is_admin() ) {
/**
* 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=Rubik+Mono+One&display=swap', [], wp_get_theme()->version, 'all' );
/**
* 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;
};
/**
* Register & Enqueue style_css.
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*/
wp_enqueue_style( 'style_css', get_stylesheet_uri(), [ 'gfont_css' ], wp_get_theme()->version, 'all' );
};
};
?>
Dependencies are specified in betweens the brackets //... [ 'gfont_css' ] which is the equivalent to array( 'gfont_css' ).
Finally we can apply our font to our elements in our style.css, and we can add an !important statement to override as a redundancy. better not to do it tho if you're using multiple fonts.
body {
font-family: 'Rubik Mono One', sans-serif !important;
}
I'm trying to change the WordPress Admin Menus for Arabic only, but when i use the following function it makes changes for all languages - English & Arabic
<?php
/**
* GeneratePress child theme functions and definitions.
*
* Add your custom PHP in this file.
* Only edit this file if you have direct access to it on your server (to fix errors if they happen).
*/
function wd_admin_menu_rename() {
global $menu; // Global to get menu array
$menu[5][0] = 'أعلانات'; // Change name of posts to Ads
}
add_action( 'admin_menu', 'wd_admin_menu_rename' );
How can I change it only for Users with Arabic Dashboard?
function wd_admin_menu_rename() {
// check for site language
$lang = get_option('WPLANG');
if($lang == 'ar')
{
global $menu; // Global to get menu array
$menu[5][0] = 'أعلانات'; // Change name of posts to Ads
}
}
add_action( 'admin_menu', 'wd_admin_menu_rename' );
What is the proper method for adding a stylesheet to the Timber starter theme for WordPress?
I would normally enqueue my stylesheet in functions.php. But is this the right way?
You can add your stylesheets in functions.php (the Wordpress traditional way) or use a custom function (to be added in functions.php) that allows you to add the stylesheets directly into the twig templates. This way you can enqueue a stylesheet only where it is actually used.
The Timber starter theme has a specific section for custom functions in the functions.php file.
Function to add to functions.php:
/** This is where you can add your own functions to twig.
*
* #param string $twig get extension.
*/
$function = new Twig_SimpleFunction('enqueue_style', function ($handle, $src) {
wp_enqueue_style( $handle, get_stylesheet_directory_uri() . '/static/css/'.$src);
});
$twig->addFunction($function);
change /static/css/ to suit your needs. Now you can enqueue the styles directly into your twig templates like this:
{{ enqueue_style('global','global.css') }}
If you need to add external stylesheets you can use a slightly different function:
/** This is where you can add your own functions to twig.
*
* #param string $twig get extension.
*/
$function = new Twig_SimpleFunction('enqueue_style_ext', function ($handle, $src) {
wp_enqueue_style( $handle, $src);
});
$twig->addFunction($function);
and then enqueue like this:
{{ enqueue_style_ext('tachyons','https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.11.1/tachyons.min.css') }}
The original function was posted in a timber github issue
I want to add font awesome icons into Custom Post Type UI Menu Icon area but I couldn't add. How can I do any idea, guys? Thank you.
if you can paste these files into the functions.php and style.css and know the custom post type class looking at the body class given by wordpress
To use Font Awesome for a WordPress Custom Post Type, you’ll need to write a little CSS: just target a CPT menu item (inspect the WordPress admin sidebar to find the correct CSS ID) like this:
#adminmenu #menu-posts-custom_post_type_name .wp-menu-image:before {
content: "\f135"; //find this by clicking on the individual icon on Font
Awesome's site.
font-family: 'FontAwesome' !important;
font-size: 18px !important;
}
Next, add those styles to the WordPress admin by using the admin_head hook:
function namespaced_admin_styles_function() {
echo '<link href="/link/to/admin-styles.css" rel="stylesheet">';
}
add_action('admin_head', 'namespaced_admin_styles_function');
…and you’re off and running! Well, not quite. You still need to add the Font Awesome stylesheet to both the WordPress admin and the front-end of your site. Fortunately, you can kill two birds with one stone this way:
function FontAwesome_icons() {
echo '<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">';
}
add_action('admin_head', 'FontAwesome_icons');
add_action('wp_head', 'FontAwesome_icons');
Refrence from:https://cnpagency.com/blog/3-ways-to-use-icon-fonts-in-your-wordpress-theme-admin/
in your post type array add fontawsome classes like so :
array(
'menu_icon' => 'dashicons-fa fa-book', /* the icon for the custom post type menu. uses built-in dashicons (CSS class name) */
);
Then add these hooks in your functions.php
add_filter( 'sanitize_html_class', function ( $sanitized, $class, $fallback ) {
if ( strpos( $class, 'fa' )
|| strpos( $class, 'fas' )
|| strpos( $class, 'fal' )
|| strpos( $class, 'fab' )
|| strpos( $class, 'far' )
) {
$class = str_replace( 'dashicons-', '', $class );
return $class;
}
return $sanitized;
}, 0, 3 );
and add font awsome in your admin document:
function fontawesome_dashboard() {
wp_enqueue_style('custom-style', get_template_directory_uri().'/assets/styles/all.min.css');
wp_add_inline_style( 'custom-style', '.fa:before,.fas:before,.fal:before,.fab:before,.far:before{font-family:inherit!important;}' );
}
add_action('admin_init', 'fontawesome_dashboard');
In Custom Post type plugin, You can not add font awesome icons. You must be use dashicon class name or icon image url.
Ref. for dashicon class - https://developer.wordpress.org/resource/dashicons/
you can download icon from different different website and use it.
Ref. - http://www.flaticon.com/packs/font-awesome.
I hope it's usefull to you.
you can download font awesome icons as png and upload in wordpress and write full url http://www.example.com/wp-content/uploads/2014/11/your-cpt-icon.png
like above...
icon size must be 20px...
or you can use dashicon.it automatically supports dashicons.
chck this image http://dev.savivatechnologies.com/hpa/wp-content/uploads/2017/07/dashicon.png
Hopes this will help you...
I would like to change the logo redirection when clicked. Right now when you click on the logo, the user is redirected to the homepage but I want it to redirect to another site. How do I do this?
I agree with Stu Mileham. Another way to implement what you are asking for would be to use JavaScript / jQuery.
Save the following code to a .js file (eg. pageRedirect.js, let's say placed in a js folder inside your theme's root folder):
(function($) {
$(document).ready(function() {
$('#pageLogo').on( "click", function(event) {
event.preventDefault();
window.location.assign("http://www.google.com/");
});
});
})(jQuery);
To make the previous code work, you would have to select somehow the page logo via jQuery.
On the previous code this is achived via $('#pageLogo') since I have made the assumption that your logo has an id with the value pageLogo.
Of course, to enable your theme to use this pageRedirect.js file, you have to enqueue it by placing the following code to your theme's functions.php file:
/**
* Enqueue pageRedirect script.
*/
function pageRedirect_scripts() {
wp_enqueue_script( 'page-redirect-js', get_template_directory_uri() . '/js/pageRedirect.js', array('jquery'), '20150528', true );
}
add_action( 'wp_enqueue_scripts', 'pageRedirect_scripts' );
Code Explanation:
//-jQuery selects html element with id='pageLogo'
//-when it is clicked, it calls a function in which it passes the event
$('#pageLogo').on( "click", function(event) {
//prevents page from redirecting to homepage
event.preventDefault();
//redirects to your desired webpage
window.location.assign("http://www.google.com/");
});
If you don't have the option to change the link from admin then you will have to edit your theme's header.php file (most likely, depends on how the theme is built though).
Many themes have a tag similar to the following:
<img src="logo.jpg">
You would need to change this to:
<img src="logo.jpg">
I've added the target tag to open the site in a new window, this is my personal preference when re-directing to a different site but it's optional.
Your theme files might look very different to this, it's impossible to know for sure without seeing some code, but this should give you an idea.
Also be aware that your changes could be overwritten by a theme update. This can be avoided by creating a child theme.
https://codex.wordpress.org/Child_Themes
Depends on your theme
Some theme creators gives you the possibility to change the link from admin
Some theme creators just believe that clicking the logo you need to go on homepage - so you need to edit the theme
Depending upon the theme you are using, you can try one of the following options.
Explore the admin options and see if the theme provides a direct way to change the link on the logo.
If not found in admin options, try looking for the code in header.php. Do an inspect element on your logo and see the html code surrounding the logo file, If the code is directly present in header.php, your task is simple. Just change the code to update the URL, instead of reading it from home_url(). Something like <a href="<?php echo home_url();?>"> will need to be replaced with <a href="https://www.example.com">
The other option to look for is get_custom_logo. Some themes get the logo code from this function. You can apply a filter to change the home_url just before this method is called in your theme and then remove filter afterwards. Or else you can copy the code from wordpress and update it with a differently named function say get_custom_link_logo in functions.php then where'ver your theme is using get_custom_logo you can use get_custom_link_logo instead of that.
function get_custom_link_logo ( $blog_id = 0 ) {
$html = "";
$switched_blog = false;
if ( is_multisite() && ! empty( $blog_id ) && (int) $blog_id !== get_current_blog_id() ) {
switch_to_blog( $blog_id );
$switched_blog = true;
}
$custom_logo_id = get_theme_mod( 'custom_logo' );
// We have a logo. Logo is go.
if ( $custom_logo_id ) {
$custom_logo_attr = array(
'class' => 'custom-logo',
'itemprop' => 'logo',
);
/*
* If the logo alt attribute is empty, get the site title and explicitly
* pass it to the attributes used by wp_get_attachment_image().
*/
$image_alt = get_post_meta( $custom_logo_id, '_wp_attachment_image_alt', true );
if ( empty( $image_alt ) ) {
$custom_logo_attr['alt'] = get_bloginfo( 'name', 'display' );
}
/*
* If the alt attribute is not empty, there's no need to explicitly pass
* it because wp_get_attachment_image() already adds the alt attribute.
*/
$html = sprintf( '%2$s',
esc_url( "https://www.example.com" ),
wp_get_attachment_image( $custom_logo_id, 'full', false, $custom_logo_attr )
);
}
// If no logo is set but we're in the Customizer, leave a placeholder (needed for the live preview).
elseif ( is_customize_preview() ) {
$html = sprintf( '<img class="custom-logo"/>',
esc_url( "https://www.example.com" )
);
}
if ( $switched_blog ) {
restore_current_blog();
}
/**
* Filters the custom logo output.
*
* #since 4.5.0
* #since 4.6.0 Added the `$blog_id` parameter.
*
* #param string $html Custom logo HTML output.
* #param int $blog_id ID of the blog to get the custom logo for.
*/
return apply_filters( 'get_custom_logo', $html, $blog_id ); }
This might not cover all the use cases, but you get the idea. Depending upon the theme you'll have a similar solution for your case. The important thing to figure out which case you fall under will be to identify the code where html for your logo is getting added. header.php is a good starting point.
Use this javascript in the header or footer of your theme:
<script>
document.getElementsByClassName("site-logo")[0].getElementsByTagName('a')[0].href="https://www.test.com";
</script>
i am assuming that site-logo is the class name of your LOGO.