Introducing Summit

screenshot

Summit is a simple one-column WordPress theme, perfect for blogging and small business. It features large header images and a number of customizable display options. Social icons can be added to the header. A customizable widget area is available in the footer. Summit is also responsive and looks great on desktop and mobile devices. I encourage you to check out the demo to see how it looks. Continue reading

DevPress Announcement

Around four years ago, DevPress.com started with four founders. Due to a case of too many Chiefs and not enough Indians, the team didn’t mesh well and the site never got traction. For a short time, DevPress was dying and members were left hanging so I offered to take over. On my own with DevPress, I found some success here and there. There were high times (like DevPress’s partnership with AlienWP.com), but also low times. Through thick and thin I stuck by until recently I had to let go.

Last weekend, I held an auction to sell DevPress due to my wife’s mounting medical bills and lack of time to manage DevPress properly for the last few months. After posting the auction online, I reached out to a few individuals in the WordPress community to seek help finding a buyer. Within 24 hours, someone made a bid to end the auction.

I jumped at accepting the bid because I instantly recognized who it was from and is familiar with his work. More bids and offers came in as news of the auction started spreading, but I honored the first accepted bid because I felt it would be the perfect fit for DevPress going forward. Continue reading

Learning to Move in the Right Direction

gazeti

gazeti

Suggested by a reader through email months ago, I agreed to create a magazine theme based on some of the links sent to me. After completing the front page preview you see above and even designs for sub pages, I left this theme concept on the shelf for two months and have decided to throw it away to work on a different theme to release in August. Why? It’s just not in line with what’s coming for DevPress.com.

I was researching and working on DevPress hosting platform in June and recently restructured the site in July to cater to my own needs. Everything on DevPress is moving towards solving my own problems and problems of the individual, not group needs. A magazine theme is more useful to a team of writers or editors and that’s not the audience DevPress will cater to.

While future DevPress products might be useful to groups, they will always solve problems of the individual first. I’ve also decided not to create and support things I don’t use. Solving my own needs lead me to creating cool stuff like the DP Dashboard plugin. The difference in quality shows when I’m solving my own problems instead of just focusing on turning out new products to increase profit.

So moving forward, I’m just going to focus on creating things I’m interested in and sharing them with you.

Design Guide for Plugin Developers

Plugin developers, you’re doing too much with your plugin setting pages — colors, layouts, and tables inconsistent with WordPress, inline CSS, !important, just too much. The WordPress admin is a complicated system. If you don’t test for the majority of scenarios — large screens, tablet view, phone view, no Javascript — then create setting pages that are generic as possible. Ugly setting pages with misaligned items and broken layouts (due to updates to the WordPress admin CSS) lead to trust issues on the user’s end.

If you’re a great developer, don’t make people think you’re not by having custom, but ugly plugin setting pages.

Use What’s There

The majority of scenarios have been built. The WordPress UI team doesn’t exist for nothing you know? Take advantage of the WordPress admin form tables, postbox, two-column liquid layout, thickbox, buttons, tables, etc. If that aren’t enough tools for you to put together your plugin setting page:

  • Does it need to be that complicated?
  • What can you live without?
  • Show it to me for suggestions.

Things That Float

Imagine how it will look if the users were to resize browser pushing the floated element to its own line.

Use box-sizing: border-box; for any custom item not supported by WordPress admin CSS so the padding of the item gets included in the width. For example:

DON’T

#example {
	float: left;
	padding: 10px;
	width: 95%;
	}

DO

#example {
	box-sizing: border-box;             
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	float: left;
	padding: 10px;
	width: 100%;
	}

Typography and Sizing

If you’re structuring the page by sub headings, respect the WP admin CSS sizing. Don’t try to change h3, h4, etc. Users are used to the bigger system. Don’t make them learn a new system just for your plugin. If a user installs 20 plugins, each with its own custom settings page, that’s 20 new structures to learn.

Use percentages and ems instead of pixels. For example, if a word should be a little bit bigger, use font-size: 120%;. This works regardless of WordPress admin css or any colors scheme stylesheet provided by plugins.

Use WordPress’s typography selectors:

.alert
.alt
.alternate
.approve
.activate
.deactivate
.delete
.file-error
.highlight
.message
.spam
.trash
.unapprove

Ordered and Unordered Lists

By default, WordPress uses decimal for ordered lists and nothing for unordered lists. If you need to number or bullet your lists, style your list based on:

ul.ul-disc {list-style: disc outside;}
ul.ul-square {list-style: square outside;}
ol.ol-decimal {list-style: decimal outside;}

Buttons

Several types of buttons are available to form and link buttons:

.button
.button.button-hero
.button.button-large
.button.button-small
.button-secondary /* for backward compatibility */
.button-primary
.button-primary.button-large

Don’t forget button groups:

.button-group .button

Buttons within button groups will display as inline blocks and have no margins other than a negative side margin so the buttons overlap each other by one pixel creating a line of visually linked buttons.

Page Titles and Tabs

Use h2 for the main page title. Within the page title, you can have tabs and .subtitle. Here’s an example of tabs:

<h2 class="nav-tab-wrapper">
	<a href="themes.php" class="nav-tab nav-tab-active">Manage Themes</a>
	<a href="http://dp.dev/wp-admin/theme-install.php" class="nav-tab">Install Themes</a>
</h2>

But remember, just because tabs are doable doesn’t mean you should rely on them for all plugin navigation. Imagine ten tabs for tablet or mobile view — not user friendly.