Footer

Pro Plugins

The main characteristic of pro plugins is its simple branded footer, it consists of three main elements: the brand, WPMU DEV site important links, and WPMU DEV links to social media accounts. Preview this footer at bottom of this page by clicking on blue button above.

Element Markup

<!-- ELEMENT: The Brand -->
<div class="sui-footer">Made with <span class="sui-icon-heart"></span> by WPMU DEV</div>

<!-- ELEMENT: Navigation -->
<ul class="sui-footer-nav">
	<li><a href="https://premium.wpmudev.org/hub/" target="_blank">The Hub</a></li>
	<li><a href="https://premium.wpmudev.org/projects/category/plugins/" target="_blank">Plugins</a></li>
	<li><a href="https://premium.wpmudev.org/roadmap/" target="_blank">Roadmap</a></li>
	<li><a href="https://premium.wpmudev.org/hub/support/" target="_blank">Support</a></li>
	<li><a href="https://premium.wpmudev.org/docs/" target="_blank">Docs</a></li>
	<li><a href="https://premium.wpmudev.org/hub/community/" target="_blank">Community</a></li>
	<li><a href="https://premium.wpmudev.org/academy/" target="_blank">Academy</a></li>
	<li><a href="https://premium.wpmudev.org/terms-of-service/" target="_blank">Terms of Service</a></li>
	<li><a href="https://incsub.com/privacy-policy/" target="_blank">Privacy Policy</a></li>
</ul>

<!-- ELEMENT: Social Media -->
<ul class="sui-footer-social">
	<li><a href="https://www.facebook.com/wpmudev" target="_blank">
		<span class="sui-icon-social-facebook" aria-hidden="true"></span>
		<span class="sui-screen-reader-text">Facebook</span>
	</a></li>
	<li><a href="https://twitter.com/wpmudev" target="_blank">
		<span class="sui-icon-social-twitter" aria-hidden="true"></span></a>
		<span class="sui-screen-reader-text">Twitter</span>
	</li>
	<li><a href="https://www.instagram.com/wpmu_dev/" target="_blank">
		<span class="sui-icon-instagram" aria-hidden="true"></span>
		<span class="sui-screen-reader-text">Instagram</span>
	</a></li>
</ul>

Free Plugins

There are two different footers for free plugins: basic, which is similar to pro plugins footer; and cross-sell, which contains some banners promoting our top plugins.

Basic Footer This footer goes at the end of all pages except Dashboard page. You can preview a sample of it by clicking the button below.

Element Markup

<!-- ELEMENT: The Brand -->
<div class="sui-footer">Made with <span class="sui-icon-heart"></span> by WPMU DEV</div>

<!-- ELEMENT: Navigation -->
<ul class="sui-footer-nav">
	<li><a href="https://profiles.wordpress.org/wpmudev#content-plugins" target="_blank">Free Plugins</a></li>
	<li><a href="https://premium.wpmudev.org/features/" target="_blank">Membership</a></li>
	<li><a href="https://premium.wpmudev.org/roadmap/" target="_blank">Roadmap</a></li>
	<li><a href="https://wordpress.org/support/plugin/plugin-name" target="_blank">Support</a></li>
	<li><a href="https://premium.wpmudev.org/docs/" target="_blank">Docs</a></li>
	<li><a href="https://premium.wpmudev.org/hub-welcome/" target="_blank">The Hub</a></li>
	<li><a href="https://premium.wpmudev.org/terms-of-service/" target="_blank">Terms of Service</a></li>
	<li><a href="https://incsub.com/privacy-policy/" target="_blank">Privacy Policy</a></li>
</ul>

<!-- ELEMENT: Social Media -->
<ul class="sui-footer-social">
	<li><a href="https://www.facebook.com/wpmudev" target="_blank">
		<span class="sui-icon-social-facebook" aria-hidden="true"></span>
		<span class="sui-screen-reader-text">Facebook</span>
	</a></li>
	<li><a href="https://twitter.com/wpmudev" target="_blank">
		<span class="sui-icon-social-twitter" aria-hidden="true"></span></a>
		<span class="sui-screen-reader-text">Twitter</span>
	</li>
	<li><a href="https://www.instagram.com/wpmu_dev/" target="_blank">
		<span class="sui-icon-instagram" aria-hidden="true"></span>
		<span class="sui-screen-reader-text">Instagram</span>
	</a></li>
</ul>

Cross Sell Footer This footer goes at the end of Dashboard page only. It will allow us to promote our top products. You can preview a sample of it by clicking on the button below.

Element Markup

<div id="sui-cross-sell-footer" class="sui-row">

	<div><span class="sui-icon-plugin-2"></span></div>

	<h3>Check out our other free wordpress.org plugins!</h3>

</div>

