how to change sidebar menu content dynamically - wordpress? - php

I have unique design of wordpress backend and need to implement it. How can I add my own menu items there(see first attached image)? I know how to remove existing menus, but except removing I need to add my own menus. Is there a dynamic way with php to do it? (see image example here)
I tried to add my custom menus with jquery append() function but it is really bad solution. Any ideas please?

Add custom logo with user name in admin menu.
Demo link image : http://screencast.com/t/W8dcfhAgS
Add in functions file
add_action('admin_menu', 'codyfly_admin_menu');
function codyfly_admin_menu() {
global $menu;
global $current_user;
$url = 'http://codyfly.com';
$url1 = 'http://codyfly.com';
$username = '';
if ( is_user_logged_in() ) {
$username = $current_user->user_login;
}
$menu[0] = array( __(''), 'read', $url, 'my-logo', 'my-logo');
$menu[1] = array( __($username), 'read', $url1, 'my-logo1', 'my-logo1');
}
add_action('admin_head', 'codyfly_admin_style');
function codyfly_admin_style() {
echo '<link rel="stylesheet" href="' . get_template_directory_uri() . '/css/style-admin.css" type="text/css" media="all" />';
}
Add in style
#adminmenu a.my-logo,
#adminmenu a.my-logo1{
display: block;
background: url(https://dummyimage.com/140x40/fff/000) no-repeat center center;
background-size: 140px 40px;
width: 140px;
height: 40px;
margin: 0 auto;
padding: 10px 5px;
font-size: 14px;
font-weight: 400;
line-height: 18px;
}
#adminmenu a.my-logo1{
background: url(https://dummyimage.com/50x40/fff/000) no-repeat;
background-position: left center;
background-size: 50px 40px;
}
#adminmenu a.my-logo1 .wp-menu-name{
padding-left: 60px;
}
#adminmenu a.shomtek-logo div.wp-menu-name {
display: none;
}

For Add new menu in admin :
using add_menu_page we can add menu and add_submenu_page to add sub menu.
More detail
Below snippet to add admin new custom menu
add_action('admin_menu', 'register_event_menu');
function register_event_menu() {
add_menu_page('Event', 'Event', 'manage_options', 'event_details', 'event_function', 'dashicons-clipboard');
add_submenu_page('event_details', 'Event Setting', 'Event Setting', 'manage_options', 'event_setting', 'event_settings_function');
}
function event_function() {
echo "<div class='warp'>";
echo "<h2>Admin Page DalwadiWp</h2>";
echo "</div>";
}
function event_settings_function() {
echo "<div class='warp'>";
echo "<h2>Admin Page DalwadiWp</h2>";
echo "</div>";
}
For remove menu in admin list. Below snippet to remove Post menu in admin list.
More detail
add_action( 'admin_menu', 'custom_menu_page_removing' );
function custom_menu_page_removing() {
remove_menu_page( 'edit.php' ); //Posts
}

Add custom logo in admin menu.
http://screencast.com/t/dCvqzfxdup
add_action('admin_menu', 'codyfly_admin_menu');
function codyfly_admin_menu() {
global $menu;
$url = 'http://codyfly.com';
$url1 = 'http://codyfly.com';
$menu[0] = array( __(''), 'read', $url, 'my-logo', 'my-logo');
$menu[1] = array( __(''), 'read', $url1, 'my-logo1', 'my-logo1');
}
add_action('admin_head', 'codyfly_admin_style');
function codyfly_admin_style() {
echo '<link rel="stylesheet" href="' . get_template_directory_uri() . '/css/style-admin.css" type="text/css" media="all" />';
}
add style here
#adminmenu a.my-logo,
#adminmenu a.my-logo1{
display: block;
background: url(https://dummyimage.com/250x85/fff/000) no-repeat center center;
background-size: 140px 40px;
width: 140px;
opacity: 0.6;
height: 40px;
margin: 0 auto;
padding: 10px 5px;
}
#adminmenu a.shomtek-logo div.wp-menu-name {
display: none;
}

Related

WooCommerce: Remove thumbnails from gallery but keep slider navigation

