Hi there I am creating a plugin for WordPress and I am at the stage of creating the CSS side of the administration menu. I have been reading the codex for WP but still not entirely sure how I can Implement the whole thing. Firstly I have two files adminstyle.css and adminstyle.html. I know I have to use wp enqueue style/script functions in WP but need some assistance on the actual implementation. Firstly the html/css side is a page for admin inputs/textareas/radio buttons for the admin to choose his/her settings. So my question is is there any WP CSS conventions or is it as simple as including a CSS/HTML script on the admin menu for the admin to choose his/her settings?
Its not so hard to implement but you should aware to wordpress hooks, filters and technique to implement it.
If you want some code sample, then by default there is a file located in plugins directory with name hello.php, its a default Hello Dolly Plugin. Take a look on this sample that how to implement style on admin side:
function dolly_css() {
// This makes sure that the positioning is also good for right-to-left languages
$x = is_rtl() ? 'left' : 'right';
echo "
<style type='text/css'>
#dolly {
float: $x;
padding-$x: 15px;
padding-top: 5px;
margin: 0;
font-size: 11px;
}
</style>
";
}
add_action( 'admin_head', 'dolly_css' );
In above codes dolly_css is a function which is attached to the admin_head hook.
Related
I was given the task of customizing a specific section of a website. This section is primarily made by an Event Manager Plugin on WordPress. This plugin allows users to create their own events that will be published in a calendar page. The thing is, I need to get rid of the page header only on the pages created by this plugin, that will have an URL similar to this: http://mypage.com/eventos/user-event-name
So, I only need to apply the code .site-header { display: none; } ONLY to the pages that have this /eventos/something URL. Can this be done?
When I put the above code on the Custom CSS of my theme it gets rid of the header across the whole website, and I don't want that.
I have absolutely no background in CSS so I most definitely am using the wrong definitions here. Thanks in advance, hope someone can help me!
You can check if there is evestos in URL and add a class to body
like this
add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {
$url = strpos($_SERVER['REQUEST_URI'];
if($url, "/eventos/")) {
$classes[] = 'eventos-page';
return $classes;
}
}
After that you can add css to that class like for example
.eventos-page .site-header {
display: none;
}
I am using this code but it does not work as I want, I want to put different classes in both menu as I can do this
add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );
function additional_active_item_classes($classes = array(), $menu_item = false){
if(in_array('current-menu-item', $menu_item->classes)){
$classes[] = 'active';
}
return $classes;
}
I want to affect the primary menu without the footer menu being affected to set another class to activate the footer menu but if it is not possible I would love only to accept the primary menu
There are a lot of different menus in wordpress. Which specifically do you want to affect? Are you referring to the frontend interface that visitors see? Or maybe the backend admin area's sidebar?
Unless there is a specific reason, it would be unlikely to need to add an additional class--the menu items already have a special class assigned to them when they are the current page.
These menu items can be styled with the following css selectors:
admin area: #adminmenu li.current{}
frontend: #top-menu li.current-menu-item{}
If you need additional help, please provide more specific information!
EDIT:
#top-menu li.current-menu-item a{
color: blue;
}
.bottom-nav li.current-menu-item a{
color: red;
}
I'm using the WordPress plugin Advanced TinyMCE to give my client the ability to change font sizes within the editor. My issue is, it has a predefined set of sizes to choose and I need to add more to this. Is there an easy way to hook onto this plugin to extend it?
got this one from WP explorer- link included for further reading as there's more useful stuff. Bear in mind it was written for 3.9 so definitely worth testing before deploying.
Adding something like this to your functions.php file should do the trick, you can edit the available sizes by adding to the array:
// Customize mce editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
function wpex_mce_text_sizes( $initArray ){
$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
return $initArray;
}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );
link below for further reading:
WP Explorer Tiny MCE customisations
I am having trouble overriding the default styling that comes with WooCommerce. Specifically, I am trying to hide certain fields that display on my checkout page (see screenshot of the code). I mocked up my page on Code Pen and my css is working fine, so I am not sure why it doesn't work on my styles.css of my child theme. Any help is appreciated!
.variation li div:first-child {
display: none; }
https://codepen.io/jagorski/pen/oZBYrd
Clear the browser cache & try this:
.variation-JobListing:first-child {
display: none !important;
}
Currently putting together a webcomic website. I have no need for post content / comments. Just looking to post a daily/weekly comic and leave it at that.
Current Site: http://anarchyplants.com
I've tried to disable the post edit box on the admin end as well as searched high and low on removing that "Comments(0)" on the mini nav bar.
Currently using Wordpress and ComicPress theme.
(http://comicpress.org/) w/ Comic Easel Plugin (it's required)
If someone more Wordpress versed that I can shed some light and teach me how to achieve this, I'd be more than grateful.
You could disable this from your css. Just place it in your child themes style.css file. It's not recommended that you remove the post edit box... How else would you publish your content?
/* Will hide the comments on the "mini navbar" */
#comic-nav-wrapper > tbody > tr > td:nth-child(3){
display: none;
padding: 0;
}
To remove the content from the post, you could simply:
/* Remove the post content */
.post-content{
display: none;
}