Adding span tags within wp_list_pages list items2019 Community Moderator ElectionWays to give a wp_list_pages...
Approximately how much travel time was saved by the opening of the Suez Canal in 1869?
Why Is Death Allowed In the Matrix?
I’m planning on buying a laser printer but concerned about the life cycle of toner in the machine
Why, historically, did Gödel think CH was false?
Can divisibility rules for digits be generalized to sum of digits
Prove that NP is closed under karp reduction?
Can I make popcorn with any corn?
What do you call a Matrix-like slowdown and camera movement effect?
Theorem, big Paralist and Amsart
Do I have a twin with permutated remainders?
Test whether all array elements are factors of a number
Do VLANs within a subnet need to have their own subnet for router on a stick?
"You are your self first supporter", a more proper way to say it
Why dont electromagnetic waves interact with each other?
What typically incentivizes a professor to change jobs to a lower ranking university?
Is this a crack on the carbon frame?
Why does Kotter return in Welcome Back Kotter?
How to format long polynomial?
Minkowski space
How does one intimidate enemies without having the capacity for violence?
How to say job offer in Mandarin/Cantonese?
Writing rule stating superpower from different root cause is bad writing
How do we improve the relationship with a client software team that performs poorly and is becoming less collaborative?
How to find program name(s) of an installed package?
Adding span tags within wp_list_pages list items
2019 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 10 hours ago
Jalapeno Jack
asked 10 hours ago
Jalapeno JackJalapeno Jack
295
295
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
9 hours ago
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
8 hours ago
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
9 hours ago
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
8 hours ago
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
9 hours ago
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
8 hours ago
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 9 hours ago
jsmodjsmod
35512
35512
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
9 hours ago
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
8 hours ago
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
9 hours ago
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
8 hours ago
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
9 hours ago
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
9 hours ago
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
8 hours ago
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
8 hours ago
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