I want to remove the thumbnails from the gallery (flexslider) of the product single page.
But I want to keep the arrow for the previous/next images (in case there is more than 1 image).
I found the following code:
add_action( 'woocommerce_product_thumbnails', 'enable_gallery_for_multiple_thumbnails_only', 5 );
function enable_gallery_for_multiple_thumbnails_only() {
global $product;
if( ! is_a($product, 'WC_Product') ) {
$product = wc_get_product( get_the_id() );
}
if( empty( $product->get_gallery_image_ids() ) ) {
remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
}
}
Source: https://stackoverflow.com/a/56238267/1788961
The problem is, that the function removes the thumbnail and the arrows.
Is there any way to keep the arrows?
And I know, that I could use display:none or maybe change the template file.
But I'm searching a solution with an own function.
if you want keep only arrow then you just put this code in functions.php:
// for arrow on single product page slide
add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/**
* Filer WooCommerce Flexslider options - Add Navigation Arrows
*/
function sf_update_woo_flexslider_options( $options ) {
$options['directionNav'] = true;
return $options;
}
And this code put it in your theme style.css file:
/*add for arrow on main image slide*/
ul.flex-direction-nav {
position: absolute;
top: 30%;
z-index: 99999;
width: 100%;
left: 0;
margin: 0;
padding: 0px;
list-style: none;
}
li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}
a.flex-next::after {
visibility:visible;content: '\f054';
font-family: 'Font Awesome 5 Free';
margin-right: 10px;
font-size: 20px;
font-weight: bold;
}
a.flex-prev::before {
visibility:visible;
content: '\f053';
font-family: 'Font Awesome 5 Free';
margin-left: 10px;
font-size: 20px;
font-weight: bold;
}
ul.flex-direction-nav li a {
color: black;
}
ul.flex-direction-nav li a:hover {
text-decoration: none;
}
.flex-control-nav .flex-control-thumbs{
display: none;
}
add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/**
* Filer WooCommerce Flexslider options - Add Navigation Arrows
*/
function sf_update_woo_flexslider_options( $options ) {
$options['directionNav'] = true;
$options['controlNav'] = false;
return $options;
}
The given approved answer is close but still resorts to CSS to hide the thumbnails.
You can disable controlNav directly on the same filter you use to show the arrows.

Display a custom button with a dynamic Product ID using a shortcode in Woocommerce

