Wordpress Code Snippets

Navigation

Navigation Section

Unique id is created based on the navigation names in the Wordpress admin - #menu-name-navigation. If the same navigation element is used multiple times (a main navigation duplicated for a mobile nav for example) a numerical value is appended - #menu-name-navigation-1.

Classes for current page - .current-menu-item, .current-menu-parent, .current-menu-ancestor

<ul id="menu-main-navigation" class="menu">
	<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-35">
		<a rel="page" href="#">Who We Are</a>
		<ul class="sub-menu">
			<li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-41 current_page_item menu-item-48">
				<a rel="page" href="#">Mentoring &amp; Advising</a>
			</li>
			<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49">
				<a rel="page" href="#">Academic Technologies</a>
			</li>
			<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50">
				<a rel="page" href="#">Local Clusters</a>
			</li>
			<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51">
				<a rel="page" href="#">Regional Sessions &amp; Events</a>
			</li>
			<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52">
				<a rel="page" href="#">Student Services</a>
			</li>
			<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53">
				<a rel="page" href="#">University Catalog</a>
			</li>
			<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54">
				<a rel="page" href="#">Frequently Asked Questions</a>
			</li>
		</ul>
	</li>
	<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
		<a rel="page" href="#">Our Learning Environments</a>
	</li>
	<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
		<a rel="page" href="#">Our Programs</a>
	</li>
	<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38">
		<a rel="page" href="#">Our Impact</a>
	</li>
	<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
		<a rel="page" href="#">How To Apply</a>
	</li>
</ul>

Breadcrumbs

<ul id="menu-main-navigation-1" class="menu">
	<li id="menu-item-" class="menu-item-">
		<a href="#">Home</a>
	</li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-35">
		<a rel="page" href="#">Who We Are</a>
		<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-42 current_page_item menu-item-49">
			<a rel="page" href="#">Academic Technologies</a>
		</li>
	</li>
</ul>

Pagination

<ul class="page-numbers">
	<li>
		<a class="prev page-numbers" href="#">Previous</a>
	</li>
	<li>
		<a class="page-numbers" href="#">1</a>
	</li>
	<li>
		<span class="page-numbers dots">…</span>
	</li>
	<li>
		<a class="page-numbers" href="#">4</a>
	</li>
	<li>
		<a class="page-numbers" href="#">5</a>
	</li>
	<li>
		<span class="page-numbers current">6</span>
	</li>
	<li>
		<a class="page-numbers" href="#">7</a>
	</li>
	<li>
		<a class="page-numbers" href="#">8</a>
	</li>
	<li>
		<a class="next page-numbers" href="#">Next</a>
	</li>
</ul>