New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WordPress sticky class conflict #1494

Closed
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
7 participants
@awshout
Copy link

awshout commented Feb 2, 2013

Sticky posts in WordPress receive the class sticky and this bit of JavaScript messes with them.

Anthony Wilhelm
WordPress sticky class conflict
sticky class conflict with

Sticky posts in WordPress receive the class sticky and this bit of
JavaScript messes with them.
@envex

This comment has been minimized.

Copy link
Contributor

envex commented Feb 5, 2013

Not a foundation fix, but you can try fixing it in WordPress.

function remove_sticky_class($classes) {
  $classes = array_diff($classes, array("sticky"));
  return $classes;
}
add_filter('post_class','remove_sticky_class');

That will remove the sticky class from the post, which I'd be safe to assume isn't used very often.

@awshout

This comment has been minimized.

Copy link
Author

awshout commented Feb 5, 2013

Yep, that's how I'm handling it for now. Thanks @envex

@Narga

This comment has been minimized.

Copy link

Narga commented Feb 6, 2013

But we'll lose sticky feature of wordpress if we apply this filter

@envex

This comment has been minimized.

Copy link
Contributor

envex commented Feb 6, 2013

No. You just lose the sticky class which is meant to style sticky posts differently than regular posts. You'll still have sticky posts at the top of the loop/page.

@Narga

This comment has been minimized.

Copy link

Narga commented Feb 7, 2013

Oh yes, I've tried it, it works like charm

@mhayes mhayes closed this Feb 28, 2013

@awshout awshout deleted the awshout:fix-sticky branch Feb 28, 2013

@mindctrl

This comment has been minimized.

Copy link
Contributor

mindctrl commented Mar 21, 2013

Removing the sticky class in WordPress is doable, but not desirable. Since "sticky" is a common class name, and not specific enough, I'd like to see the js here be more specific or target another class name.

@Veraxus

This comment has been minimized.

Copy link

Veraxus commented Mar 22, 2013

This is really annoying, but I agree that it's more of a WordPress issue than a Foundation issue.

Since the sticky class is used by the theme (the only place that Foundation is ever likely to be used), this can easily be worked around.

Adding to envex's example, it's very easy to ensure that your stick posts keep a sticky class. Below is envex's example with a couple extra lines that ensures 'sticky' is replaced with a 'sticky-post' class instead.

function remove_sticky_class($classes) {

    $classes = array_diff($classes, array("sticky"));
    if ( is_sticky() ) {
        $classes[] = 'sticky-post';
    }
    return $classes;
}
add_filter('post_class','remove_sticky_class');
@awshout

This comment has been minimized.

Copy link
Author

awshout commented Mar 22, 2013

Just putting this out there as an alternate method to array_diff()

function replace_sticky_class( $classes ) {
    $count = count( $classes );
    for ( $i=0; $i < $count; $i++ ) {
        if ( $classes[$i] == 'sticky' ) {
            $classes[$i] = 'sticky-post';
        }
    }
    return $classes;
}
add_filter('post_class', 'replace_sticky_class');
@mindctrl

This comment has been minimized.

Copy link
Contributor

mindctrl commented Mar 22, 2013

My concern with changing the default WordPress class is that it could break plugins that rely on that class. I think a better way is to pass a different class name to Foundation during initialization, like so:

$(document).foundation('topbar', {stickyClass: 'sticky-top-bar'})

@awshout

This comment has been minimized.

Copy link
Author

awshout commented Mar 22, 2013

Oh no doubt that's a better solution. I didn't even know that option was added. Thanks @mindctrl

@envex

This comment has been minimized.

Copy link
Contributor

envex commented Mar 22, 2013

I may br wrong, but I think that only works with Foundation 4.

I'm sure the javascript is pretty similar between the versions, I think it's more the markup that's changed.

@mindctrl

This comment has been minimized.

Copy link
Contributor

mindctrl commented Mar 22, 2013

It won't work on F3. I thought we were only talking about F4. I think F3 could be easily adapted to accept that parameter. I'm no JS whiz though.

@milohuang milohuang referenced this pull request Mar 23, 2013

Closed

Reverie 4 - layout issue #159

@swngnblues

This comment has been minimized.

Copy link

swngnblues commented Apr 15, 2013

Rather than stripping the class out through a function, why not a CSS selector targeting the post class to change the position property?

#content .sticky {position:static;} in my style.css

Doesn't interfere with the navbar sticky.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment