WordPress.org

Ready to get started?Download WordPress

Forums

List Pages Shortcode
[resolved] Suggestion: adding additional classes (6 posts)

  1. dylanjameswagner
    Member
    Posted 5 months ago #

    Developers,

    Currently this plugin outputs a unordered list with a different class for each shortcode used - list-pages, sibling-pages, child-pages.

    I believe it would be quite useful for styling purposes if they all lists had a class in common so they could all be selected and styled easily. Then applied a specific class for child-pages and sibling-pages lists.

    Example: Part I - HTML

    <ul class="list-pages">

    <ul class="child-pages">

    <ul class="sibling-pages">

    Example: Part II - CSS
    Currently i have to select each class version to style all of them with the same base styles.

    .list-pages,
    .sibling-pages,
    .child-pages {
    text-align: center; }
    .list-pages li,
    .sibling-pages li,
    .child-pages li {
    list-style: none;
    display: inline-block; }
    .list-pages a,
    .sibling-pages a,
    .child-pages a {
    padding: 1em; }

    Solution: Part I
    Provide a class for all lists that are created, as well as more specific classes

    <ul class="list-pages">

    <ul class="list-pages child-pages">

    <ul class="list-pages sibling-pages">

    Solution: Part II
    With a base class available I could select all types and style base styles.

    .list-pages {
    text-align: center; }
    .list-pages li {
    list-style: none;
    display: inline-block; }
    .list-pages a {
    padding: 1em; }

    Solution: Part III
    Secondary classes allow me to target child-pages or sibling-pages and add styles or override existing styles.

    .sibling-pages {}
    .sibling-pages li { }
    .sibling-pages a {}

    .child-pages {}
    .child-pages li { }
    .child-pages a {}

    Thanks for taking the time to read this. I have been using your plugin for some time, it is super simple to use and maintain, and it saves me quite a lot of headache. I hope you can see the usefulness of my suggestion.

    https://wordpress.org/plugins/list-pages-shortcode/

  2. Ben Huson
    Member
    Plugin Author

    Posted 5 months ago #

    I think your approach makes sense and certain simplifies the styling process.

    It may have a slight impact on some existing users if they have chosen to style 'list-pages' and 'sibling-pages' completely differently where 'sibling-pages' could unintentionally inherit some of the styling of 'list-pages'.

    For that reason I would consider it might be better to add a new style 'list-pages-shortcode' to all lists and append the existing style so you would end up with:

    .list-pages-shortcode.list-pages {}
    .list-pages-shortcode.sibling-pages {}
    .list-pages-shortcode.child-pages {}

    More verbose but is backward compatible.

    What do you think?

  3. dylanjameswagner
    Member
    Posted 5 months ago #

    I had considered this, but couldn't think of a good class name since .list-pages was already being used. I think your solution works to solve that and retain clear backward compatibility.

    Thanks Ben for hearing me out, hope to see this in a future update!

  4. Ben Huson
    Member
    Plugin Author

    Posted 5 months ago #

    It's a simple tweak so I'll make sure it's in the next release.

  5. dylanjameswagner
    Member
    Posted 5 months ago #

    Awesome!

  6. Ben Huson
    Member
    Plugin Author

    Posted 5 months ago #

    Now released in version 1.7

Reply

You must log in to post.

About this Plugin

About this Topic