How do I add a font to the Divi wordPress theme? The font is from fonts.com and is called Vectora. Should I use a plugin or custom code? The site I would like to add it to is stewards.degrootdesign.com
Best approach to override the function in child theme by simply adding this code in child theme and your font will be appear in Divi theme editor.
/*
* Fonts Function for fetching all fonts.
*
*/
if ( ! function_exists( 'et_builder_get_google_fonts' ) ) :
function et_builder_get_google_fonts() {
$google_fonts = array(
'customfontname' => array(
'styles' => '400',
'character_set' => 'latin',
'type' => 'sans-serif',
),
);
return apply_filters( 'et_builder_google_fonts', $google_fonts );
}
endif;
Late answer - but I'll bet it's helpful to someone as i still couldn't find an answer to this anywhere today:
To add a custom font to the Divi theme (i'm on V3) font selector dropdowns, you'll need to follow the following steps:
Add your webfont folder to the Divi theme folder eg:
Divi/webfonts
Then reference it from header.php before the closing head tag eg:
<link rel="stylesheet" href="<?php echo $template_directory_uri; ?>/webfonts/customfontname.css" type="text/css" charset="utf-8">
Now, in both: themes/Divi/includes/builder/core.php and themes/Divi/epanel/custom_functions.php
- find the following line:
$google_fonts = array(
and add your font after it, as per the other fonts listed - eg:
'customfontname' => array(
'styles' => '400',
'character_set' => 'latin',
'type' => 'sans-serif',
),
This worked a charm for me. The font should be usable and also should appear in the Font selection dropdowns in the Divi Editor with the other google fonts.
Note: I know this should be done via a child theme and will be overwritten with a Divi theme update but my php and wordpress-fu is too poor to work out how to manage this just yet.
Divi is a commercial WordPress theme that not everyone has access to, so we don't know the particulars of how the theme is designed; so this is the wrong place to ask, and you should to ask Divi theme support for help. You bought the theme, and support is included in the cost.
Their advice will probably include making a child theme; see Child Themes « WordPress Codex. And/or possibly a plugin to make CSS (and font) changes easy, such as https://wordpress.org/plugins/simple-custom-css/
(Assuming that you have the latest version update of Divi):
Go to Appearance -> Customize -> General Settings -> Typography
You should see what is in the screenshot below. From there you can change the header and body font
:) Hope this helps
Screenshot for Typography
Related
Under theme customisation, I'm unable to set a video as the Header Media. This theme is being created from scratch so I've currently only got the following files: header.php, footer.php, functions.php, sidebar.php, index.php
I've tried setting video to true in the theme support section for wordpress. I've tried copying the implementation in the twentyseventeen theme.
I've tried different combination of parameters in the custom-header theme support function.
functions.php:
add_theme_support( 'custom-header', array(
'video' => true,
) );
header.php:
<?php the_custom_header_markup(); ?>
Wordpress is currently giving me the following error:
"This theme doesn’t support video headers on this page. Navigate to
the front page or another page that supports video headers."
In my functions.php I was loading jQuery like the following:
wp_enqueue_script('wptheme-jquery-js-cdn', 'https://code.jquery.com/jquery-3.3.1.slim.min.js');
This caused jQuery to load first. To solve this, I forced it to be loaded in the footer.
wp_enqueue_script('wptheme-jquery-js-cdn', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', array(), '', true);
This is also better practice to stop it blocking rendering.
I have a WordPress website and use the "AMP for WordPress" plugin.
In the article from my website I use the icon from Fontawesome. If I open the site using the desktop, fontawesome works fine, but when I try to use my phone and display it in the AMP, the fontawesome icon does not show.
Can someone help me?
Thanks in advance.
I believe if the integration with the font-awesome fonts is done correctly, the plugin which you have installed should not conflict with this.
There's a handful of hooks (source: https://ampforwp.com/tutorials/article/hooks-in-ampforwp/) that the AMP plugin contains, specifically the one below which I'm hooking onto (amp_post_template_data). If you add something like this within your functions.php file of your theme, the plugin should know how to utilize the fonts accordingly:
add_filter( 'amp_post_template_data', function( $data ) {
$data['font_urls'] = array(
'fontawesome' => 'https://maxcdn.bootstrapcdn.com...';
);
return $data;
} );
Be sure to replace the actual URL with the font-awesome URL, or your localized file if you have one installed on your theme. Good luck! Hope this helps.
You can add custom fonts easily try this-
add_filter( 'amp_post_template_data', 'wp_amp_add_font_awesome_icons' );
function wp_amp_add_font_awesome_icons( $data )
{
$data['font_urls']['fontawesome'] = get_stylesheet_directory_uri() . '/font-awesome/css/font-awesome.min.css';
return $data;
}
As you see in following pictureenter image description here.
woocomerce css styles has magically over ride my template css (after using yith tab manager permiume (disabling doesn't help).
You can see that disable those styles from woocomerce.css will prove that, y template style is still there.
How can I prevent from this issue ?
Here is the website link for that page
amatistrading.
I used this code in functions.php of template but it didn't work:
:// Disable WooCommerce's Default Stylesheets
function disable_woocommerce_default_css( $styles ) {
// Disable the stylesheets below via unset():
unset( $styles['woocommerce-general'] ); // Styling of buttons, dropdowns, etc.
// unset( $styles['woocommerce-layout'] ); // Layout for columns, positioning.
// unset( $styles['woocommerce-smallscreen'] ); // Responsive design for mobile devices.
return $styles;
}
add_action('woocommerce_enqueue_styles', 'disable_woocommerce_default_css');
i couldnt use that code(in main comment) but i found a way to solve problem. ( i will put the right code if i find any),first we can delete that stylesheet content, or act like me: disable all plugins(every single plugin) try to replace woocommerce files with orginal, then re active plugins, this method worked for me, it seems changing woocommerce files made this problem.
I am just diving into the Genesis Framework.
In a normal theme, if you want to edit the header, you'd open the header.php file.
But in genesis, the header file is not in the child theme. I have looked around and found a way to add custom header support, but i need some guidance.
The code below is to enable custom header support. I assume this goes into the functions.php file. But how to i actually add code here? What if i want to say pull in a custom field, or add a div to this section, or bring a slider in? How to i actually use this code to let me add html and php into the child theme header?
/** Add custom header support */
add_theme_support( 'genesis-custom-header',
array( 'width' => 960, 'height' => 100, 'textcolor' => '444',
'admin_header_callback' => 'minimum_admin_style' ) );
First you need to remove the header that is currently there. All of this goes into functions.php in your child theme
remove_action('genesis_header','genesis_do_header');
Then is it as simple as building a function to act as your new header.
function injectHeader() { ?>
<div id="title-area">
<h1>Title Here</h1>
<nav>Nav Here and so on</nav>
<p>You can add whatever you want</p>
</div>
<?php }
I normally try to use the same class and ID names so I can preserve some of the built in styles and save myself some work but that's up to you. All you have to do is add whatever you want in the function and call it back in like this,
add_action('genesis_header','injectHeader');
Hope that helps!
Just stumbled upon this post asking the same question. Great solution. An even easier way to customize certain parts of a genesis powered site is using the Genesis Simple Hooks plugin. Just do a search, it's awesome.
How can we use default wordpress text editor for my wordpress plugin.Any suggections please?
The WordPress Text editor is an application of the TinyMCE Editor. You can utilize the files located in wp_includes/js/tinymce and create an instance of the editor on your own, according to the documentation.
Check out this article for example instructions:
http://wordpress.org/support/topic/how-i-can-use-tinymce-for-my-own-plugin
As of Wordpress 3.3 the_editor has deprecated in favor of wp_editor. wp_editor uses the new media uploader and takes advantage of all the new features of Wordpress 3.5.x Documentation here: http://codex.wordpress.org/Function_Reference/wp_editor
A very good example of how to use it can be found at Wptuts+ here: http://wp.tutsplus.com/articles/tips-articles/quick-tip-using-wp_editor/
very easy try this code
it's working
wp_editor( $distribution, 'distribution', array( 'theme_advanced_buttons1' => 'bold, italic, ul, pH, pH_min', "media_buttons" => true, "textarea_rows" => 8, "tabindex" => 4 ) );
Very easy:
<?php wp_editor( $content, $editor_id ); ?>
This will generate a lot of html tags. But the one you will be interested in is the textarea with its name set to $editor_id. So when the form is submitted, you can save that content.
You can find more info here: https://codex.wordpress.org/Function_Reference/wp_editor