Minimalizing the backend experience for network site owners

I've been building sites for more years. I've used Wordpress (love), Joomla (hate), Drupal (love) and others like Magento, osCommerce, Prestashop, expressionengine and even Django (hmm...) and Rails for a project. There's a right tool for every job!
But no matter the tools we use as developers, one thing always stays the same: The client!
So having gathered all my experience working for others I wanted to do something for myself and make it really good. I chose WordPress for it's ease of use and to be frank because MarketPress did most of the things I wanted to do out-of-the-box!!

But wordpress's administration can be a bit overwhelming for someone lacking the knowledge. Having a lot of options and configurations can be a disaster! My thoughts were these:
1. Most users are not power-users. They don't want to deal with all the "small things" of a project. They simply want to get the job done!
2. Too many options can be a scary thing for the average user.
3. Having too much on your screen becomes tiresome and is not user-friendly.

For my project I want users to have the absolute necessary for their sites. Nothing more, nothing less!!
So I started exploring what I can do to "simplify" their experience.

1. Since I am building on wordpress multisite, some options are network-wide and can be hidden from individual sites
2. Using the amazing blog templates plugin (https://premium.wpmudev.org/project/new-blog-template/) more options can be standardized, and hidden from individual sites
3. WordPress 3.4 introduced the theme customizer, making theme customizations even easier.
4. I don't want my users to be able to post pages, so I hid that menu too

In order to avoid making this a huge post, I will instead post each solution and/or trick-hack in the comments below, hoping that it will help someone else.

  • aristath

    GENERAL:
    First of all, I decided to build a theme based on twitter's bootstrap (http://twitter.github.com/bootstrap/) because I think it's pretty, minimalistic, yet allows big customizations.

    All sites in my network will use this theme, and everyone will be able to customize it to suit their own needs.
    It's not yet finished so I will just post some parts of it here that can be implemented in other themes too (with some minimum coding).

    I urge you to create a folder called "inc" or "includes" or whatever you want in you theme. All the extra bits and pieces should be on separate files instead of your functions.php file, just to help make it easier for you to structure everything.

    FIRST STEP: ADDING OPTIONS TO THE THEME CUSTOMIZER
    The theme customizer:
    I created a file called "customizer.php" in my theme's "inc" folder.
    Then in my functions.php, added this line:
    require_once locate_template('/inc/customizer.php'); // Customizer functions
    that tells our theme to include the functions it finds in our "customizer.php" file.

    Then I started writing and this is what I came up with:

    <?php
    
    add_action( 'customize_register', 'basic_customize_register' );
    function basic_customize_register($wp_customize){
      $wp_customize->remove_section( 'static_front_page');
      $wp_customize->remove_control( 'header_textcolor');
    
      $colors = array();
      $colors[] = array( 'slug'=>'content_bg_color', 'default' => '#ffffff', 'label' => __( 'Content Background Color', 'basic' ) );
      $colors[] = array( 'slug'=>'sidebar_bg_color', 'default' => '#f2f2f2', 'label' => __( 'Sidebar Background Color', 'basic' ) );
      $colors[] = array( 'slug'=>'content_text_color', 'default' => '#222222', 'label' => __( 'Content Text Color', 'basic' ) );
      $colors[] = array( 'slug'=>'titles_text_color', 'default' => '#333333', 'label' => __( 'Titles Text Color', 'basic' ) );
      $colors[] = array( 'slug'=>'link_text_color', 'default' => '#0088bb', 'label' => __( 'Links Text Color', 'basic' ) );
      $colors[] = array( 'slug'=>'header_top_bg', 'default' => '#333333', 'label' => __( 'Top Header Background Color', 'basic' ) );
      $colors[] = array( 'slug'=>'btn_bg', 'default' => '#0074CC', 'label' => __( 'Main Buttons Background Color', 'basic' ) );
    
      foreach($colors as $color){
        // SETTINGS
        $wp_customize->add_setting( $color['slug'], array( 'default' => $color['default'], 'type' => 'option', 'capability' => 'edit_theme_options' ));
    
        // CONTROLS
        $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $color['slug'], array( 'label' => $color['label'], 'section' => 'colors', 'settings' => $color['slug'] )));
      }
    
      if ( $wp_customize->is_preview() && ! is_admin() )
    	add_action( 'wp_footer', 'basic_customize_preview', 21);
    }
    
    function basic_customize_preview() {
    	?>
    	<script type="text/javascript">
    	( function( $ ){
    		wp.customize('content_bg_color',function( value ) {
    			value.bind(function(to) {
    				$('#wrap').html(to);
    			});
    		});
    		wp.customize('sidebar_bg_color',function( value ) {
    			value.bind(function(to) {
    				$('#sidebar .well').html(to);
    			});
    		});
    		wp.customize( 'content_text_color', function( value ) {
    			value.bind( function( to ) {
    				$('body').css('color', to ? '#' + to : '' );
    			});
    		});
    		wp.customize( 'titles_text_color', function( value ) {
    			value.bind( function( to ) {
    				$('h1, h2, h3, h4, h5, h6').css('color', to ? '#' + to : '' );
    			});
    		});
    		wp.customize( 'link_text_color', function( value ) {
    			value.bind( function( to ) {
    				$('a').css('color', to ? '#' + to : '' );
    			});
    		});
    		wp.customize('header_top_bg',function( value ) {
    			value.bind(function(to) {
    				$('.navbar-inner').html(to);
    			});
    		});
    		wp.customize('btn_bg',function( value ) {
    			value.bind(function(to) {
    				$('.btn-primary').html(to);
    			});
    		});
    	} )( jQuery )
    	</script>
    	<?php
    }
    
    function basic_customizations(){
    	$content_bg_color = get_option('content_bg_color');
    	$sidebar_bg_color = get_option('sidebar_bg_color');
    	$content_text_color = get_option('content_text_color');
    	$titles_text_color = get_option('titles_text_color');
    	$link_text_color = get_option('link_text_color');
    	$color = get_theme_mod( 'background_color' );
    	$header_textcolor = get_theme_mod( 'header_textcolor' );
    	$header_top_bg = get_option('header_top_bg');
    	$btn_bg = get_option('btn_bg');
    
    	function get_brightness($hex) {
    		// returns brightness value from 0 to 255
    		// strip off any leading #
    		$hex = str_replace('#', '', $hex);
    		$c_r = hexdec(substr($hex, 0, 2));
    		$c_g = hexdec(substr($hex, 2, 2));
    		$c_b = hexdec(substr($hex, 4, 2));
    
    		return (($c_r * 299) + ($c_g * 587) + ($c_b * 114)) / 1000;
    	}
    	?>
    	<style>
    		#wrap {
    			background:  <?php echo $content_bg_color; ?>;
    			border: 1px solid <?php echo $color; ?>
    		}
    		#sidebar .well {
    			background:  <?php echo $sidebar_bg_color; ?>;
    		}
    		body {
    			color:  <?php echo $content_text_color; ?>;
    		}
    		h1, h2, h3, h4, h5, h6 {
    			color:  <?php echo $titles_text_color; ?>;
    		}
    		a, a:link, a:visited, a:hover {
    			color:  <?php echo $link_text_color; ?>;
    		}
    		.navbar-fixed-top a.brand,
    		.navbar .nav > li > a,
    		.navbar-fixed-top a.brand:hover,
    		.navbar .nav > li > a:hover{
    			<?php
    				if (get_brightness($header_top_bg) > 130)
    					echo 'color:#222;';
    				else
    					echo 'color:#f2f2f2;';
    			?>
    		}
    		.navbar-inner{
    			background: <?php echo $header_top_bg; ?> url(<?php echo get_stylesheet_directory_uri(); ?>/img/header_bg.png) repeat-x bottom left;
    		}
    		.btn-primary, a.btn-primary{
    			background: <?php echo $btn_bg; ?> url(<?php echo get_stylesheet_directory_uri(); ?>/img/btn_bg.png) repeat-x top left;
    			<?php
    				if (get_brightness($btn_bg) > 130)
    					echo 'color:#222;';
    				else
    					echo 'color:#f2f2f2;';
    			?>
    		}
    		.SocialLinks span a{
    			<?php
    				if (get_brightness($content_bg_color) > 130)
    					echo 'color:#222;';
    				else
    					echo 'color:#f2f2f2;';
    			?>
    		}
    		.btn-primary:hover, a.btn-primary:hover{
    			background: <?php echo $btn_bg; ?> url(<?php echo get_stylesheet_directory_uri(); ?>/img/btn_bg_hover.png) repeat-x top left;
    			<?php
    				if (get_brightness($btn_bg) > 130)
    					echo 'color:#222;';
    				else
    					echo 'color:#f2f2f2;';
    			?>
    		}
    		.breadcrumb{
    			background: <?php echo $sidebar_bg_color; ?> url(img/btn_bg.png) repeat-x top left;
    			border-color: transparent !important;
    		}
    	</style>
    	<?php
    }
    
    new LogoCustomizer();
    
    class LogoCustomizer {
    	function __construct(){
    		add_action('customize_register', array(&$this, 'customize_register'));
    		add_action('plugins_loaded', array(&$this, "plugins_loaded"));
    		add_filter('plugin_row_meta',   array(&$this, 'plugin_row_meta'), 10, 2);
    	}
    
    	public function customize_register($wp_customize){
    		$wp_customize->add_section('logo-customizer', array(
    			'title'          => __('Logo Image', 'logo-customizer'),
    			'priority'       => 15,
    		));
    		$wp_customize->add_setting('logo-customizer', array(
    			'default'        => '',
    			'type'           => 'option',
    			'capability'     => 'edit_theme_options',
    		));
    		$wp_customize->add_control(new WP_Customize_Image_Control(
    			$wp_customize,
    			'logo_Image',
    			array(
    				'label'     => __('Image', 'basic'),
    				'section'   => 'logo-customizer',
    				'settings'  => 'logo-customizer',
    			)
    		));
    	}
    }
    
    function the_logo() {
        if (get_option('logo-customizer')) {
            $image = '<img id="site-logo" src="%s" alt="%s" style="max-width:100%%; height:auto;">';
            printf(
                $image,
                get_option('logo-customizer'),
                get_bloginfo('name')
            );
        } else {
        }
    }

    For better readability you can see the file here: https://gist.github.com/3299813
    Now my theme customizer has the following options:
    Background (provided by wordpress)
    Header Image (provided by wordpress)
    Background color (provided by wordpress)
    And on top of that, these options:
    Content background color,
    sidebar background color,
    content text color,
    titles text color,
    link text color,
    header-top background,
    buttons color,
    logo image.

    Worth noting:
    This function (lines 84-93)

    function get_brightness($hex) {
    		// returns brightness value from 0 to 255
    		// strip off any leading #
    		$hex = str_replace('#', '', $hex);
    		$c_r = hexdec(substr($hex, 0, 2));
    		$c_g = hexdec(substr($hex, 2, 2));
    		$c_b = hexdec(substr($hex, 4, 2));
    
    		return (($c_r * 299) + ($c_g * 587) + ($c_b * 114)) / 1000;
    	}

    detects the brightness of a color.
    So if for example the background for the buttons is light, then automagically the color of the button's text will be dark and vice-versa(lines 126-135).

    Then in my header.php file, I added this:
    <?php basic_customizations(); ?>
    so that the custom styles that the user has selected are added to the site's header.

  • aristath

    THE LOGIN PAGE:

    I don't think that every site on the network should have the same login page. Each side should have a login page suited to the site's color palette, backgrounds and logo.
    Using the customizations the users make to their stores using the above customizer.php file, I decided to alter the login page.
    I created a file called "login.php" and put it in my theme's "inc" folder.
    Then added this line to my functions.php:
    require_once locate_template('/inc/login.php'); // Login-Page functions

    The contents of this file:

    <?php
    
    function basic_login_logo() {
        if (get_option('logo-customizer')) { echo( get_option('logo-customizer') ); }
    }
    
    function basic_login_scripts() {
    	$content_bg_color = get_option('content_bg_color');
    	$sidebar_bg_color = get_option('sidebar_bg_color');
    	$content_text_color = get_option('content_text_color');
    	$titles_text_color = get_option('titles_text_color');
    	$link_text_color = get_option('link_text_color');
    	$color = get_theme_mod( 'background_color' );
    	$header_textcolor = get_theme_mod( 'header_textcolor' );
    	$header_top_bg = get_option('header_top_bg');
    	$btn_bg = get_option('btn_bg');
    
    	function get_brightness($hex) {
    		// returns brightness value from 0 to 255
    		// strip off any leading #
    		$hex = str_replace('#', '', $hex);
    		$c_r = hexdec(substr($hex, 0, 2));
    		$c_g = hexdec(substr($hex, 2, 2));
    		$c_b = hexdec(substr($hex, 4, 2));
    
    		return (($c_r * 299) + ($c_g * 587) + ($c_b * 114)) / 1000;
    	}
    
    	// $background is the saved custom image, or the default image.
    	$background = get_background_image();
    
    	// $color is the saved custom color.
    	// A default has to be specified in style.css. It will not be printed here.
    	$color = get_theme_mod( 'background_color' );
    
    	if ( ! $background && ! $color )
    		return;
    
    	$style = $color ? &quot;background-color: #$color;&quot; : '';
    
    	if ( $background ) {
    		$image = &quot; background-image: url('$background');&quot;;
    
    		$repeat = get_theme_mod( 'background_repeat', 'repeat' );
    		if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
    			$repeat = 'repeat';
    		$repeat = &quot; background-repeat: $repeat;&quot;;
    
    		$position = get_theme_mod( 'background_position_x', 'left' );
    		if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
    			$position = 'left';
    		$position = &quot; background-position: top $position;&quot;;
    
    		$attachment = get_theme_mod( 'background_attachment', 'scroll' );
    		if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
    			$attachment = 'scroll';
    		$attachment = &quot; background-attachment: $attachment;&quot;;
    
    		$style .= $image . $repeat . $position . $attachment;
    	}
    
    	?>
        <style type=&quot;text/css&quot;>
            body.login div#login h1 a {
                background-image: url(&quot;<?php basic_login_logo(); ?>&quot;);
                background-size: contain;
                padding-bottom: 30px;
            }
    		body.login {
    			<?php echo trim( $style ); ?>
    		}
    		#login {
    			background: <?php echo $content_bg_color; ?>;
    			padding: 20px;
    			-webkit-border-radius: 0px 0px 4px 4px;
    			border-radius: 0px 0px 4px 4px;
    		}
    		#loginform{
    			background:  <?php echo $sidebar_bg_color; ?>;
    			border: 0;
    			border: none;
    		}
    		.login #nav, .login #backtoblog{
    			text-shadow: none;
    		}
    		.login form{
    			margin-left: 0;
    		}
    		.login label{
    			color:  <?php echo $content_text_color; ?>;
    		}
    		a, a:link, a:visited, a:hover, .login #login p#nav a:hover, .login #login #backtoblog a:hover,
    		.login #login p#nav a, .login #login #backtoblog a {
    			color:  <?php echo $link_text_color; ?> !important;
    		}
    		.navbar-fixed-top a.brand,
    		.navbar .nav > li > a,
    		.navbar-fixed-top a.brand:hover,
    		.navbar .nav > li > a:hover{
    			<?php
    				if (get_brightness($header_top_bg) > 130)
    					echo 'color:#222;';
    				else
    					echo 'color:#f2f2f2;';
    			?>
    		}
    		.navbar-inner{
    			background: <?php echo $header_top_bg; ?> url(<?php echo get_stylesheet_directory_uri(); ?>/img/header_bg.png) repeat-x bottom left;
    		}
    		input.button-primary:hover, button.button-primary:hover, a.button-primary:hover, a.button-primary:focus, a.button-primary:active, .login .button-primary{
    			background: <?php echo $btn_bg; ?> url(<?php echo get_stylesheet_directory_uri(); ?>/img/btn_bg.png) repeat-x top left;
    			<?php
    				if (get_brightness($btn_bg) > 130)
    					echo 'color:#222;';
    				else
    					echo 'color:#f2f2f2;';
    			?>
    			border: none;
    			padding: 4px 15px;
    			-moz-border-radius: 4px;
    			-webkit-border-radius: 4px;
    			border-radius: 4px;
    		}
    		.SocialLinks span a{
    			<?php
    				if (get_brightness($content_bg_color) > 130)
    					echo 'color:#222;';
    				else
    					echo 'color:#f2f2f2;';
    			?>
    		}
    		.btn-primary:hover, a.btn-primary:hover{
    			background: <?php echo $btn_bg; ?> url(<?php echo get_stylesheet_directory_uri(); ?>/img/btn_bg_hover.png) repeat-x top left;
    			<?php
    				if (get_brightness($btn_bg) > 130)
    					echo 'color:#222;';
    				else
    					echo 'color:#f2f2f2;';
    			?>
    		}
    		.breadcrumb{
    			background: <?php echo $sidebar_bg_color; ?> url(img/btn_bg.png) repeat-x top left;
    			border-color: transparent !important;
    		}
    	</style>
    <?php }
    add_action( 'login_enqueue_scripts', 'basic_login_scripts' );
    
    function basic_the_login_url( $url ) {
        return get_bloginfo( 'url' );
    }
    add_filter( 'login_headerurl', 'basic_the_login_url' );

    (You can see it here too: https://gist.github.com/3299925

    You can see screenshots from 2 random sites below. They have the same patterns as their respective sites and are quite personalized!

  • aristath

    Next step:
    REMOVING UNNECESSARY ADMIN MENU ITEMS

    For this I preferred creating a plugin but you can add it in your functions.php or any other place.
    This is the code to remove all unwanted items:

    function magazi_admin_theme_remove_menus () {
    	if( !current_user_can( 'superadmin' ) ) {
    		global $menu;
    		$restricted = array(__('Posts'), __('Media'), __('Links'), __('Pages'), __('Tools'), __('Users'), __('Settings'), __('Comments'), __('Plugins'), __('QRcode'), __('CustomPress'));
    		end ($menu);
    		while (prev($menu)){
    			$value = explode(' ',$menu[key($menu)][0]);
    			if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
    		}
    
    		remove_menu_page( 'edit-comments.php' );
    		remove_menu_page( 'themes.php' );
    		remove_menu_page( 'plugins.php' );
    		remove_menu_page( 'admin.php?page=mp_st' );
    		remove_menu_page( 'admin.php?page=cp_main' );
    		remove_submenu_page( 'edit.php?post_type=product', 'edit-tags.php?taxonomy=product_category&post_type=product' );
    		remove_submenu_page( 'edit.php?post_type=product', 'edit-tags.php?taxonomy=product_tag&post_type=product' );
    	}
    }
    add_action('admin_menu', 'magazi_admin_theme_remove_menus');

    This removes these menu items:
    Posts,
    Media,
    Links
    Pages,
    Tools,
    Users,
    Settings
    Comments
    Plugins
    Qrcode
    CustomPress

    and also some sub-menu items, such as the product categories and product tags for MarketPress.
    You might not want to remove those exact items but using this snippet as a guide you can pretty much remove any menu items you wish.
    Important note:
    When removing submenus, the url must be html encoded. So instead of the & you see above, it should be & a m p ; (without the spaces of course... ) I'm writing this as a note because I know the wysiwyg editor here will cripple them.

    No worries though, you can see it here too: https://gist.github.com/3300029

  • aristath

    Next step:
    Since we basically "crippled" our users by hiding almost all admin menu items, it's time to add what we really want them to access.

    For starters, I want them to be able to do the following:
    1. Edit their address that will be echoed in the theme's footer.
    2. Edit their social network links (will be rendered in the header).

    So let's start coding...
    In my functions.php I added the following line:
    require_once locate_template('/inc/business_tools.php');

    Then created this file my-theme/inc/business_tools.php
    Contents of this file:

    <?php
    
    function basic_bs_register_settings() {
    	register_setting('basic_bs_settings_group', 'basic_bs_settings');
    }
    add_action('admin_init', 'basic_bs_register_settings');
    
    $basic_bs_options = get_option('basic_bs_settings');
    
    function business_tools_admin_menu() {
    	add_menu_page( __('Basic Store Settings', 'basic'), __('Basic Store Settings', 'basic'), 'edit_theme_options', 'business_tools', 'business_tools_page');
    }
    add_action('admin_menu', 'business_tools_admin_menu');
    
    function business_tools_page() {
    	global $basic_bs_options;
    	ob_start(); ?>
    	<div class="wrap">
    		<h2><?php _e('Basic info', 'basic'); ?></h2>
    		<form method="post" action="options.php">
    			<?php settings_fields('basic_bs_settings_group'); ?>
    			<table class="widefat">
    				<tr>
    					<td colspan="2" style="padding: 10px;">
    						<strong><?php _e('Please enter the details of your store. They will be rendered on the page footer.', 'basic'); ?></strong>
    					</td>
    				</tr>
    				<tr>
    					<td><?php _e('Address', 'basic'); ?></td>
    					<td><input style="width: 100%" id="basic_bs_settings[bt_address_street]" name="basic_bs_settings[bt_address_street]" type="text" value="<?php echo $basic_bs_options['bt_address_street']; ?>"/></td>
    				</tr>
    				<tr>
    					<td><?php _e('City - Area', 'basic'); ?></td>
    					<td><input style="width: 100%" id="basic_bs_settings[bt_address_city]" name="basic_bs_settings[bt_address_city]" type="text" value="<?php echo $basic_bs_options['bt_address_city']; ?>"/></td>
    				</tr>
    				<tr>
    					<td><?php _e('Postal Code', 'basic'); ?></td>
    					<td><input style="width: 100%" id="basic_bs_settings[bt_address_tk]" name="basic_bs_settings[bt_address_tk]" type="text" value="<?php echo $basic_bs_options['bt_address_tk']; ?>"/></td>
    				</tr>
    				<tr>
    					<td><?php _e('Phone', 'basic'); ?></td>
    					<td><input style="width: 100%" id="basic_bs_settings[bt_address_phone]" name="basic_bs_settings[bt_address_phone]" type="text" value="<?php echo $basic_bs_options['bt_address_phone']; ?>"/></td>
    				</tr>
    				<tr>
    					<td><?php _e('Mobile', 'basic'); ?></td>
    					<td><input style="width: 100%" id="basic_bs_settings[bt_address_mobile]" name="basic_bs_settings[bt_address_mobile]" type="text" value="<?php echo $basic_bs_options['bt_address_mobile']; ?>"/></td>
    				</tr>
    				<tr>
    					<td colspan="2" style="padding: 10px;">
    						<strong><?php _e('You can enter you social profiles links below', 'basic'); ?></strong>
    					</td>
    				</tr>
    				<tr>
    					<td><?php _e('Facebook Page', 'basic'); ?></td>
    					<td><input style="width: 100%" id="basic_bs_settings[bt_facebook_link]" name="basic_bs_settings[bt_facebook_link]" type="text" value="<?php echo $basic_bs_options['bt_facebook_link']; ?>"/></td>
    				</tr>
    				<tr>
    					<td><?php _e('Twitter Username', 'basic'); ?></td>
    					<td><input style="width: 100%" id="basic_bs_settings[bt_twitter_username]" name="basic_bs_settings[bt_twitter_username]" type="text" value="<?php echo $basic_bs_options['bt_twitter_username']; ?>"/></td>
    				</tr>
    				<tr>
    					<td><?php _e('Google+ Page', 'basic'); ?></td>
    					<td><input style="width: 100%" id="basic_bs_settings[bt_gplus_link]" name="basic_bs_settings[bt_gplus_link]" type="text" value="<?php echo $basic_bs_options['bt_gplus_link']; ?>"/></td>
    				</tr>
    			</table>
    			<p class="submit">
    				<input type="submit" class="button-primary" value="<?php _e('Save', 'basic'); ?>" />
    			</p>
    		</form>
    	</div>
    	<?php
    	echo ob_get_clean();
    }
    
    function business_tools_footer() {
    	global $basic_bs_options; ?>
        <p class="BusinessDetails">
        	<?php
    	    $address = $basic_bs_options['bt_address_street'];
      			if (!empty($address)){ echo '<i class="icon-envelope icon-white"></i> ' . $address . ', '; }
    	    $city = $basic_bs_options['bt_address_city'];
    	    $tk = $basic_bs_options['bt_address_tk'];
      			if (!empty($city)){ echo $city . ', '; }
      			if (!empty($tk)){ echo $tk . ', '; }
    	    $phone = $basic_bs_options['bt_address_phone'];
    	    $mobile = $basic_bs_options['bt_address_mobile'];
      			if (!empty($phone)){ _e(' Phone: ', 'basic'); echo $phone; }
      			if (!empty($mobile)){ _e(' Mobile: ', 'basic'); echo $mobile; }
    	    ?>
    	</p>
    	<?php
    }
    
    function business_tools_header() {
    	global $basic_bs_options; ?>
    	<div class="SocialLinks">
      		<span class="facebook">
      			<?php
      			$fb_url = $basic_bs_options['bt_facebook_link'];
    			if (!empty($fb_url)){ ?>
      				<a class="facebook" target="_blank" href="<?php echo $fb_url; ?>"></a>
      			<?php } ?>
    		</span>
      		<span class="twitter">
      			<?php
      			$tw_url = $basic_bs_options['bt_twitter_username'];
    			if (!empty($tw_url)){ ?>
    				<a class="twitter" href="https://twitter.com/<?php echo $tw_url; ?>"></a>
    			<?php } ?>
      		</span>
    		<span class="gplus">
    			<?php
    			$gp_url = $basic_bs_options['bt_gplus_link'];
      			if (!empty($gp_url)){ ?>
    				<a class="google" target="_blank" href="<?php echo $gp_url; ?>"></a>
    			<?php } ?>
    		</span>
    	</div>
    <?php
    }

    (You can also see this file here: https://gist.github.com/3300091 )

    This adds a menu item called "Basic Store Settings".
    The site (in this case a store) owner can then edit their store's info.
    Notice that there are 2 functions here for the output:
    business_tools_footer and business_tools_header.

    So in my theme's header.php (or wherever I want the social buttons rendered) I will use this:
    <?php business_tools_header(); ?>
    and in my footer.php (that's where I want to output the store's address) I will use this: <?php business_tools_footer(); ?>

    You can of course modify and customize the above code to suite your needs.
    Please note that for my social icons I'm using pure css icons which for the sake of simplicity I haven't included here.
    Ton include your own images/icons, you can edit for example line 102 from <a class="facebook" target="_blank" href="<?php echo $fb_url; ?>"></a>
    to something like this: <a class="facebook" target="_blank" href="<?php echo $fb_url; ?>"><img src="facebook.php" /></a>
    and do the same for lines 109 and 116 (twitter and g+)

  • ibunkerz

    There are plugins to hide Unnecessary MENU items from the Dashboard.

    1. Advance Access Manager
    2. Admin Menu Editor
    3. Many more , the above twos are cool

    WPMUDev EASY BLOGGING is a cool plugin . One should use it too.!

    There are number of ways to improve your dashboard using different plugins.

    Many users like staying away from CODES so they simply like using Plugins

    I am uploading a screenshot of my WP DASHBOARD

    Cheers

  • aristath

    I agree there are plugins to do that....
    But those plugins usually have a ton of functionality that I'm never actually going to use. So instead of enabling a plugin that has 1000 lines of code I prefer to write 20-30 lines and get exactly what I want done.
    My screenshot is below.
    The only menu items that I have are:

    For the dashboard and menu theming I wrote and used this plugin: http://wordpress.org/extend/plugins/magazi-admin-theme/

  • aristath

    To create the logout menu item:

    <?php
    function basic_logout_admin_menu() {
    	add_menu_page( __('Logout', 'basic'), __('Logout', 'basic'), 'edit_theme_options', 'logout', 'basic_logout_url');
    }
    add_action('admin_menu', 'basic_logout_admin_menu');
    
    function basic_logout_url() { ?>
    	<div class="wrap">
    		<h2><?php _e('Are you sure you want to logout?', 'basic'); ?></h2>
    		<br />
    		<a class="button-primary" style="font-size: 2em !important;" href="<?php echo wp_logout_url( home_url() ); ?>"><?php _e('Logout', 'basic'); ?></a>
    		<?php
    }

    You can also see it here: https://gist.github.com/3304487
    This actually creates a page. Adds some confirmation text and a big button that sais "logout".

  • aristath

    @coding-monkey sure... here you go: https://github.com/nerdzgr/BootPress

    It is based on the roots theme though heavily modified...
    At this point I can almost guarantee that it will break your site as it's specific to my use case!! (There might be some functions in there that are invalid unless some plugins are installed...)
    So please don't install on a production site!
    As soon as I make it a bit more "abstract" though I will re-upload. :slight_smile:

  • aristath

    @coding-monkey The theme is now a bit more abstract... so there are less chances it will destroy your site now. :stuck_out_tongue:

    Please note:
    The frontpage is currently rendering the following:

    There is another new admin menu item where the user can enter the following info:

    • Address, phone etc. These are placed on the footer
    • Social links (Facebook, twitter, google+). These are on the site's header.

    It's a work in progress but I would appreciate any feedback. I know it's not flexible enough yet as it's completely tailored to my site's specific needs but any input would be appreciated. :slight_smile:

    If anyone else wants to try this theme as well, you can try it but please follow these instructions:
    1. DO IT ON ACLEAN INSTALLATION!!!
    2. Install the responsive slider plugin I mentioned earlier
    3. Do not attempt unless MarketPress is installed
    4. Do expect some things to break and/or not meet your expectations. The theme customizer however and the results you can get using this theme are amazing. :slight_smile:

  • aristath

    Another thing worth noting:
    This plugin "fixes" MarketPress grids and lists.
    In your plugins/marketpress/marketpress.php file, change line 5782 from <?php /* ?> to <?php ?> and line 5790 from <?php */ ?> to <?php ?>

    We need to change these because this section of Marketpress has been commented out and omitted. This way we put it back in the game. :slight_smile: And our theme takes care of the rest.
    get it here: https://github.com/nerdzgr/BootPress

    You can also simply delete lines 5782 and 5790, but I'm suggesting this solution so that the line numbers don't change (it's important if you're reading other posts refering to line xxx of this file... don't get mixed up.)

  • Mustafa

    Hi everyone,

    Yet another great topic by @aristath

    Also maybe some folks want to read this article - https://premium.wpmudev.org/blog/making-wordpress-more-user-friendly-a-usability-audit-of-joomla-drupal-blogger-tumblr-and-squarespace/

    I'm absolutely agree to wordpress dashboard too complicated for newbie users.
    Personally I want to suggest blue admin and Ozh' Admin Drop Down Menu

    If you're want to make more special dashboard, keep follow up aristath :slight_smile:

    And, +1 for wpmu.org article,

    +5 points going to @aristath

    Cheers,

  • Jack Kitterhing

    @aristath

    Just started checking out the theme, very nice :slight_smile:

    The first thing is, as it stands, front-page.php is set to your site if blog id=1

    <?php global $blog_id; if ($blog_id == 1) {
    	   header( 'Location: http://magazi.org/home&#39; ) ;
    } else { ?>

    So if anyone else is trying this theme and is confused by the re-direct that's the problem.

    But so far I'm very impressed :slight_smile:

    Kind Regards
    Jack (Coding-Monkey).

  • tangible

    Looks good! (I didn't get a chance to see it pre-masonry)
    I guess the only downside is that, from a marketing perspective, the eyepath of the user will move towards the larger images. In most cases, the larger image is simply larger because the product is shaped longer, not because the shop owner is trying to feature it.

    So maybe for example a guitar amp (which is square) and has a high profit margin will be overlooked by users who are drawn to the flute (which is bigger because it's a rectangle).

  • Jack Kitterhing

    @aristath

    That store looks super, jQuery Masonry is a nice touch :slight_smile:

    I've been going through the theme some more, some thing to note.

    -Menu is hard coded in header-top-navbar.php ? It appears that way, but I could be wrong.

    -Products on the menu has the slug /marketplace/ so doesn't redirect to products change it to marketplace in the settings of martpress re-directs to your website, if you don't change it, you get the error of page doesn't exist. Unless your using shortcodes within the theme and create the page manually, not quite sure how that's meant to work, but I haven't been through the code of all that yet.

    -On my created product on the homepage when you click on the product, 404 page I believe.

    -This isn't an error just something I would recommend changing, when a product is added to the basket from the product list on the home page, it takes you straight to your basket to check out, I would personally change this, as it's be proven that customers spend less money and time on your website when that happens as the checkout it right in front of them, also the customer would have to navigate back to where they are and if there are quite a few pages it's something that may not do, thus lowering coversion rates.

    -This next suggestion may be a bit much, but it would be a nice touch to what's already a very good theme, store admin just takes you to the default wp-admin at the moment, what would be nice is a pop over full screen width with store settings, order management and product management, also uploads, while I know this will be a big undertaking, it would really add that something special to the theme, to put it above all others.

    -The responsive element is working well, I checked on my iPad, Android smartphone, my macbook pro and last but not least my iMac, the theme looked great throughout! :slight_smile:

    That's about it for now, but I'll look through the code later and test some more and see if there's any cricital errors at all :slight_smile:

    Thanks again for the super theme and all your hard work!

    Kind Regards
    Jack (Coding-Monkey).

  • aristath

    @coding-monkey

    Menu is hard coded in header-top-navbar.php ?

    Yes, my use case required that. I haven't generalized the theme yet to suit more people as I'm currently still trying to finish my project. :slight_smile:

    Products on the menu has the slug /marketplace/

    True... another hard-coded, use-case-specific "error".
    Once the theme is generalized that will be fixed as well. (by the way I have A LOT of things on my mind for this theme, expect it to be reaaaally improved!!)

    On my created product on the homepage when you click on the product, 404 page I believe.

    On the mp_product.php file delete these lines:

    <?php if (psts_show_ads()) { ?>
    <div class="product-ads ads">
    <?php
      //<!--/* OpenX Local Mode Tag v2.8.8 */-->
    
      // The MAX_PATH below should point to the base of your OpenX installation
      define('MAX_PATH', '/home/openpanel-admin/sites/www.ads-server.eu/public_html/server');
      if (@include_once(MAX_PATH . '/www/delivery/alocal.php')) {
        if (!isset($phpAds_context)) {
          $phpAds_context = array();
        }
        // function view_local($what, $zoneid=0, $campaignid=0, $bannerid=0, $target='', $source='', $withtext='', $context='', $charset='')
        $phpAds_raw = view_local('', 1, 0, 0, '_blank', '', '0', $phpAds_context, '');
      }
      echo $phpAds_raw['html'];
      ?>
    </div>
    <?php } ?>

    That was a test for custom pro-sites ads.

    also, on inc/marketpress.php delete lines 897-901:

    $content .= '<span class="brand-model">';
      $content .= get_the_term_list( $post->ID, 'brand', '<span itemprop="brand" class="product_brand">' . __('Brand: ', 'basic'), ', ', '</span>' );
      $content .= ' ';
      $content .= get_the_term_list( $post->ID, 'model', '<span itemprop="model" class="product_model">' . __('Model: ', 'basic'), ', ', '</span>' );
      $content .= '</span>';

    I have added 2 custom taxonomies to products: brand and model. These lines could cause an error if those taxonomies are not present...

  • aristath

    This isn't an error just something I would recommend changing, when a product is added to the basket from the product list on the home page, it takes you straight to your basket to check out

    I agree. I just had a js bug and this was the easiest way to get it fixed at the moment.
    Will get fixed... :slight_smile:

    what would be nice is a pop over full screen width with store settings, order management and product management

    That's what I originally intended to do. I wanted EVERYTHING done on the front-end of the site. No wp-admin at all... https://premium.wpmudev.org/forums/topic/building-a-marketpress-store-that-has-everything-on-the-frontend-no-wp-admin
    The complications though were too many and in order to achieve some pretty basic and simple things I had to bang my head against the wall for hours trying to figure out the best way to do them! Thus I chose to simply make the backend a bit "pretier" and do everything from there... :slight_smile:

    The responsive element is working well

    The beauty of bootstrap... :slight_smile:

  • aristath

    Since the discussion of this theme is probably irrelevant to the post title, I created a new issue here: https://premium.wpmudev.org/forums/topic/bootstrap-theme-for-marketpress-a-work-in-progress

    Anyone interested should follow that post.

    P.S. Today I had some free time so I added the following on the theme customizer:

    • Fluid grid option
    • Sidebar Left/Right option
    • jQuery Masonry option

    It's not perfect but it's a start...

    Of course it's not advised to use this theme on a production environment yet, it's full of bugs. But it will get better.... :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.