Linking the PHP file to the CSS file - php

I want to style the WordPress admin area.
For this purpose, I have copied the following code in the function file and started styling it:
function custom_css()
{ echo '<style>
.widefat {
width: 1700px !important;
max-width: 1700px !important;
}
</style>'; }
add_action('admin_head','custom_css');
this way, the function file becomes very crowded, and that's why I want to style it in a separate CSS file; How can I enter the link of my style.css file in the code above?
I have used this code but it did not work:
{ echo include ("/style.css"); }

I found the answer to my question.
The answer is as follows:
function custom_css() {
echo wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), '4.0.0' );
}
add_action('admin_head','custom_css');

Wordpress theme's css files are responsible for the styling and look of the website. They are located in the /wp-content/themes/ directory. The css files are usually named style.css, there are some additional options you can try:
Inside style.css use the #import at-rule to link to another file (if it is hosted externally).
#import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
Edit the header.php theme to link to an external stylesheet.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
In order to link a CSS file in WordPress header, you need to first enqueue the file using wp_enqueue_scripts from functions.php After that, you can then link to it using get_stylesheet_uri
function roofers_wp_resources(){
wp_enqueue_style('style', get_stylesheet_uri());
wp_enqueue_style('name css file', get_template_directory_uri() . 'css file');
}
add_action('wp_enqueue_scripts', 'roofers_wp_resources');
or enqueue file pointing to your external css url
add_action( 'wp_enqueue_scripts', 'register_custom_plugin_styles' );
function register_custom_plugin_styles() {
wp_register_style( 'style', 'CSS URL' );
wp_enqueue_style( 'style' );
}

/* admin_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to be used in the administration panel. Despite the name, it is used for enqueuing both scripts and styles. */
Enqueue a custom stylesheet in the admin
Sometimes you want to load a set of CSS and/or Javascript documents to all admin pages. You can do this from within your plugin or from your themes function file:
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
// get_template_directory_uri() -> Retrieves template directory URI for the active theme.
function wpdocs_enqueue_custom_admin_style() {
// loading css
wp_register_style( 'custom_wp_admin_css', get_template_directory_uri(). '/admin-style.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' ); // Enqueue a style.
// loading js
wp_register_script( 'custom_wp_admin_js', get_template_directory_uri().'/admin-script.js', array('jquery-core'),false, true );
wp_enqueue_script( 'custom_wp_admin_js' ); // Enqueue a script.
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );

Related

Remove the branding of WP at new posts and new pages

How to remove the branding of WP at new posts and new pages?
Click to see the Branding position
I tried to use css code
.edit-post-fullscreen-mode-close.has-icon {display:none !important;}
but it dint workout
Any solution?
I think the problem is, that the css code of your theme is not applied to the admin area. So the stylesheet will not be overwritten.
Two possible ways to get CSS styles into your wordpress backend:
To use a seperate CSS file for wp-admin, you can add this to the functions.php of your theme:
add_action( 'admin_enqueue_scripts', 'add_admin_styles' );
function add_admin_styles() {
wp_enqueue_style( 'adminstyle', get_template_directory_uri() . '/adminstyle.css', false, '1.0.0' );
}
Then you have to a add the adminstyle.css to your theme folder and do the adjustment you like.
Maybe you do not need a seperate file, because you do not want to make many adjustments. You can use other action and add the css code directly inside the function. This also can be placed inside the functions.php file or your theme.
add_action('admin_head', 'add_admin_styles');
function add_admin_styles() {
echo '<style>
.edit-post-fullscreen-mode-close.has-icon {display:none !important;}
</style>';
}

Linking stylesheet in Wordpress

