Adding span tags within wp_list_pages list items The 2019 Stack Overflow Developer Survey Results Are In2019 Community Moderator ElectionWays to give a wp_list_pages menu link specific class names?Adding custom class names to anchor in wp_list_pagesList pages within a certain parent and show published monthShortcode adding p and br tagsListing current pages subp page in list items in the sidebarAdd class to the items in wp_list_pagesStop WordPress automatically adding <br> tags to post contentAdding elements to wp_list_pages (within <li>, but before <a>)List all Posts under heading in wp_list_pages menuHow to List All Pages (With their template names) Within a WebsiteUberMenu list current user's posts as menu items
Should I write numbers in words or as numerals when there are multiple next to each other?
Why don't Unix/Linux systems traverse through directories until they find the required version of a linked library?
How to manage monthly salary
Access elements in std::string where positon of string is greater than its size
Landlord wants to switch my lease to a "Land contract" to "get back at the city"
Carnot-Caratheodory metric
Idiomatic way to prevent slicing?
If a poisoned arrow's piercing damage is reduced to 0, do you still get poisoned?
The difference between dialogue marks
A poker game description that does not feel gimmicky
Springs with some finite mass
Why is Grand Jury testimony secret?
What is this 4-propeller plane?
What are the motivations for publishing new editions of an existing textbook, beyond new discoveries in a field?
Is flight data recorder erased after every flight?
Any good smartcontract for "business calendar" oracles?
Could JWST stay at L2 "forever"?
What tool would a Roman-age civilization have to grind silver and other metals into dust?
What does Linus Torvalds means when he says that git "never ever" tracks a file?
What do hard-Brexiteers want with respect to the Irish border?
"Riffle" two strings
Confusion about non-derivable continuous functions
Manuscript was "unsubmitted" because the manuscript was deposited in Arxiv Preprints
What do the Banks children have against barley water?
Adding span tags within wp_list_pages list items
The 2019 Stack Overflow Developer Survey Results Are In2019 Community Moderator ElectionWays to give a wp_list_pages menu link specific class names?Adding custom class names to anchor in wp_list_pagesList pages within a certain parent and show published monthShortcode adding p and br tagsListing current pages subp page in list items in the sidebarAdd class to the items in wp_list_pagesStop WordPress automatically adding <br> tags to post contentAdding elements to wp_list_pages (within <li>, but before <a>)List all Posts under heading in wp_list_pages menuHow to List All Pages (With their template names) Within a WebsiteUberMenu list current user's posts as menu items
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I am using this shortcode to produce a list of child pages of a specified parent. I would like to replace the list items default discs with a font awesome icon. According to the font awesome documentation it is done like this:
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
</ul>
And this is the code I am using to to generate my list of items:
function childpages_shortcode_callback( $atts )
$atts = shortcode_atts( array(
'parent' => false,
), $atts, 'childpages' );
$parent_id = false;
if ( $atts['parent'] )
$parent = get_page_by_path( $atts['parent'] );
if ( $parent )
$parent_id = $parent->ID;
else // if no parent passed, then show children of current page
$parent_id = get_the_ID();
$result = '';
if ( ! $parent_id ) // don't waste time getting pages, if we couldn't get parent page
return $result;
$childpages = wp_list_pages( array(
'sort_column' => 'menu_order',
'title_li' => '',
'child_of' => $parent_id,
'echo' => 0
) );
if ( $childpages )
$result =
'<h2>' . get_the_title( $parent_id ) . '</h2>' .
'<ul class="fa-ul">' . $childpages . '</ul>';
return $result;
add_shortcode( 'childpages', 'childpages_shortcode_callback' );
As you can see I have managed to add the "fa-ul" class to the resulting unordered list, but I cannot work out how to add the span and i elements between the li tags.
Normally I would just prepend these with jQuery and call it a day, but I would like to know if there is a wordpress approach?
Thankyou
shortcode wp-list-pages
add a comment |
I am using this shortcode to produce a list of child pages of a specified parent. I would like to replace the list items default discs with a font awesome icon. According to the font awesome documentation it is done like this:
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
</ul>
And this is the code I am using to to generate my list of items:
function childpages_shortcode_callback( $atts )
$atts = shortcode_atts( array(
'parent' => false,
), $atts, 'childpages' );
$parent_id = false;
if ( $atts['parent'] )
$parent = get_page_by_path( $atts['parent'] );
if ( $parent )
$parent_id = $parent->ID;
else // if no parent passed, then show children of current page
$parent_id = get_the_ID();
$result = '';
if ( ! $parent_id ) // don't waste time getting pages, if we couldn't get parent page
return $result;
$childpages = wp_list_pages( array(
'sort_column' => 'menu_order',
'title_li' => '',
'child_of' => $parent_id,
'echo' => 0
) );
if ( $childpages )
$result =
'<h2>' . get_the_title( $parent_id ) . '</h2>' .
'<ul class="fa-ul">' . $childpages . '</ul>';
return $result;
add_shortcode( 'childpages', 'childpages_shortcode_callback' );
As you can see I have managed to add the "fa-ul" class to the resulting unordered list, but I cannot work out how to add the span and i elements between the li tags.
Normally I would just prepend these with jQuery and call it a day, but I would like to know if there is a wordpress approach?
Thankyou
shortcode wp-list-pages
add a comment |
I am using this shortcode to produce a list of child pages of a specified parent. I would like to replace the list items default discs with a font awesome icon. According to the font awesome documentation it is done like this:
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
</ul>
And this is the code I am using to to generate my list of items:
function childpages_shortcode_callback( $atts )
$atts = shortcode_atts( array(
'parent' => false,
), $atts, 'childpages' );
$parent_id = false;
if ( $atts['parent'] )
$parent = get_page_by_path( $atts['parent'] );
if ( $parent )
$parent_id = $parent->ID;
else // if no parent passed, then show children of current page
$parent_id = get_the_ID();
$result = '';
if ( ! $parent_id ) // don't waste time getting pages, if we couldn't get parent page
return $result;
$childpages = wp_list_pages( array(
'sort_column' => 'menu_order',
'title_li' => '',
'child_of' => $parent_id,
'echo' => 0
) );
if ( $childpages )
$result =
'<h2>' . get_the_title( $parent_id ) . '</h2>' .
'<ul class="fa-ul">' . $childpages . '</ul>';
return $result;
add_shortcode( 'childpages', 'childpages_shortcode_callback' );
As you can see I have managed to add the "fa-ul" class to the resulting unordered list, but I cannot work out how to add the span and i elements between the li tags.
Normally I would just prepend these with jQuery and call it a day, but I would like to know if there is a wordpress approach?
Thankyou
shortcode wp-list-pages
I am using this shortcode to produce a list of child pages of a specified parent. I would like to replace the list items default discs with a font awesome icon. According to the font awesome documentation it is done like this:
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
</ul>
And this is the code I am using to to generate my list of items:
function childpages_shortcode_callback( $atts )
$atts = shortcode_atts( array(
'parent' => false,
), $atts, 'childpages' );
$parent_id = false;
if ( $atts['parent'] )
$parent = get_page_by_path( $atts['parent'] );
if ( $parent )
$parent_id = $parent->ID;
else // if no parent passed, then show children of current page
$parent_id = get_the_ID();
$result = '';
if ( ! $parent_id ) // don't waste time getting pages, if we couldn't get parent page
return $result;
$childpages = wp_list_pages( array(
'sort_column' => 'menu_order',
'title_li' => '',
'child_of' => $parent_id,
'echo' => 0
) );
if ( $childpages )
$result =
'<h2>' . get_the_title( $parent_id ) . '</h2>' .
'<ul class="fa-ul">' . $childpages . '</ul>';
return $result;
add_shortcode( 'childpages', 'childpages_shortcode_callback' );
As you can see I have managed to add the "fa-ul" class to the resulting unordered list, but I cannot work out how to add the span and i elements between the li tags.
Normally I would just prepend these with jQuery and call it a day, but I would like to know if there is a wordpress approach?
Thankyou
shortcode wp-list-pages
shortcode wp-list-pages
edited Apr 6 at 17:20
Jalapeno Jack
asked Apr 6 at 17:06
Jalapeno JackJalapeno Jack
345
345
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
There is more than one way to accomplish this in WordPress.
Option 1: Using the link_before
parameter with wp_list_pages
.
$childpages = wp_list_pages( array(
'sort_column' => 'menu_order',
'title_li' => '',
'child_of' => $parent_id,
'echo' => 0,
'link_before' => '<span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>'
) );
Option 2: Create a custom walker, then add the walker
parameter to wp_list_pages
.
See this answer here on WordPress StackExchange for more details and an example.
Option 3: Use CSS pseudo elements.
While not a strictly WordPress method, you could use CSS pseudo elements to replace the list items default discs with a Font Awesome icon. You can also animate them with only CSS pseudo elements.
First, in your CSS, be sure to set the rule for your list to not use the disc as a bullet.
ul list-style-type: none;
Then, using the ::before
pseudo element, set your chosen Font Awesome icon. For example:
ul li::before
content: "f110";
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 10px;
The above is enough if you just want static icons. To add the spinning animation using CSS, you can use the following for li::before
instead:
ul li::before
content: "f110";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: -20px;
position: absolute;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
Of course, the padding
and margin
settings might need to be adjusted according to your theme and preferences.
I learned about the above CSS technique from an answer to a different question on StackOverflow and have used it myself.
However, when it comes to WordPress, I cannot say for sure which of the above methods (or others) is the best with regards to performance/practice. It may be a matter of personal preference and/or time, or it may depend on other factors.
I hope you find this useful and that it helps you accomplish what you need :)
Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new
– Jalapeno Jack
Apr 6 at 18:51
I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress'link_before
parameter seems more theme friendly... 🤷🏻♀️
– jsmod
Apr 6 at 18:55
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "110"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwordpress.stackexchange.com%2fquestions%2f333671%2fadding-span-tags-within-wp-list-pages-list-items%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
There is more than one way to accomplish this in WordPress.
Option 1: Using the link_before
parameter with wp_list_pages
.
$childpages = wp_list_pages( array(
'sort_column' => 'menu_order',
'title_li' => '',
'child_of' => $parent_id,
'echo' => 0,
'link_before' => '<span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>'
) );
Option 2: Create a custom walker, then add the walker
parameter to wp_list_pages
.
See this answer here on WordPress StackExchange for more details and an example.
Option 3: Use CSS pseudo elements.
While not a strictly WordPress method, you could use CSS pseudo elements to replace the list items default discs with a Font Awesome icon. You can also animate them with only CSS pseudo elements.
First, in your CSS, be sure to set the rule for your list to not use the disc as a bullet.
ul list-style-type: none;
Then, using the ::before
pseudo element, set your chosen Font Awesome icon. For example:
ul li::before
content: "f110";
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 10px;
The above is enough if you just want static icons. To add the spinning animation using CSS, you can use the following for li::before
instead:
ul li::before
content: "f110";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: -20px;
position: absolute;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
Of course, the padding
and margin
settings might need to be adjusted according to your theme and preferences.
I learned about the above CSS technique from an answer to a different question on StackOverflow and have used it myself.
However, when it comes to WordPress, I cannot say for sure which of the above methods (or others) is the best with regards to performance/practice. It may be a matter of personal preference and/or time, or it may depend on other factors.
I hope you find this useful and that it helps you accomplish what you need :)
Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new
– Jalapeno Jack
Apr 6 at 18:51
I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress'link_before
parameter seems more theme friendly... 🤷🏻♀️
– jsmod
Apr 6 at 18:55
add a comment |
There is more than one way to accomplish this in WordPress.
Option 1: Using the link_before
parameter with wp_list_pages
.
$childpages = wp_list_pages( array(
'sort_column' => 'menu_order',
'title_li' => '',
'child_of' => $parent_id,
'echo' => 0,
'link_before' => '<span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>'
) );
Option 2: Create a custom walker, then add the walker
parameter to wp_list_pages
.
See this answer here on WordPress StackExchange for more details and an example.
Option 3: Use CSS pseudo elements.
While not a strictly WordPress method, you could use CSS pseudo elements to replace the list items default discs with a Font Awesome icon. You can also animate them with only CSS pseudo elements.
First, in your CSS, be sure to set the rule for your list to not use the disc as a bullet.
ul list-style-type: none;
Then, using the ::before
pseudo element, set your chosen Font Awesome icon. For example:
ul li::before
content: "f110";
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 10px;
The above is enough if you just want static icons. To add the spinning animation using CSS, you can use the following for li::before
instead:
ul li::before
content: "f110";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: -20px;
position: absolute;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
Of course, the padding
and margin
settings might need to be adjusted according to your theme and preferences.
I learned about the above CSS technique from an answer to a different question on StackOverflow and have used it myself.
However, when it comes to WordPress, I cannot say for sure which of the above methods (or others) is the best with regards to performance/practice. It may be a matter of personal preference and/or time, or it may depend on other factors.
I hope you find this useful and that it helps you accomplish what you need :)
Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new
– Jalapeno Jack
Apr 6 at 18:51
I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress'link_before
parameter seems more theme friendly... 🤷🏻♀️
– jsmod
Apr 6 at 18:55
add a comment |
There is more than one way to accomplish this in WordPress.
Option 1: Using the link_before
parameter with wp_list_pages
.
$childpages = wp_list_pages( array(
'sort_column' => 'menu_order',
'title_li' => '',
'child_of' => $parent_id,
'echo' => 0,
'link_before' => '<span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>'
) );
Option 2: Create a custom walker, then add the walker
parameter to wp_list_pages
.
See this answer here on WordPress StackExchange for more details and an example.
Option 3: Use CSS pseudo elements.
While not a strictly WordPress method, you could use CSS pseudo elements to replace the list items default discs with a Font Awesome icon. You can also animate them with only CSS pseudo elements.
First, in your CSS, be sure to set the rule for your list to not use the disc as a bullet.
ul list-style-type: none;
Then, using the ::before
pseudo element, set your chosen Font Awesome icon. For example:
ul li::before
content: "f110";
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 10px;
The above is enough if you just want static icons. To add the spinning animation using CSS, you can use the following for li::before
instead:
ul li::before
content: "f110";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: -20px;
position: absolute;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
Of course, the padding
and margin
settings might need to be adjusted according to your theme and preferences.
I learned about the above CSS technique from an answer to a different question on StackOverflow and have used it myself.
However, when it comes to WordPress, I cannot say for sure which of the above methods (or others) is the best with regards to performance/practice. It may be a matter of personal preference and/or time, or it may depend on other factors.
I hope you find this useful and that it helps you accomplish what you need :)
There is more than one way to accomplish this in WordPress.
Option 1: Using the link_before
parameter with wp_list_pages
.
$childpages = wp_list_pages( array(
'sort_column' => 'menu_order',
'title_li' => '',
'child_of' => $parent_id,
'echo' => 0,
'link_before' => '<span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>'
) );
Option 2: Create a custom walker, then add the walker
parameter to wp_list_pages
.
See this answer here on WordPress StackExchange for more details and an example.
Option 3: Use CSS pseudo elements.
While not a strictly WordPress method, you could use CSS pseudo elements to replace the list items default discs with a Font Awesome icon. You can also animate them with only CSS pseudo elements.
First, in your CSS, be sure to set the rule for your list to not use the disc as a bullet.
ul list-style-type: none;
Then, using the ::before
pseudo element, set your chosen Font Awesome icon. For example:
ul li::before
content: "f110";
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 10px;
The above is enough if you just want static icons. To add the spinning animation using CSS, you can use the following for li::before
instead:
ul li::before
content: "f110";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: -20px;
position: absolute;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
Of course, the padding
and margin
settings might need to be adjusted according to your theme and preferences.
I learned about the above CSS technique from an answer to a different question on StackOverflow and have used it myself.
However, when it comes to WordPress, I cannot say for sure which of the above methods (or others) is the best with regards to performance/practice. It may be a matter of personal preference and/or time, or it may depend on other factors.
I hope you find this useful and that it helps you accomplish what you need :)
answered Apr 6 at 18:42
jsmodjsmod
36712
36712
Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new
– Jalapeno Jack
Apr 6 at 18:51
I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress'link_before
parameter seems more theme friendly... 🤷🏻♀️
– jsmod
Apr 6 at 18:55
add a comment |
Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new
– Jalapeno Jack
Apr 6 at 18:51
I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress'link_before
parameter seems more theme friendly... 🤷🏻♀️
– jsmod
Apr 6 at 18:55
Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new
– Jalapeno Jack
Apr 6 at 18:51
Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new
– Jalapeno Jack
Apr 6 at 18:51
I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress'
link_before
parameter seems more theme friendly... 🤷🏻♀️– jsmod
Apr 6 at 18:55
I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress'
link_before
parameter seems more theme friendly... 🤷🏻♀️– jsmod
Apr 6 at 18:55
add a comment |
Thanks for contributing an answer to WordPress Development Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwordpress.stackexchange.com%2fquestions%2f333671%2fadding-span-tags-within-wp-list-pages-list-items%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
-shortcode, wp-list-pages