<!-- Cross-Sell Modules -->
<div class="sui-row sui-cross-sell-modules">

	<div class="sui-col-md-4">

		<!-- Cross-Sell Banner #1 -->
		<div aria-hidden="true" class="sui-cross-1">
			<span></span>
		</div>

		<div class="sui-box">
			<div class="sui-box-body">
				<h3>Smush Image Compression and Optimization</h3>
				<p>Resize, optimize and compress all of your images with the incredibly powerful and award-winning, 100% free WordPress image optimizer.</p>
				<a
					href="https://wordpress.org/plugins/wp-smushit/"
					target="_blank"
					class="sui-button sui-button-ghost"
				>
					View features  <span aria-hidden="true" class="sui-icon-arrow-right"></span>
				</a>
			</div>
		</div>

	</div>

	<div class="sui-col-md-4">

		<!-- Cross-Sell Banner #2 -->
		<div aria-hidden="true" class="sui-cross-2">
			<span></span>
		</div>

		<div class="sui-box">
			<div class="sui-box-body">
				<h3>Defender Security, Monitoring, and Hack Protection</h3>
				<p>Security Tweaks & Recommendations, File & Malware Scanning, Login & 404 Lockout Protection, Two-Factor Authentication & more.</p>
				<a
					href="https://wordpress.org/plugins/defender-security/"
					target="_blank"
					class="sui-button sui-button-ghost"
				>
					View features  <span aria-hidden="true" class="sui-icon-arrow-right"></span>
				</a>
			</div>
		</div>

	</div>

	<div class="sui-col-md-4">

		<!-- Cross-Sell Banner #3 -->
		<div aria-hidden="true" class="sui-cross-3">
			<span></span>
		</div>

		<div class="sui-box">
			<div class="sui-box-body">
				<h3>SmartCrawl Search Engine Optimization</h3>
				<p>Customize Titles & Meta Data, OpenGraph, Twitter & Pinterest Support, Auto-Keyword Linking, SEO & Readability Analysis, Sitemaps, URL Crawler & more.</p>
				<span class="sui-tag">Coming Soon</span>
			</div>
		</div>

	</div>

</div>

<div class="sui-cross-sell-bottom">

	<h3>WPMU DEV - Your WordPress Toolkit</h3>

	<p>Pretty much everything you need for developing and managing WordPress based websites, and then some.</p>

	<a
		href="https://premium.wpmudev.org/"
		target="_blank"
		role="button"
		class="sui-button sui-button-green"
	>
		Learn more
	</a>

	<img
		class="sui-image"
		src="your-path/images/dev-team.png"
		srcset="your-path/images/dev-team@2x.png 2x"
		aria-hidden="true"
	/>

</div>

<!-- ELEMENT: The Brand -->
<div class="sui-footer">Made with <span class="sui-icon-heart"></span> by WPMU DEV</div>

<!-- ELEMENT: Navigation -->
<ul class="sui-footer-nav">
	<li><a href="https://profiles.wordpress.org/wpmudev#content-plugins" target="_blank">Free Plugins</a></li>
	<li><a href="https://premium.wpmudev.org/features/" target="_blank">Membership</a></li>
	<li><a href="https://premium.wpmudev.org/roadmap/" target="_blank">Roadmap</a></li>
	<li><a href="https://wordpress.org/support/plugin/plugin-name" target="_blank">Support</a></li>
	<li><a href="https://premium.wpmudev.org/docs/" target="_blank">Docs</a></li>
	<li><a href="https://premium.wpmudev.org/hub-welcome/" target="_blank">The Hub</a></li>
	<li><a href="https://premium.wpmudev.org/terms-of-service/" target="_blank">Terms of Service</a></li>
	<li><a href="https://incsub.com/privacy-policy/" target="_blank">Privacy Policy</a></li>
</ul>

<!-- ELEMENT: Social Media -->
<ul class="sui-footer-social">
	<li><a href="https://www.facebook.com/wpmudev" target="_blank">
		<span class="sui-icon-social-facebook" aria-hidden="true"></span>
		<span class="sui-screen-reader-text">Facebook</span>
	</a></li>
	<li><a href="https://twitter.com/wpmudev" target="_blank">
		<span class="sui-icon-social-twitter" aria-hidden="true"></span></a>
		<span class="sui-screen-reader-text">Twitter</span>
	</li>
	<li><a href="https://www.instagram.com/wpmu_dev/" target="_blank">
		<span class="sui-icon-instagram" aria-hidden="true"></span>
		<span class="sui-screen-reader-text">Instagram</span>
	</a></li>
</ul>

Requirements

Remember you can have a maximum of 3 banners in the cross sell section. To change them you will do it using your SCSS file:

/**
* Cross Sell Banners
* In lowercase insert the name of the plugin you want to promote.
*
* NOTE: This code must go on your SCSS file before you import shared-ui.
*/

$cross-sell-1: 'smush';
$cross-sell-2: 'defender';
$cross-sell-3: 'smartcrawl';