I am trying to link my stylesheet to another page in Wordpress. The actual Wordpress installation is within a folder, within the actual site. It's set up this way because I only want to use WP for a specific section of the site (it was an afterthought, I know this is isn't necessarily the "correct" way to do things...)
I have the front page set up and the styles are all working fine. But when a create a new page and try to use get_header to pull in the styles, they don't work. The browser is looking for a page called styles.css, not a stylesheet.
I've tried to use "enqueue" in the functions.php file, but it still won't work. I have a copy of my style sheet in the theme folder and also one inside a css folder.
Example of using enqueue for the copy inside the css folder:
wp_enqueue_script( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
*I am using get_header in my page template file, (same header as the front page which is working fine), and it is linked this way:
<link rel="stylesheet" type="text/css" href="../css/styles2.css">
I'm pretty sure the issue is the "../" but when I substitute echo get_stylesheet_directory_uri()....... instead of the ../, it doesn't work as it should.
Any help would be great as I'm newer to WP development.
Thanks everyone
You have to write like this for linking template style sheet ...
wp_enqueue_script( 'styles', get_template_directory_uri(). 'css/styles2.css', array(), '0.0.1' );
Add Style sheet like this:
wp_enqueue_style( 'styles', bloginfo('template_url').'/css/styles2.css' );
You can view more detail at here
You need to hook the css:
If you are using child theme then hook like:
add_action( 'wp_enqueue_scripts', 'enqueue_unique_function_name_here', 0);
function enqueue_unique_function_name_here()
{
wp_enqueue_style( 'css_unique_handle_name_here', get_template_directory_uri(). 'folder_path_inside_child_theme/style_sheet_file_name_here.css', array(), '0.0.1' );
}
If you are using parent theme (no child theme) then hook like:
add_action( 'wp_enqueue_scripts', 'enqueue_unique_function_name_here', 0);
function enqueue_unique_function_name_here()
{
wp_enqueue_style( 'css_unique_handle_name_here', get_stylesheet_directory_uri(). 'folder_path_inside_child_theme/style_sheet_file_name_here.css', array(), '0.0.1' );
}
If want to enqueue in admin side then just change hook name "wp_enqueue_scripts" to "admin_enqueue_scripts".
Try now.
You have used wp_enqueue_script() instead of wp_enqueue_style()
wp_enqueue_style used for Enqueue Style
wp_enqueue_script used for Enqueue Script
wp_enqueue_style( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
Here is the full example for the same.
add_action( 'wp_enqueue_scripts', 'enqueue_custom_style');
function enqueue_custom_style()
{
wp_enqueue_style( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
}

Style the 'Update' or 'Publish' WP button from functions.php or style.css

Due to current permission issues to core files and respective stylesheets -- I am wondering how I could customize the LOCATION and APPEARANCE of the Wordpress CMS post / page 'Update / Publish' button?
I have tried pulling the selector from developer tools and declaring !important with the new styles within header.php and styles.css with no such luck -- any suggestions on stylizing the publish / update button -- maybe from within 'functions.php'.
New Admin Stylesheet
You'll need to enqueue a custom stylesheet for the admin like this:
function load_custom_wp_admin_style() {
wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/css/style-admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
Then create a css file called style-admin.css, place it in a directory in your theme folder called css and put something like this in it:
.wp-core-ui #publishing-action .button.button-large {
font-size: 28px;
height: 50px;
}
Insert Style into Admin
If you can't create a new stylesheet like that, you can use the admin_head hook to insert in into the admin header like so:
function my_custom_admin_head() {
echo '<style>.wp-core-ui #publishing-action .button.button-large {font-size: 28px; height: 50px;}</style>';
}
add_action( 'admin_head', 'my_custom_admin_head' );

How to add Java-Script properly in wordpress?

I have created a theme from the static website in wordpress. I want to know the right way to add javascript & style-sheet into the wordpress theme`s file. I have header.php, footer.php and index.php files and other css & javascript files that are linked in header.php.
Thank you in Advance.
Write following code into your theme's function.php file
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
if you want to add js and css in theme/front end than you cac add js and css in your header.php like this.
<script src="<?php echo get_template_directory_uri(); ?>/js/your-js-file.js" type="text/javascript"></script>
For css
<link rel="stylesheet" type = "text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/your-style-sheet.css"/>
Loading the scripts correctly in WordPress is incredibly easy. Below is surely an example code which you would paste inside your plugins file or inside your theme’s functions.php file to properly Load scripts in WordPress.
function wpb_adding_scripts() {
wp_register_script('my_js', plugins_url('jsscript.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_js');
}
add_action('wp_enqueue_scripts', 'wpb_adding_scripts');
for stylesheets
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('mystyle.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action('wp_enqueue_scripts', 'wpb_adding_styles');

Custom google map on contact page in wordpress

I need to put a styled map on a contact page in WP.
I'd rather not use a plugin as it would be overkill, embedding on the other way won't allow me to customize layers, use placeholders, etc
I coded an example map on a static html page. https://dl.dropboxusercontent.com/u/13823768/map/test.html
How do I get from here to wordpress?
EDIT: I'm working with a child theme so I put this in functions.php (in my child-theme dir)
function enqueue_custom_scripts() {
wp_enqueue_script('google-map-api','https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=it');
wp_enqueue_script('google-map-style', get_stylesheet_directory_uri() . '/js/map.js', array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
?>
Looks ok so far but it needs <body onload="initialize()"> too.
Do you know how I can add the onload to the body tag?
You can accomplish this by creating a custom theme page template: http://codex.wordpress.org/Page_Templates or simply add the #map_canvas element in the "text" view of the WSYWYG content area of the page editor.
The next step is to add all of your map scripts, I would do this by enqueuing the scripts in your theme's functions.php by creating a callback function that is called on the wp_enqueue_scripts action: http://codex.wordpress.org/Function_Reference/wp_enqueue_script.
the function you will add to functions.php would look something like this(replacing the filepaths with your scripts):
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
I know you mentioned not wanting a plugin for overkill, but a plugin would allow portability of your code and would allow you to switch themes without losing your map code. Adding a plugin and shortcode to render the #map_canvas element would not be much more time than adding the code to functions.php. If your interested in writing a custom plugin, http://codex.wordpress.org/Writing_a_Plugin

Categories