i using Wordpress button plugin called Max Buttons to generate button as i want. But in that button creation into URL where need to point button have only URL where need to point button. This looks like this:
So as you can see, i use URL link to autoupdate coupon code to product and redirect to checkout.. But, that is for static product ID. So my question is how to generate that to each product , to autoget product ID at end of URL? MaxButton plugin generate shortcode where i inserting into place where i want.
Current URL is:
https://testsite/checkout/?apply_coupon=5%off&fill_cart=4004
How to get that fill_cart=PRODUCT_ID to be dynamic?
Updated (for simple and variable products, using jQuery)
You can build a custom shortcode like Max buttons with 3 arguments (attributes):
class (the css class of the button)
coupon (the coupon code that will be added in the url)
text (the button text)
1) The code (The CSS styles are embedded in the 1st function. The jQuery code is in the footer):
add_shortcode('max_btn', 'custom_dynamic_max_button');
function custom_dynamic_max_button( $atts ) {
if( ! is_product() ) return; // exit
global $post;
// Shortcode attributes
$atts = shortcode_atts(
array(
'class' => '',
'coupon' => '',
'text' => '',
),
$atts, 'max_btn');
// Formatting CSS class
$class = ! empty($atts['class']) ? 'max-btn ' . $atts['class'] : 'max-btn';
// Format the coupon code if it's set as an argument
$coupon = ! empty($atts['coupon']) ? 'apply_coupon=' . $atts['coupon'] . '&' : '';
// Format the url with the dynamic Product ID
$link = wc_get_checkout_url() . '?' . $coupon . 'fill_cart=' . $post->ID;
// The button code:
ob_start();
?>
<style>
.max-btn.flash-btn {
position: relative;
text-decoration: none;
display: inline-block;
vertical-align: middle;
border-color: #ef2409;
width: 225px;
height: 43px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-style: solid;
border-width: 2px;
background-color: rgba(239, 36, 9, 1);
-webkit-box-shadow: 0px 0px 2px 0px #333;
-moz-box-shadow: 0px 0px 2px 0px #333;
box-shadow: 0px 0px 2px 0px #333;
color: #c8146e;
}
.max-btn.flash-btn {
animation-name: flash;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: flash;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: flash;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
.max-btn:hover.flash-btn {
border-color: #505ac7;
background-color: rgba(255, 255, 255, 1);
-webkit-box-shadow: 0px 0px 2px 0px #333;
-moz-box-shadow: 0px 0px 2px 0px #333;
box-shadow: 0px 0px 2px 0px #333;
}
#keyframes flash {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
#-moz-keyframes flash {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
.max-btn.flash-btn > .mb-text {
color: #fff;
font-family: Tahoma;
font-size: 20px;
text-align: center;
font-style: normal;
font-weight: bold;
padding-top: 11px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
line-height: 1em;
box-sizing: border-box;
display: block;
background-color: unset;
outline: none;
}
.max-btn:hover.flash-btn > .mb-text {
color: #505ac7;
}
.max-btn.disabled,
.max-btn:hover.disabled {
cursor: not-allowed;
background-color: rgba(160, 160, 160, 1) !important;
border-color: rgba(160, 160, 160, 1) !important;
animation-name: unflash !important;
-webkit-animation-name: unflash !important;
-moz-animation-name: unflash !important;
}
.max-btn:hover.flash-btn.disabled > .mb-text {
color: #fff !important;
}
</style>
<a class="<?php echo $class; ?>" href="<?php echo $link; ?>">
<span class="mb-text"><?php echo $atts['text']; ?></span>
</a>
<input type="hidden" class="ccoupon" name="ccoupon" value="<?php echo $atts['coupon']; ?>">
<?php
return ob_get_clean(); // Output
}
add_action('wp_footer','custom_jquery_single_product_script');
function custom_jquery_single_product_script(){
// Only for single product pages
if ( ! is_product() ) return;
// Get an instance of the WC_Product object
$product = wc_get_product(get_the_id());
// Only for variable products
if( ! $product->is_type('variable') ) return;
// Pass the partial link to jQuery
$partial_link = wc_get_checkout_url() . '?';
?>
<script type="text/javascript">
(function($){
// variables initialization
var a = '<?php echo $partial_link; ?>',
b = 'input[name="variation_id"]',
c = 'a.max-btn.flash-btn',
d = '.variations select',
e = 'input.ccoupon';
// Get the partial link (without the product ID)
if( $(e).val() != '' )
a += 'apply_coupon=' + $(e).val() + '&fill_cart=';
else
a += 'fill_cart=';
// Utility function to enable button with the correct variation ID
function enableButton(){
// Set the correct URL with the dynamic variation ID and remove "disable" class
$(c).attr("href", a+$(b).val()).removeClass('disabled');
}
// Utility function to disable button
function disableButton(){
// Remove href attribute and set "disable" class
$(c).removeAttr('href').addClass('disabled');
}
// -- 1. Once DOM is loaded
// Remove href attribute and set "disable" class
disableButton();
// If variation ID exist, we enable the button with the correct variation ID
setTimeout(function(){
if($(b).val() > 0)
enableButton();
}, 800);
// -- 2. On live events
// On product attribute select fields "blur" event
$(d).blur( function(){
// If variation ID exist (all product attributes are selected)
if( $(b).val() > 0 )
enableButton();
// If variation ID doesn't exist (all product attributes are NOT selected)
else
disableButton();
console.log('select: '+$(b).val());
});
})(jQuery);
</script>
<?php
}
Code goes in function.php file of your active child theme (or active theme).
2) Possible shortcode USAGE:
In the product Wordpress post, custom post or page editor:
[max_btn class="flash-btn" coupon="5%off" text="Buy Now Get 5% off"]
In a php file, template or function:
echo do_shortcode('[max_btn class="flash-btn" coupon="5%off" text="Buy Now Get 5% off"]');
Or (inside html):
<?php echo do_shortcode('[max_btn class="flash-btn" coupon="5%off" text="Buy Now Get 5% off"]'); ?>
The generated html code will be something like (and it works for variable products too):
<a class="max-btn flash-btn" href="http://www.example.com/checkout/?apply_coupon=5%off&fill_cart=37">
<span class="mb-text">Buy Now Get 5% off</span>
</a>
<input type="hidden" class="ccoupon" name="ccoupon" value="5%off">
The Url will be auto generated with a dynamic product ID on single product pages. Tested and works.
For variable products:
When all the product attributes are not selected and the variation ID is not set, the button is disabled:
When all the product attributes are selected and the variation ID is set, the button is enabled and blink:

