WordPress: Tag List Shortcode

Did you ever want to list all the tags of your blog on a single page?
Create this shortcode in your theme and you will be able to do it.

The Code

Add the following code to your functions.php.

/**************************************************************************************
 * Shorcode function for creating a tag list styled with bootstrap.
 *
 * @param style use "button" to print the tags as buttons. 
 *                  Any other value will print badges.
 *************************************************************************************/
function my_taglist($atts) { 
	$attributes = shortcode_atts( array(
		'style' => 'button', //tag or button
	), $atts );
	
	$tags = get_tags();
	$html = '<div id="taglist" class="flex-row-wrap">';
	foreach ( $tags as $tag ) {
		$tag_link = get_tag_link( $tag->term_id );
		
		if($attributes['style'] == 'button'){		
			$html .= '<a class="btn btn-info flex-item-grow m-1" href="' . $tag_link . '">' . $tag->name . '</a>';
		} 
		else{
			$html .= '<a class="badge badge-info m-1" href="' . $tag_link . '">' . $tag->name . '</a>';
		}
	}
	$html .= '</div>';
			 
	return $html;
}
add_shortcode( 'taglist', 'my_taglist' );	

The resulting html is styled with bootstrap and the following custom css classes:

.flex-row-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: stretch;
}

.flex-item-grow{
	flex-grow: 1;
}

Using the Shortcode

In the editor, add the shortcode:

//styled as buttons
[taglist]
//styled as badges
[taglist style="badge"]

Button Example:

abradvantagesafassetsafbrushesaffinityaffinity photoaffinityphotoalertalienampereanalyzerantAPC-Sarticifialartificialawkbarbecuebarbequebashbathroombbqbitmapblueprintblueprintsboltbootstrapbrightnessbrushbrushesburnburningcameracamera rawcigarettecirclecircuitcolorfulcolorizedcombustcombustioncomparecomputer scienceconfigurationcontrastconvertcreatecrematecrumbcrumbscurrentcurvescustomercutecybercyberspacedangerdatabasedecorationdesigndesignerdetailsdetonatedetonationdevelopmentdigitaldirtdirtydivdocumentationdogdotsdownloaddramadramaticdrawingdrawingsdrinkdropdropsDSLRdustdustydynamiceffecteffectselectricelectricalelectricityelectroelectronicsenergyenhancementsepsexceptionexplodeexplosionexplosivefacefantasyfictionfieldfilterfilthfilthyfirefixflameflamesflashflourfluidfontawesomeformulafreefreewareftpfunctionfunnyfuturefuturisticgallerygalvanicgamegaminggasturbinegaugegawkgbrgenericgifgimpgirlgithubgradientgradient mapgraphsgreengrillinggrungeguitarhalloweenhandhanddrawnharheadershellhellfirehihi-techi-techhighhigh resolutionhitechhothtaccesshttp archiveillustrationimageimagesimpactincenerateinfographicinfographicsinfraredinkscapeinstallinstructionsissuesITitemsjavajavamonamourjavascriptjpegjpgjquerylandscapelayer styleslevelslightlightinglightninglightningboltlightningslinelineslinuxlistloadlocalhostlovelymapmaskmathematicsmavenmechanicalmechanicsmethodmigratemindmusicnaturalnatureohmopensourceoptimizeoutsideoverlayoverlayspageparodyparticleparticlespdfperformancephotophotographyphotomanipulationphotoshootphotoshoppicturepicturespierluigiplantpngpointspoolpositivepostpowderpowerpregnancypregnantpreparationprocessproductpsdpseudopunkpythonpython-furadialrainrainbowrealisticredred treesrefineremoveresresizingresolutionsandscalescaryscattersci-fisciencescifiscorchscriptingscyteservershapeshapes bitmapshellshockshockingshootshortshortcodesignssizeskeletonskullsmart objectsmokesmoothsolid colorspacesparksparklessparklingsparksspecialspecklesspermspiritualsplashsplashessplashingstampstarssteamsteampunkstepstepsstorystrokestrokesstrutsstylessuckssvgswimmingsystemtabletable of contentstaglisttechtechnologytemplatethemethunderthunderboltthunderstormtifftitlestoctorchtracingtravellingturbinetutorialvectorvectorizationvernettoversusvideovoltvoltagewaterwebweblogicwetwhite treeswirewomanwordpresswp-configyogayoutube

Badge Example:

abradvantagesafassetsafbrushesaffinityaffinity photoaffinityphotoalertalienampereanalyzerantAPC-Sarticifialartificialawkbarbecuebarbequebashbathroombbqbitmapblueprintblueprintsboltbootstrapbrightnessbrushbrushesburnburningcameracamera rawcigarettecirclecircuitcolorfulcolorizedcombustcombustioncomparecomputer scienceconfigurationcontrastconvertcreatecrematecrumbcrumbscurrentcurvescustomercutecybercyberspacedangerdatabasedecorationdesigndesignerdetailsdetonatedetonationdevelopmentdigitaldirtdirtydivdocumentationdogdotsdownloaddramadramaticdrawingdrawingsdrinkdropdropsDSLRdustdustydynamiceffecteffectselectricelectricalelectricityelectroelectronicsenergyenhancementsepsexceptionexplodeexplosionexplosivefacefantasyfictionfieldfilterfilthfilthyfirefixflameflamesflashflourfluidfontawesomeformulafreefreewareftpfunctionfunnyfuturefuturisticgallerygalvanicgamegaminggasturbinegaugegawkgbrgenericgifgimpgirlgithubgradientgradient mapgraphsgreengrillinggrungeguitarhalloweenhandhanddrawnharheadershellhellfirehihi-techi-techhighhigh resolutionhitechhothtaccesshttp archiveillustrationimageimagesimpactincenerateinfographicinfographicsinfraredinkscapeinstallinstructionsissuesITitemsjavajavamonamourjavascriptjpegjpgjquerylandscapelayer styleslevelslightlightinglightninglightningboltlightningslinelineslinuxlistloadlocalhostlovelymapmaskmathematicsmavenmechanicalmechanicsmethodmigratemindmusicnaturalnatureohmopensourceoptimizeoutsideoverlayoverlayspageparodyparticleparticlespdfperformancephotophotographyphotomanipulationphotoshootphotoshoppicturepicturespierluigiplantpngpointspoolpositivepostpowderpowerpregnancypregnantpreparationprocessproductpsdpseudopunkpythonpython-furadialrainrainbowrealisticredred treesrefineremoveresresizingresolutionsandscalescaryscattersci-fisciencescifiscorchscriptingscyteservershapeshapes bitmapshellshockshockingshootshortshortcodesignssizeskeletonskullsmart objectsmokesmoothsolid colorspacesparksparklessparklingsparksspecialspecklesspermspiritualsplashsplashessplashingstampstarssteamsteampunkstepstepsstorystrokestrokesstrutsstylessuckssvgswimmingsystemtabletable of contentstaglisttechtechnologytemplatethemethunderthunderboltthunderstormtifftitlestoctorchtracingtravellingturbinetutorialvectorvectorizationvernettoversusvideovoltvoltagewaterwebweblogicwetwhite treeswirewomanwordpresswp-configyogayoutube

Share:


developmentshortcodetaglistthemewordpress

Leave a Reply

Your email address will not be published.