I have included the following css files into my_theme.info file
stylesheets[all][] = style.css
stylesheets[all][] = css/all.css
stylesheets[all][] = css/static.css
and this files are loading on every page, but my particular css file associated with page is loading before the above css files.
But i want above css files should load first then my page css file load
what i do for that?
By default css files of theme (as set in mytheme.info file) are loading very last and after any other css files of any module. This is done to override any css if needed.
So, if you want to load the css files before any other you should better add them with drupal_add_css function in a custom module and set their weight as -100 or less (number is just an example of order weight).
To get the path you can use the current_path() or drupal_get_path_alias() (for the alias) or any other function/method to get the path.
But, as you said, these are theme css files so in your custom module you could also write this in your module:
function mymodule_init() {
// Set theme's path
$themepath = drupal_get_path('theme', 'mytheme');
// check current path
if (current_path() == "internal/path/of/the/page") {
// add theme css in group CSS_SYSTEM
drupal_add_css($themepath . '/path/to/mycss.css', array('group' => CSS_SYSTEM, 'type' => 'file', 'weight' => -100));
}
}
The code above will move the mycss.css file to group "CSS_SYSTEM" that loads the core css files first and before any other css files from modules (CSS_DEFAULT) or theme (CSS_THEME)
Related
There are parent and child theme inside the wordpress theme. I need to work on it for a client. When I logged on, the child theme was already selected. However, I need to modify a layout. The way it was set up is that in the parent theme's functions.php, there's a function that get all the files in the function folder
// Require all files in the function folder
function parent_theme_require_files() {
$path = WP_CONTENT_DIR . '/themes/parent_theme/includes/functions/';
foreach(glob($path.'*.php') as $file){
require $file;
}
}
parent_theme_require_files();
The function folder includes the folders for customizer, layouts, images, etc. The file I wanted to edit is inside the layouts folder. Inside the layouts folder, there are options for different layouts for header, footer, etc. And you can select the options right inside the Apperance -> Customize in the wordpress dashboard.
So how do I go about editing the layout header file in the child theme? The path for it is "/themes/**parent_theme**/includes/layouts/header/header-1row-logo-phoneblurb.php" and I want to somehow change it to "/themes/**child_theme**/includes/layouts/header/header-1row-logo-phoneblurb.php"
Over the past few years, I have worked with many WordPress theme templates. I have now decided to take the next step of learning to create my own WordPress themes.
I am now at the stage whereby I am looking to use the Bootstrap feature, in order to make my website responsive. I understand how to transfer files from the Bootstrap website and place them on my server, however I am at a loss on how they work with my website. Here area few questions:
I have already created a '[theme-name].css' to style my website. Will the Bootstrap CSS file automatically override my theme CSS file (s)?
When I transfer the Bootstrap files to my server, do I simply add the contents of my own stylesheet, the Bootstrap CSS file or call both CSS files together using the 'function.php' file?
When I transfer the Bootstrap files to my server, do I have to rename any of the files?
At present, I am currently calling my stylesheets, by inserting the following code in my 'functions.php' file:
function [theme-name]_script_enqueue() {
wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/[theme-name].css', array(), '1.0', 'all');
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/[theme-name].js', array(), '1.0', true);
}
add_action( 'wp_enqueue_scripts', '[theme-name]script_enqueue' );
Referring to the above code, would I need to change the code to reflect the Bootstrap.css files or simply add another function for the Bootstrap files, so that they can both be called?
Apologies if my questions are using incorrect terminologies, as the Bootstrap functionality is a new set of files to me.
You should be able to just add another call to load the bootstrap css. Make sure you add bootstrap before your custom CSS.
See below
https://bootstrapbay.com/blog/customize-bootstrap/
You shouldnt need to rename any files providing you link them correctly in your function call.
I am new to Drupal.
I am in need to add an external stylesheet to an existing site. I see drupal_add_css() to be used to add stylesheet.
I tried to add this function my template.php, but it is not making any change.
Neither it is adding stylsheet nor throwing any error in console.
This is what I did
function drupal_add_css()
{
$path = '/css/new_style.css';
$type = 'module';
$media = 'all';
$preprocess = TRUE;
}
I have added the above snippet in my theme's template.php
How do I add the new_style.css to an existing array of stylesheet.- $Style
The existing theme name is 9ways
Plus this stylesheet should be the first css to be included.
The drupal version being used is v6.0
You don't want to override drupal_add_css() you want to use it.
In your template.php you need to define the hook you want to use to add your CSS file. If you want a page-specific CSS file you can define a hook_preprocess_page() and use drupal_add_css() in that hook:
function mytheme_preprocess_page(&$vars) {
...check for page you want to add css for...
drupal_add_css( drupal_get_path('theme', 'mytheme') . '/css/pagestyles.css', 'theme');
}
That said if you want a css file as part of your theme on all your pages you don't want to add it using drupal_add_css(), you should use the .info file and include the file there:
stylesheets[all][] = css/style.css
Take Note: Drupal 6 is no longer officially supported by the community. While there are some places that are offering long term support for Drupal 6, you should plan to move to Drupal 7 or 8 soon.
You can try module css injector
https://www.drupal.org/project/css_injector
With this module you can inject css style, you must reference the id or class
As part of a custom made plugin users can customize the core CSS file, but as some noobs probably will mess up the CSS file I have build in an option that allows a user to reset the CSS file.
I am looking for a small php snippet which will copy the plugin_core_org.css file and will override the plugin_core.css file with it.
files structure
- css
-- plugin_core.css(users can edit this file only)
-- backup_files
--- plugin_core_org.css
If you'll enqueue css files by wp_enqueue_style so you can do this:
wp_enqueue_style('custom-styles', get_stylesheet_directory_uri() . '/plugin_core.css');
wp_enqueue_style('original-styles', get_stylesheet_directory_uri() . '/plugin_core_org.css', array('custom-styles'));
The third attributte is dependences - handles in this array will be load before actual stylesheet.
More information about wp_enqueue_style you can find Here
I am making changes to an existing website that is based on WordPress (some javascript add-ins and a few PHP scripts for Ajax purposes).
Is their any proper directory that I should place all these files? I started off putting them in a folder in the root directory called assets, but then decided maybe they should go with the rest of the Wordpress template and javascripts files? Or should I keep them out of the wp- directories, and simply keep them in the assets folder?
I know its a trivial question, but I like doing things right- having them in directories that make sense.
You can keep all your javascript in a folder in your theme's directory, that is wp-content/themename/.
Concerning Ajax, it's implementation is different in WordPress. You must add a data variable called action in your ajax request and then hook it to a function in your functions.php file. Your ajax url should be wp-admin/admin-ajax.php available through admin_url( 'admin-ajax.php' ) in PHP.
Read AJAX in Plugins for examples.
If it is presentation related I believe you should place it in the corresponding theme folder. If it is a functionality you might want consider wrapping it inside a plugin and placing it in a plugin folder.
If you dont care about abstracting this change and making available to other themes, then I would just simply add it inside the theme folder. You have WP helper functions to get the web path to the current theme folder, or to include js from that folder.
The proper place in WordPress ecosystem is the folder wp-content, as this is the one that you preserve while doing WP upgrades, restorations or migrations.
In that folder, it could be part of a theme (/themes), a plugin (/plugins), an uploaded file (/uploads) or, if the situation requires, a custom folder (/my-custom-content).
/wp-content/themes/your-theme
Here, all presentation related code. It's a common mistake to place general functionality code in the theme's functions.php. The first question to be asked before placing custom functions in this file is:
If I change my theme, will I need this function?
See: Where to put my code: plugin or functions.php?
/wp-content/plugins/your-plugin
Let's say you need to enqueue some CSS or Javascript files, and this should happen whatever theme is being used.
The following sample plugin will load SWFObject (bundled with WP) in the page Map and the front page, as both contain a SWF Flash embed. And, in the rest of the site, it will load the WebFont Loader from Google CDN and a CSS file from within the plugin folder.
<?php
/** Plugin Name: My Enqueue Plugin */
add_action( 'wp_enqueue_scripts', 'enqueue_so_16354990' );
function enqueue_so_16354990() {
global $post;
if( $post->post_name == 'map' || is_front_page() ) {
// Enqueue bundled script
wp_enqueue_script( 'swfobject' );
}
else {
// Enqueue from external location
wp_enqueue_script(
'my-web-font',
'//ajax.googleapis.com/ajax/libs/webfont/1.4.2/webfont.js',
array( 'jquery' ), // Dependencies
time(), // Version, use time to prevent caching
true // Enqueue on footer
);
// Enqueue from within plugin directory
wp_enqueue_style( 'my-css', plugins_url( 'css/my-plugin.css', __FILE__) );
}
}
/wp-content/uploads
Here, your theme or plugin should place all user uploaded content, so it can be managed through WP Media Library screen. And the content should survive any theme swap or plugin de-activation.
/wp-content/custom-folder
Many image gallery plugins use this approach to store their custom media library.
Another use is for Mobile themes, where custom user themes are placed in this folder, so not to lose it on plugin update (as everything in the plugin or theme folders is replaced on upgrades).