CSS shows when in developer tools but not in file

I am currently putting together a website, i have included a dynamic navigation bar developed purely in PHP with my basic ability.
However, using Chrome Dev Tool, i managed to obtain the style i wanted (on current page highlight the page name in white on navigation) , when including the style into my css file, the webpage would not show the style.
<?php
function outputHeader ($title){
echo '<!DOCTYPE html>';
echo '<html>';
echo '<head>';
echo '<title>' . $title . '</title>';
echo '<link rel="stylesheet" type="text/css" href="style.css">';
echo '</head>';
echo '<body>';
}
//Output Navigation
echo '<div id="banner">';
echo '<div id="nav">';
echo '<ul>';
function generateNav($pagename){
$page = array('index.php?' => 'Home', 'playerranking.php?' => 'Player Ranking', 'community.php?' => 'Community', 'register.php?' => 'Register','login.php' => 'Login',
);
foreach ($page as $link => $label){
if ($pagename == $label){
echo '<li><a class="current" href="' . $link . '">' . $label . '</li></a>';
}
else {
echo '<li>' . $label . '</li>';
}
}
echo '</ul>';
echo '</div>';
echo '</div>';
} >?
The css below
body {
background: #000;
margin: 0px;
}
#banner {
height: 109px;
width: 1295px;
background: #1d1d33;
margin-right: auto;
margin-left: auto;
}
#nav {
margin-right: 10%;
}
#nav ul {
overflow: visible;
text-decoration: none;
float: right;
}
#nav li {
display: inline;
font-family: Calibri, sans-serif;
font-size: 15px;
margin-top: 8%;
float: left;
padding-right: 30px;
list-style-type: none;
overflow: visible;
}
a#current {
color: #white;
}
#nav a {
text-decoration: none;
color: #8f8fa7;
}
From what i could see there was no two styles which were over-riding.
Help will be much appreciated
Thank you !
change
a#current {
color: #white;
}
to
#nav a.current {
color: white;
}
explanation:
# is the selector for id attributes, but you want to select the class "current". Class names are selected by .. Also, when using named colour values, don't prefix them with # - you only need the hash for hexadecimal rgb values.
In addition to all that, you have to add #nav in front of the rule so that it is more specific than the general rule #nav a. (You should also read up on CSS specificity in general)

Removing the link on the Wordpress admin bar logo

