What I am trying to achieve:
I want to use custom icons on my Wordpress website (including in the Admin Menu).
What I have done so far
I have set up an account on fontastic.me and enqueued the font using the following in functions.php hooked to 'admin print styles'
wp_enqueue_style('fontastic-css', 'https://file.myfontastic.com/<mycode>/icons.css');
I've set the name of my icons on fontastic me to be 'dashicons' because this way you can directly use them in the admin menu e.g.
add_menu_page(
'Page Title',
'Menu Title',
'Capability',
'menu_slug',
[ $this, 'call_back' ],
'dashicons-custom-icon-name',
1
);
If you call them something else e.g. custom-icons you can't use them so easily.
I have also tried enqueuing in other ways but the issue is the same as I document below.
What's the issue?
However, by doing this I am evidently overwriting / blocking / generally interfering with the existing 'dashicons' library provided with Wordpress.
This means any dashicons throughout Wordpress that are not in my library fail to load and I am left with empty squares in their spaces.
Any help identifying how I can add to the dashicons library, rather than overwrite it would be much appreciated. Thanks.
A solution to this problem is to do the following:
1) Go back to fontastic.me and change the font so it is no longer 'dashicons' but something else e.g. 'customicons'.
2) Remove the code 'dashicons-custom-icon-name' from the menu function - let it default to the standard 'dashicons-admin-generic'.
3) Download your font from fontastic me and open it an an editor - so you have a reference of all of the icon codes - I can't find these on the website.
4) Add the following to your style sheet for every icon you would like to target
#adminmenu li.toplevel_page_bnfo_database div.wp-menu-image.dashicons-admin-generic:before { // change 'menu_slug' to whatever your menu slug is
font-family: yourfont; // this needs to be whatever you called it on fontastic.me
content: "\62"; // Whichever icon you want to show.
}
Why this isn't a perfect solution
This seems to require more code and be more cumbersome than the solution I was originally pursuing.
However, it is the solution that plugin providers (e.g. WooCommerce) are using so might be the best bet.
Related
I am trying to build a Wordpress blog, which after a couple complete revamps i was starting to get quitte happy with the shaping site, unfortunately i have at some point made one paragraph block the global style and hours of trying to solve it now made everything worse.
When i try to remove it i was shocked to see that it doesn't seem like it's possible. At least on the surface. Worse, this cant be edited manually, nor i can change through CSS myself because the global style overrules everything, even when i add important.
Is there any way i can remove this global styles, without ruining my site?
I have tried to globally style different P blocks, even created new ones and done the same but this has made everything worse like i said.
To dequeue only the default WordPress stylesheet, you can use the wp_enqueue_scripts action hook to remove the `wp_enqueue_style() call for the default stylesheet. Here's an example of how to do it:
function remove_default_stylesheet() {
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 100 );
This code removes the default wp-block-library stylesheet that is included in WordPress. You can modify this code to remove other default stylesheets that you want to dequeue. Note that removing the default WordPress stylesheet may affect the styling of your site, so it's a good idea to have a plan for replacing it with your own styles if you choose to do so.
I'm making a Wordpress template and I want to have options in the built in Wordpress Customizer for things like accent color, custom font, etc. that will then be used throughout the template. However, this means that I can't just code static CSS and would have to pass a variable in somehow. How would I go about doing this?
Found an answer at https://www.cssigniter.com/how-to-create-a-custom-color-scheme-for-your-wordpress-theme-using-the-customizer/.
Here's the most relevant code:
function theme_enqueue_styles() {
wp_enqueue_style( 'theme-styles', get_stylesheet_uri() ); // This is where you enqueue your theme's main stylesheet
$custom_css = theme_get_customizer_css();
wp_add_inline_style( 'theme-styles', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
theme_get_customizer_css() here is a custom function that returns a string of CSS that directly overwrites any code in the main stylesheet pertaining to colors, for example. Because it is generated in PHP, get_theme_mod() can be used to check for/insert any customizer settings. Once this CSS is generated, wp_add_inline_style() adds it to the main stylesheet; if everything is coded properly, CSS's cascading nature will have the newly added code override the earlier code without any need for !important or anything like that.
I'm left wondering if, instead of overriding, the inline inserts can (or should) be the only declaration of CSS that could be possibly changed by the customizer, i.e. in theme_get_customizer_css() if there are no customizer options set return the default code rather than the default code being in the spreadsheet to start with. This would prevent there being tons of duplicate CSS, relying on cascade hierarchies to work, but the stylesheet would also be incomplete on its own, so maybe there's reason not to do this? Would love input if anyone has thoughts.
I'm working on a Wordpress theme, where I want to change the generated markup of the [product_category] WooCommerce shortcode. I browsed through the templates directory in the plugin, but can't find the file related to this particular shortcode.
So my question is, which files I have to copy to my template and modify to change the HTML outcome of [product_category]? (CSS modifications are already done, but I need to display a very different HTML markup, and I don't want to hack around with JS).
Also it would be better not to rewrite the whole function with a hook, but change the original HTML a bit (for example, set the background color based on a custom meta field).
Esiest way :)
add_shortcode('test','test_show_shortcode');
function test_show_shortcode( $atts ) {
echo do_shortcode('[products limit="100" columns="..." category="..."]');
}
[test]
I am having a problem with a site I am developing with wordpress.
It happened after upgrading to the latest version (4.7)
Anyway. Go to the site www.scientized.com (just dummy content for now), and go the source. At around line 124 you see the tag <style type="text/css" id="wp-custom-css"> and then after some css is loaded.
The thing is, is that this some of my old css code from way early. To make life easier and to isolate the problem I have delete all css in my child themes style.css as well as the custom css in the customizer, and delete jetpack just to be sure. Yet this css is being loaded from somewhere. I have file explored the crap out of my site trying to find where this is located, but couldn't find anything.
I have found that in the wp-includes/theme.php there is this function:
function wp_custom_css_cb() {
$styles = wp_get_custom_css();
if ( $styles || is_customize_preview() ) : ?>
<style type="text/css" id="wp-custom-css">
<?php echo strip_tags( $styles ); // Note that esc_html() cannot be used because `div > span` is not interpreted properly. ?>
</style>
<?php endif;
}
so this wp_get_customer_css() function is calling the old css from somewhere -- I tried to follow the functions back to see where - but my php is not that good and got lost. Does anyone know where this is being loaded from?
I think I need to know where the JetPack custom css location is. I have read it is generated dynamically -- so I am not sure how to go about the problem.
Edit: I dont get the text box in the custom css area in customizer. Where is this text located?
Edit: I dont get the text box in the custom css area in customizer. Where is this text located?
The Additional CSS content is stored in wp_posts database table as a separate record. It's post_type is set to custom_css. To find which post is assigned to the field, you need to look in the option theme_mods_{your theme's slug}.
For example, here is the one from my test Sandbox site which is running the Genesis Sample theme. The post ID is 31, per the key custom_css_post_id.
How do I check my site?
You can go directly into your database via phpMyAdmin and look in the wp_options table. Or...you can do this:
add_action( 'init', 'check_custom_css_post_id_theme_mod' );
function check_custom_css_post_id_theme_mod() {
var_dump( get_theme_mods() );
}
The above code will display the theme mods for your current theme. Note the one that is keyed as 'custom_css_post_id'. That one holds the ID to the post for the CSS.
How to Remove It
To remove a theme mod, you use remove_theme_mod( 'custom_css_post_id' );. See codex for the documentation on this construct. It will remove the binding between the Additional CSS. How? It deletes the sub-option.
Note, it does not delete the post record, meaning you'll have an orphaned record in wp_posts.
The wp-custom-css is loaded from custom css & js
I understand and love template overwrites. I need to do some heavier changes to the menu output (basically making the output work better with Bootstrap) - but only for certain menus.
Currently in Joomla 3 there are the following in the mod_menu/tmpl folder:
default.php
default_component.php
default_heading.php
default_separator.php
default_url.php
If I want to change the classes I'd copy the default.php into my mytemplate/html/mod_menu and change it. Great, no problem.
If I want to change the link outputs to go along with that I can copy the default_component.php to mytemplate/html/mod_menu and change it. Great, no problem.
If I want to have the choice of having a different "Alternative Layout" I'd rename the mytemplate/html/mod_menu/default.php to newlayout.php, then select it in the admin module manager for that menu. Great, no problem.
Here's the problem: If I want to have the link output changed for certain menus but not all of them I figure I'd change default_component.php to newlayout_component.php like I did above which would correspond to the newlayout.php...but that doesn't work.
Questions:
1) How to have alternative layouts for each of the default_component.php, default_heading.php, default_separator.php, default_url.php template files (not just an overwrite)?
2) I would think default_url.php is the one that would affect the link outputs but it seems it's default_component.php that does. So what does each one of those do? I couldn't find any information on joomla.org about that.
Thanks!
The alternative layout feature only works for the main file (default.php), not for the sublayouts (default_component.php, ...). So you have to create your own newlayout.php which then can load newlayout_component.php, or use the default_component.php. In fact, the default_component.php will be used as fallback if no newlayout_component.php is found.
The code switches over the $item->type of the link. 'separator', 'url', 'component' and 'heading' are handled by the 'default_'.$item->type, everything else will use default_url. So a plain URL should indeed be generated by default_url.php, not default_component.php. If it behaves differently, it's likely a bug.