Skip to content

Instantly share code, notes, and snippets.

@halfempty

halfempty/functions.php

Last active December 17, 2015 12:19
Show Gist options
  • Save halfempty/5608516 to your computer and use it in GitHub Desktop.
Save halfempty/5608516 to your computer and use it in GitHub Desktop.
Download ZIP
WordPress Tag Search using jQuery. Demo and tutorial here: http://martyspellerberg.com/2011/11/creating-a-wordpress-tag-search-using-jquery/
Raw
functions.php
<?php
function showalltags() {
$tags = get_tags();
$html;
foreach ($tags as $tag){
$tag_link = get_tag_link($tag->term_id);
$html .= "<a href='{$tag_link}' title='{$tag->name} Tag' class='{$tag->slug}'>";
$html .= "{$tag->name}</a>";
}
echo $html;
}
?>
Raw
style.css
body {background: #000; font-family: sans-serif; color: #999; font-size: 14px;}
a {color: #fff; text-decoration: none;}
a:hover {text-decoration: underline;}
h3 {font-size: 18px; font-weight: 300; background: #999; color: #fff; text-shadow: 0 1px 0 #666; padding: .5em 1em; margin: 0; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px;}
p { text-align: center;}
/* Taxonomies */
.taxonomies {background: rgb(183,183,183); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; overflow: hidden; clear: both; width: 800px; margin: auto; text-align: left;}
.taxonomies a {color: #333;}
.catlist {list-style: none; margin: 0; padding: 0; overflow: hidden; list-style: none; padding: 0 .5em .5em .5em;}
.catlist a {display: block; float: left; width: 165px; margin: 0; padding: .25em;}
.taglist { padding: .25em; overflow: hidden; background: #ccc; font-size: 13px; }
.taglist a {display: block; float: left; -webkit-border-radius: 4px; -moz-border-radius: 4Px; border-radius: 4px; padding: 5px 10px; margin: .125em;}
.taglist a.selectedtag { background: #666; color: #fff; -moz-box-shadow:inset 0 0 10px rgba(0,0, 0, 0.5); -webkit-box-shadow:inset 0 0 10px rgba(0,0, 0, 0.5); box-shadow:inset 0 0 10px rgba(0,0, 0, 0.5); text-shadow: 0 1px 0 rgba(0,0, 0, 0.5);}
.searchcontrols { color: #000; overflow: hidden; padding-left: 1.2em; font-size: 12px; clear: both; }
.searchcontrols span {float: left; margin: 0; padding: .4em 0 .4em 0; margin: .5em 0; }
.searchcontrols span.slash {display: none;}
.searchcontrols a { float: left; padding: .3em .6em; margin: .5em 0;}
.searchcontrols a:hover {cursor: pointer;}
.searchcontrols a.selected {background: #666; color: #fff; -moz-box-shadow:inset 0 0 10px rgba(0,0, 0, 0.5); -webkit-box-shadow:inset 0 0 10px rgba(0,0, 0, 0.5); box-shadow:inset 0 0 10px rgba(0,0, 0, 0.5); text-shadow: 0 1px 0 rgba(0,0, 0, 0.5); border-color: #333;}
#any {-webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top: 1px solid #888; border-bottom: 1px solid #888; border-left: 1px solid #888; margin-left: .4em;}
#all {-webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top: 1px solid #888; border-right: 1px solid #888; border-bottom: 1px solid #888; margin-right: .4em;}
a.searchtags {font-weight: 600; text-shadow: 0 1px 0 #666; padding: .6em 1.2em; margin: 0; background: #999; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#666'); background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#666)); background: -moz-linear-gradient(top, #999, #666); float: right; margin-left: 1em; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomright: 8px; border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; color: #fff; font-size: 14px;}
a.searchtags:hover {cursor: pointer;}
Raw
tagsearch.html
<!-- Note that this file demonstrates what you'll want your HTML to look like. You don't need to make a copy of this on your site. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>WordPress jQuery Tag Search</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js?ver=3.2.1'></script>
<script type='text/javascript' src='tagsearch.js'></script>
</head>
<body>
<div class="taxonomies">
<h3 id="tags">Tags</h3>
<div class="taglist">
<a href='/tag/35mm' title='35mm Tag' class='35mm'>35mm</a>
<a href='/tag/advertising' title='advertising Tag' class='advertising'>advertising</a>
<a href='/tag/alley' title='Alley Tag' class='Alley'>alley</a>
<a href='/tag/animals' title='Animals Tag' class='Animals'>animals</a>
<a href='/tag/art' title='art Tag' class='art'>art</a>
<a href='/tag/autumn' title='autumn Tag' class='autumn'>autumn</a>
<a href='/tag/balcony' title='balcony Tag' class='balcony'>balcony</a>
<a href='/tag/bank' title='bank Tag' class='bank'>bank</a>
<a href='/tag/baseball' title='baseball Tag' class='baseball'>baseball</a>
<a href='/tag/beer' title='beer Tag' class='beer'>beer</a>
<a href='/tag/bikes' title='bikes Tag' class='bikes'>bikes</a>
<a href='/tag/billboard' title='billboard Tag' class='billboard'>billboard</a>
<a href='/tag/birds' title='birds Tag' class='birds'>birds</a>
<a href='/tag/blue' title='blue Tag' class='blue'>blue</a>
<a href='/tag/blues' title='blues Tag' class='blues'>blues</a>
<a href='/tag/boat' title='boat Tag' class='boat'>boat</a>
<a href='/tag/boats' title='boats Tag' class='boats'>boats</a>
<a href='/tag/bokeh' title='bokeh Tag' class='bokeh'>bokeh</a>
<a href='/tag/brick' title='brick Tag' class='brick'>brick</a>
<a href='/tag/bridge' title='bridge Tag' class='bridge'>bridge</a>
<a href='/tag/buildings' title='buildings Tag' class='buildings'>buildings</a>
<a href='/tag/bus' title='bus Tag' class='bus'>bus</a>
<a href='/tag/butterfly' title='butterfly Tag' class='butterfly'>butterfly</a>
<a href='/tag/camera' title='camera Tag' class='camera'>camera</a>
<a href='/tag/cats' title='cats Tag' class='cats'>cats</a>
<a href='/tag/chair' title='chair Tag' class='chair'>chair</a>
<a href='/tag/city' title='city Tag' class='city'>city</a>
</div>
</div>
<p>Note: This is a demo of the UI only; the search doesn't actually return results.</p>
</body>
</html>
Raw
tagsearch.js
jQuery(document).ready(function($) {
function initialLoad () {
$('.taxonomies h3').html('Select one or more tags, then press <em>&ldquo;Search Tags&rdquo;</em>');
$('.taglist').before('<div class="searchcontrols"><span>Find photos with </span><a id="any" class="tagtoggle selected">any</a><span class="slash"> / </span><a id="all" class="tagtoggle">all</a><span> of the selected criteria</span></div>');
$('.taxonomies').append('<div><a class="searchtags">Search Tags</a></div>');
}
initialLoad();
$('.taglist a').bind('click', function(event) {
event.preventDefault();
if ( $(this).hasClass('selectedtag') ) {
$(this).removeClass('selectedtag');
} else {
$(this).addClass('selectedtag');
}
});
function searchTags() {
var optionTexts = [];
$('.selectedtag').each(function() {
var str = $(this).attr('class').replace(/\sselectedtag+/g, '');
optionTexts.push(str);
});
if ( $('#any').hasClass('selected') ) {
var param = 'tag';
var separator = ',';
} else {
var param = 'tdo_tag';
var separator = '+';
}
var tagstring = optionTexts.join(separator);
window.location = '/?' + param + '=' + tagstring;
}
$('.tagtoggle').bind('click', function(event) {
event.preventDefault()
$('.tagtoggle').removeClass('selected');
$(this).addClass('selected');
});
$('.searchtags').bind('click', function(event) {
event.preventDefault()
searchTags();
});
});
@rezakianoosh
Copy link

Is WordPress 4.3 and above work?

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