I've managed to replace the Wordpress icon/logo in the admin bar with a custom one in my functions.php file as well as removing the dropdown menu linking to Wordpress documentation, support forums, feedback etc. What i'm trying to do is to disable the link present on the logo that takes you to the About Wordpress page in the admin that explains the features of the version you currently are running.
I'd like to do this from within the functions.php file. Is this possible?
This is the code i have used so far:
// Replace Wordpress logo with custom Logo
function my_custom_logo() {
echo '
<style type="text/css">
#wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-position: 0 0;
content: url(' . get_bloginfo('stylesheet_directory') . '/assets/img/my-logo.png)!important;
top: 2px;
display: block;
width: 15px;
height: 20px;
pointer-events: none!important;
cursor: default;
}
#wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}
add_action('admin_head', 'my_custom_logo');
add_action('wp_head', 'my_custom_logo');
//disable a few items on the admin bar
function remove_admin_bar_links() {
global $wp_admin_bar;
$wp_admin_bar->remove_menu('new-content'); // Remove the 'add new' button
$wp_admin_bar->remove_menu('comments'); // Remove the comments bubble
$wp_admin_bar->remove_menu('about'); // Remove the about WordPress link
$wp_admin_bar->remove_menu('wporg'); // Remove the WordPress.org link
$wp_admin_bar->remove_menu('documentation'); // Remove the WordPress documentation link
$wp_admin_bar->remove_menu('support-forums'); // Remove the support forums link
$wp_admin_bar->remove_menu('feedback'); // Remove the feedback link
}
add_action( 'wp_before_admin_bar_render', 'remove_admin_bar_links' );
I had this problem a while back.
The easiest solution would not be with css but with a function that removes that menu item from the admin bar.
Then just add a new menu item with your logo image.
I would do this instead of replacing the icon with your logo with css.
/*Remove WordPress menu from admin bar*/
add_action( 'admin_bar_menu', 'remove_wp_logo', 999 );
function remove_wp_logo( $wp_admin_bar ) {
$wp_admin_bar->remove_node( 'wp-logo' );
}
/*Adds Custom Logo to Admin Bar*/
add_action( 'admin_bar_menu', 'custom_admin_logo', 1 );
//priority 1 sets the location to the front/leftmost of the menu
function custom_admin_logo( $wp_admin_bar ) {
$custom_logo_id = get_theme_mod( 'custom_logo' ); //Uses theme logo
$custom_logo_url = wp_get_attachment_image_url( $custom_logo_id , 'full' );
$args = array(
'id' => 'custom_logo_admin',
'title' => ' ',
'meta' => array( 'html' => '<li id="custom-logo-admin-bar" style="width: 230px;padding: 10px;padding-left: 0px;padding-right: 25px;"><img class="overlay" src="'.$custom_logo_url.'" style="float: left;width: 100%;height: auto;"></li>' )
);
$wp_admin_bar->add_node( $args );
}
You can style your image with css either in your stylesheet or directly here in the meta array.
The $wp_admin_bar->add_node( $args ); is what actually adds the new node into the admin bar.
P.S. some of the styling here is just what I needed for my own purposes, feel free to change.
Maybe you should just overwrite the CSS for it and replace it with your own image so the functionality will stay in tact!
This is the original CSS:
#wp-admin-bar-wp-logo > .ab-item .ab-icon {
background-image: url("../wp-includes/images/admin-bar-sprite.png?d=20120830");
background-position: 0 -76px;
background-repeat: no-repeat;
height: 20px;
margin-top: 4px;
width: 20px;
}
You might want to change it in:
#wp-admin-bar-wp-logo > .ab-item span.ab-icon {
background-image: url("your-image.png");
background-repeat: no-repeat;
height: 20px;
margin-top: 4px;
width: 20px;
}
Notice the addiational span to .ab-icon to make it more specific.
For any legal questions check their licence page:
https://codex.wordpress.org/License
And the GPL licence:
https://www.gnu.org/copyleft/gpl.html

Wordpress selectively applying css rules following wp_enqueue_style

I'm in the process of transferring an HTML/CSS/jquery mockup of a website into a wordpress theme. The site runs perfectly as an HTML site and all of the css rules are selecting the correct html elements.
However, when I enqueue the scripts to Wordpress and look at the site, only certain rules are being applied, resulting in the website having a broken look. I know the css is being correctly enqueued since I can see it showing up in the page source for the website. When I look at specific elements with web inspector it shows that only certain rules are being implemented but not others. Why would transferring my css to Wordpress change how the css rules apply to almost identical HTML?
Below the code for how I'm enqueuing scripts. Note the dependency on normalize:
<?php
//
function theme_styles() {
wp_enqueue_style( 'normalize', get_template_directory_uri() . '/normalize.css' );
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css', array( 'normalize' ) );
}
// Load the theme JS
function theme_js() {
wp_register_script('stickynav',get_template_directory_uri() . '/js/stickynav.js', array('jquery'), '', true);
wp_register_script('nouislider',get_template_directory_uri() . '/js/nouislider.js', array('jquery'), '', true);
wp_register_script('bootstrap2',get_template_directory_uri() . '/js/bootstrap2.js', array('jquery'), '', true);
wp_register_script('foundation',get_template_directory_uri() . '/js/foundation.js', array('jquery'), '', true);
wp_register_script('orbit',get_template_directory_uri() . '/js/foundation.orbit.js', array('jquery'), '', true);
wp_register_script('modernizr',get_template_directory_uri() . '/js/modernizr.custom.49510.js', array('jquery'), '', true);
wp_enqueue_script('stickynav');
wp_enqueue_script('nouislider');
wp_enqueue_script('bootstrap2');
wp_enqueue_script('modernizr');
wp_enqueue_script('theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true);
if (is_home() && !is_paged() ) {
wp_enqueue_script('foundation');
wp_enqueue_script('orbit');
}
}
add_action( 'wp_enqueue_scripts', 'theme_js');
add_action('wp_enqueue_scripts','theme_styles');
// Enable custom menus
add_theme_support ('menus');
?>
This is the html/php I have in header.php:
<!DOCTYPE html>
<html>
<head>
<title>
<?php
wp_title( '-', true, 'right' );
bloginfo('name');
?>
</title>
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<?php wp_head(); ?>
</head>
<body>
<div id="header_top_wrapper">
<!-- header and subheader -->
<div class="row" id="header-top">
<div class="large-12 columns" id="my_logo">
<?php bloginfo( 'name'); ?>
</div>
<div class="large-6 columns large-uncentered" id="subheader">
<h4><?php bloginfo( 'description'); ?></h4>
</div>
</div>
<!-- sticky navigation bar -->
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="navigation_items">
<li class="nav-left">HOUSEPLANS.INFO</li>
<li class="nav-left">SEARCH PLANS</li>
<li class="nav-left">MOST VIEWED</li>
<li class="nav-right">ABOUT</li>
<li class="nav-right" id="site-search">
<form action="/search" method="get">
<input type="text" name="s" data-provide="typeahead" autocomplete="off" placeholder="Search";>
<i class="icon-search"></i>
</form>
</li>
</div>
</div>
</div>
</div><!-- end #header_top_wrapper -->
As an example of the selective application, these are the rules that are being applied to a link nested inside of an list item li on the HTML mockup
#sticky_navigation ul li a {
float: left;
margin: 0 0 0 5px;
height: 36px;
padding: 0;
line-height: 36px;
font-size: 12px;
font-weight: normal;
color: white;
}
#sticky_navigation ul {
list-style: none;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-style: normal;
}
And this is what is being applied to the same link in the Wordpress version of the same HTML and CSS
a {
color: inherit;
text-decoration: none;
line-height: inherit;
}
li {
text-align: -webkit-match-parent;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
}
Below is the CSS style for the area in question:
/* Logo and subheader */
#my_logo {
font:45px Georgia, Times, serif;
padding-left: 8px;
}
#subheader h4{
margin: 6px 0 0 0;
}
/* our menu styles */
#sticky_navigation_wrapper {
width:100%;
height:36px;
}
#sticky_navigation {
width:100%;
height:36px;
/* background: rgba(65, 105,255,.4); */
background: black;
z-index: 1030;
}
.navigation_items {
width:960px;
margin:0 auto;
}
.navigation_items ul{
padding-left: 0;
}
.navigation_items ul.pull-left:after {
clear: both;
}
#sticky_navigation ul {
list-style:none;
margin: 0;
/* padding:0; */
}
#sticky_navigation ul li{
margin:0;
display:inline-block;
}
#sticky_navigation ul li a{
/* float:left; */
/*margin:0 0 0 5px;*/
height:36px;
/* padding: 0; */
line-height:36px;
font-size:12px;
font-weight:normal;
color:white;
}
.nav-left{
padding-left: 10px;
padding-right: 20px;
}
.nav-right {
float: right !important;
padding-right: 10px;
padding-left: 20px;
}
What is going on here? I've been up all night trying to figure this out.
I'm enqueuing correctly, and according to the page source the exact same css is in the header as in my non-Wordpress version.
You have:
add_action('wp_enqueue_scripts','theme_styles');
But probably you should change it to:
add_action('wp_enqueue_style','theme_styles');
Ref: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Change
add_action('wp_enqueue_scripts','theme_styles');
to
add_action('wp_enqueue_style','theme_styles');
Also please remember that if you change or edit the css, you need to delete your cache and your visitors also needs to delete their browser's cache. But of course there's a better way to do it. Just fill in the "version" arguments on the wp_enqueue_style.
Do it like this:
add_action('wp_enqueue_style','theme_styles', array(), '1.0.0');
Every time you edit your css. Just change the version to '1.0.1' or '1.0.2' and so on. This will force your visitor's browser to get the latest version of the css.
Figured it out...
UL tags were missing for the li's - somehow deleted while inserting PHP.
DOH!

Categories