Press Codershttps://www.presscoders.com
WordPress Themes & Plugin DevelopmentWed, 01 Jul 2015 22:27:42 +0000en-UShourly1http://wordpress.org/?v=4.2.3New Theme on the Horizon!https://www.presscoders.com/new-theme-on-the-horizon/
https://www.presscoders.com/new-theme-on-the-horizon/#commentsFri, 16 Aug 2013 16:39:12 +0000http://www.presscoders.com/?p=7687We’ve been working hard lately on completing a new theme for you! Most of the details are still under wraps, but you can see a preview screenshot at the contest page. The #3 entry won the contest, and so we decided to build on that design.

Which brings me to the announcement: the theme will be ready sometime later next month. When the theme is polished and sparkling, we will announce the winner of our brand new theme. So heads up!

What I can tell you now is that the theme will rock a fully responsive design, so your sites will look great on a 30″ monitor or a 3″ phone screen. It will also be fully compatible with WordPress 3.6, the newest version of the awesome software we build these themes for. As always, sites built using our themes allow you to focus on your content and not fighting with your site.

Here’s the image from the contest of the new theme:

]]>https://www.presscoders.com/new-theme-on-the-horizon/feed/6Re-Thinking The WordPress Admin, A New Concept Dashboard Designhttps://www.presscoders.com/re-thinking-the-wordpress-admin-a-new-concept-dashboard-design/
https://www.presscoders.com/re-thinking-the-wordpress-admin-a-new-concept-dashboard-design/#commentsMon, 20 May 2013 16:54:16 +0000http://www.presscoders.com/?p=7298I’ve been thinking a lot about the WordPress admin lately. I think there’s a lot of room for improvement.

The WordPress team has done a great job improving the admin design over the years, but we still have a long way to go.

I deal with customers almost every day who tell me how difficult WordPress is to use. As designers/developers, sometimes we forget what it’s like to look at WordPress with virgin eyes.

For most non-developers, the first feeling is overwhelm. Confusion. Panic!

Even as an experienced WordPress user, I am getting tired of looking at all the excess (dare I say clutter?) in the admin. So I decided to do a mockup of what I want the admin area to look like.

Not really for anyone else, not thinking of how difficult it would be to implement, just sort of a dream.

Here’s what I came up with.

When I log in, this is what I see on my dashboard (click to enlarge):

It’s mostly stuff I don’t need or use, but I kind of just got used to ignoring it.

I count 22 menu items on the left side, plus the admin bar at the top. That’s just absurd. Granted, several of those are from themes/plugins, but it’s still just unnecessary.

I don’t click on half of those links on a regular basis, so why do I need to see them at all times?

Not to mention the random news feeds, stats that are completely useless (who cares how many tags I have?), and the seems-like-it-would-be-useful-but-I-never-use-it QuickPress.

Sure, you can customize some of it with the Screen Options tab, but that’s a band-aid fix.

Here’s a visual break-down. (click to enlarge)

This needs more than an “admin theme,” the problem goes deeper than CSS can fix.

Feature creep and over-zealous plugins have taken their toll, it’s time to completely re-think things.

A Concept Design

What if when you logged in, you got all the relevant information you needed from your dashboard, instead of a jumble of random tidbits?

Here’s what I want to see on my admin dashboard:

Doesn’t that just make you go, ahhhh? Simplicity and usefulness. White space. No gradients.

Now I’m not a UI designer, and I don’t claim that this is perfect, or even complete. Nevertheless, this is what I want MY WordPress admin dashboard to look like.

The Dashboard Boxes

Instead of the current stats like how many categories and tags I have, the only thing I care about is my site visitors. There might be a couple other useful stats we could add here, but that’s the bare-bones essentials.

I want a “Recent Site Updates” box, so that I can see any recent changes, and I can go directly back to the page/post I was editing last.

The comment box is much more compact, I don’t need to see avatars. I just want to read most of each comment, and approve/spam/trash it.

I added an “Orders” box, I’m sure not everyone needs that, but it’s the only other thing I personally want to see every time I log in. There would of course have to be room for personalizing these boxes, and plugins adding their own.

The Menu

I don’t think the current vertical left menu is bad, but it can be overwhelming to non-developers. Especially when you have 22 menu items like me!

A top horizontal menu is more familiar to most people, and it eliminates duplicates between the left menu and admin bar.

I removed all non-critical links from view. The links I click the most are Pages, Posts, Menus, Widgets, and Settings. Honestly Settings could even be removed from that, or replaced with Plugins. Links such as Tools, Users, Media, and other menus are non-critical. Anything else can be accessed from the More drop-down link.

The Help Button

The current admin help tab is a cool idea, but it needs some work. It’s too inconspicuous, I’ve never heard a customer mention that it was helpful to them. I’m pretty sure most people don’t even know it’s there.

Plus, when you expand it, you get long-winded explanations of the finest details. That is great if you are a developer trying to learn the ins and outs of WordPress, but it is almost useless for a busy business owner just trying to figure out how to make a simple edit.

The help tab should expand and show images and simple instructions for non-developers, maybe even video. Here’s an example of what you could see if you expand the help tab on the page edit screen:

You could click the blue FAQ questions, which would expand/collapse and show image based instructions. That way you could quickly see how to do something, without having to sort through paragraphs of text.

What do you think?

That’s the way I want MY dashboard to look. Shout out to the great work by the core WordPress team, I don’t mean to knock their work. However, the current dashboard gives me anxiety when I look at it, this concept design makes me feel good.

Do you want your dashboard to look like this? Is it something that can be tweaked and built upon, or do you hate it?

I’m interested to know what you think in the comments, cheers!

Scott Bolinger is a WordPress theme designer and co-founder of Press Coders.

]]>https://www.presscoders.com/re-thinking-the-wordpress-admin-a-new-concept-dashboard-design/feed/18Choose a design for our next theme, get it free!https://www.presscoders.com/choose-a-design-for-our-next-theme-get-it-free/
https://www.presscoders.com/choose-a-design-for-our-next-theme-get-it-free/#commentsMon, 13 May 2013 17:01:54 +0000http://www.presscoders.com/?p=7230
Update: Voting is now closed. Design #3 is the clear winner so that is the theme we will be developing next! Thanks to all the people who voted and left comments! We will announce the winners in due course who will get a FREE copy of the new theme.

Can I get your opinion?

I created a few designs for our next theme, and I’d like to know which one you like best.

As a thank you for your time, I’d like to give you a chance to win a free version of the theme just for voting.Leave a comment below with which theme design you like best and a brief description why. We’ll choose 10 people randomly to get the winning theme design free (it will take a few weeks to finish creating the theme).

Images and text shown are just placeholders used for mockup purposes

Number One

If you’d like to vote for the theme above, leave a comment with “Design Number One” and a brief description of why you like it.

Number Two

If you’d like to vote for the theme above, leave a comment with “Design Number Two” and a brief description of why you like it.

Number Three

If you’d like to vote for the theme above, leave a comment with “Design Number Three” and a brief description of why you like it.

Let me know which one you like best in the comments, and we’ll choose 10 people to win it free!

Thanks for your time,

Scott

Update: Voting is now closed. Design #3 is the clear winner so that is the theme we will be developing next! Thanks to all the people who voted and left comments! We will announce the winners in due course who will get a FREE copy of the new theme.

]]>https://www.presscoders.com/choose-a-design-for-our-next-theme-get-it-free/feed/209How to Create Columns the Easy Way! (With Shortcodes)https://www.presscoders.com/how-to-create-columns-with-shortcodes/
https://www.presscoders.com/how-to-create-columns-with-shortcodes/#commentsFri, 10 May 2013 12:38:47 +0000http://www.presscoders.com/?p=7126Ever wondered how to create beautiful column layouts on your pages, without any custom coding? If you are using a Press Coders theme, you can use shortcodes to do just that!

Shortcodes are small snippets you can copy/paste into your pages and posts that create cool stuff like columns. In this article, we will use our new theme Façade to create some simple columns on our theme pages.
Let’s look at an example. Say you have a “Staff Directory” page that lists your four staff members and gives a short bio about them. Normally, you would start with something like this, below.

Now, this certainly contains the information you need. However, it would be nice to be able to do something interesting with it. You could use four blocks to display this information, using two columns and two rows. This makes the page more visually interesting. But how to do that?

Answer: shortcodes.

Façade comes loaded with shortcodes to help you out with these kinds of problems. Shortcodes, as a definition, are little pieces of “code” that you can use inside WordPress. Usually they do something useful that you can’t do normally in the text editor alone. They are always inside “[” and “]” brackets so you know what they are.

Once you have your content, you can wrap them with shortcodes. For our example, we’d want to use the “[one_half] [/one_half]” shortcode. If you wrap the content you want in the left half with “[one_half] [/one_half]” and the content on the right half with “[one_half_last] [/one_half_last]“, your content will be split in two columns on the page.

Use the shortcodes like this in the editor.

Your content should display like this.

Here’s the code you can copy:

[one_half]
First of 2 columns
[/one_half]
[one_half_last]
Second of 2 columns
[/one_half_last]

You can create most any table with our shortcodes. In Façade, we have shortcodes for halves, thirds, and fourths. So, you can mix and match, as long as the total adds up to one. For example, a one-half column with two more one-fourth columns ( 1/2 + 1/4 + 1/4 = 1). We also have a two-thirds column, so you can do a one-third column and a two-thirds column. Just make sure the last column uses the _last version of your shortcode.

This doesn’t just apply to text either. You can put images, text, video, or whatever you can put in WordPress content in these sections. In fact, the two pictures above are inside [one_half] [/one_half] shortcodes. This versatility means that you can get creative with your layout on pages and posts.

You can see all of the shortcodes on the setup page for each theme. Be creative and have fun with it!

Also, if you have any interesting shortcode usage on your site, let us know in the comments!

When we develop sites for clients, sometimes it makes sense to remove some of the UI items they don’t need in the admin area to make it less intimidating. We used many of these admin customizations with WordPress Multisite (or WPMU), to make our customer’s sites more user-friendly. (The code in this article works with normal WP and multisite)

Here’s what the standard admin dashboard looks like (click image):

Here’s what it will look like after we make some modifications:

There are basically 3 things you can do easily to start:

Remove some admin menus and sub menus

Remove some default widgets

Simplify dashboard and post/page list screens

Here are some tips and tricks for customizing the WordPress admin by adding code to your child theme’s functions.php file.

First off, you should be using a child theme to make these modifications.

We are going to be editing the functions.php file, if you do that without a child theme, you will lose all of your modifications when you update the theme.

Removing Admin Menus and Sub Menus

The first thing we can do is remove some menus. Your client probably doesn’t need to see the Settings => Permalinks menu, or the Tools => Import menu.

To be clear, we are not removing these from WordPress, we are just removing them from the view of your client.

Remove Top Level Menus

There’s 4 menus I think that can be removed altogether, add the code below to your functions.php file. (Obviously you’ll have to tailor this to your particular situation.)

The Links menu will already be gone if you are installing a fresh version of WordPress, but the other menus are for site configuration, which most clients won’t be doing.

You can always add these back if you need to, but taking them out could keep your client from messing up the site!

Remove Sub Menus

For the remaining menus, there are some sub-menu items that just aren’t necessary for most clients to access. For example, Tools => Import is unnecessary if you’ve already fully built the site. Also, removing Appearance => Editor and Plugins => Editor could keep the client from really messing up a theme or plugin by accident!

Here is some example code you can use, add this to your functions.php file:

Simplifying the admin for your clients can save you time and make your clients happier. Good luck! Check out this tutorial on Tuts Plus for further admin customization.

What other customizations do you make to the admin area for your clients? Let us know in the comments.

]]>https://www.presscoders.com/how-to-simplify-the-wordpress-admin-for-your-clients/feed/15Welcome aboard Josh!https://www.presscoders.com/welcome-aboard-josh/
https://www.presscoders.com/welcome-aboard-josh/#commentsThu, 25 Apr 2013 18:27:46 +0000http://www.presscoders.com/?p=7086We’d like to (officially) welcome the newest member of our team, Josh Wagner. Josh is a great guy and he’s going to be wearing many hats, including community support manager. You’ll probably exchange an email or two with him, be nice so he sticks around

Welcome Josh!

]]>https://www.presscoders.com/welcome-aboard-josh/feed/1Customizing with WordPress Child Themeshttps://www.presscoders.com/customizing-with-wordpress-child-themes/
https://www.presscoders.com/customizing-with-wordpress-child-themes/#commentsTue, 23 Apr 2013 19:15:41 +0000http://www.presscoders.com/?p=7065If you want to customize your WordPress theme beyond small tweaks, you have to use a child theme.

A child theme is just a folder to keep your changes so you don’t make changes to the original (or parent) theme. The main reason to do this is so that you can update the parent theme without losing any of your customizations.

This subject is covered in a lot of different places, including our theme customization guide, but I wanted to go into more detail here.

Let’s get child themeing!

Creating Your Child Theme

To create your child theme, you just need a folder with a style.css file in it.

I’ve used the Facade theme here as an example, but you can change that to your theme name.

The only required lines above are the theme name and Template. The template line indicates what the parent theme is, so if we were using a theme called TwentyTen, we would put Template: twentyten. (It’s all lowercase with no spaces because it’s actually the name of the theme folder)

The next thing you have to do is import the parent theme stylesheet. Add this line underneath the theme info:

1

@import url("../facade/style.css");

That imports all of the parent theme styles. You are then going to add more rules below it, customizing the theme.

Make sure no CSS rules are above this import rule. Here it is together with a first sample css rule:

Other Child Theme Files

You should be able to make most aesthetic changes in your child theme style.css file, but you can put any theme file in your child theme.

Functions.php

The functions.php file is a really useful one. To add this, create a new file in your child theme folder, and name it functions.php. This is where you’ll add new javascript, add hooks and filters, and more. Check out Chapter 7 in our customization guide for more details about functions.php.

Template Files

You can also add template files, such as header.php if you need to hard code changes. To use a template file, simply copy/paste the file from the parent theme to the child theme.

For example, if you want to remove something that is hard coded into header.php, copy/paste it into your child theme (don’t delete from parent theme), and make your changes in the child theme header.php file. WordPress automatically checks your child theme for files first, so your child theme header.php will be the one that is used.

For more information on template file customization, please see Chapter 8 of our customization guide.

Uploading your Child Theme

Depending on your workflow, there are a few different ways to get your child theme up on your site. You can FTP the folder to ../wp-content/themes/, or you can zip the file and use the theme uploader in the WP admin (Appearance => Themes => Add New => Upload).

I usually make any changes on a local install using MAMP, then I upload the child theme file in Coda. If necessary, I’ll make a few final tweaks remotely, and make sure I have a backup of the child theme on my computer when I’m done.

What questions do you have about child themes? Leave it in the comments, and we’ll answer…

Façade is a minimal, modern theme, packed with features to make your business look amazing. Showcase your products and portfolios, and make your site look clean and modern.

The best part about Facade is that you can customize every color in the theme with no coding. We’ve stacked the theme customizer so you can change the background image, any color, add your logo, and even change fonts with a couple clicks. Check out this video for a demo:

]]>https://www.presscoders.com/new-theme-facade/feed/0*NEW* Theme Sneek Peekhttps://www.presscoders.com/new-theme-sneek-peek/
https://www.presscoders.com/new-theme-sneek-peek/#commentsSat, 13 Apr 2013 09:54:04 +0000http://www.presscoders.com/?p=6939
We’ve just finished our latest theme WordPress theme, Façade. Yay! We are now working hard behind the scenes getting it ready for final release but we couldn’t resist giving you a sneek peek in the mean-time!

Façade will be released in just a few days, on 16th April, so be sure to grab your copy hot off the press! Be one of the first to use Façade on your own site!

Façade uses the built-in WordPress theme customizer to great effect. Watch the video below to see how this is implemented in one of our other themes (FitPro). It works in Façade in exactly the same way. Customizing your site has never been so easy!

Watch how easy it is to customize Facade with no coding!

]]>https://www.presscoders.com/new-theme-sneek-peek/feed/0Designfolio Pro Update (1.3) is out!https://www.presscoders.com/designfolio-pro-update-1-3-is-out/
https://www.presscoders.com/designfolio-pro-update-1-3-is-out/#commentsThu, 28 Mar 2013 19:52:18 +0000http://www.presscoders.com/?p=6660
We just released an update to the Designfolio Pro Theme. It’s mostly code updates that you won’t notice, but there’s a couple major changes. Please read this post before updating.

The biggest changes:

1. The custom logo uploader has been moved to the theme customizer. It is no longer on the Designfolio Options page! Click Appearance => Theme Customizer, then expand the site title/tagline box to see the logo uploader and tagline options.

2. Auto updates are here! This is the last time you will have to manually update your theme. All versions 1.3+ will be able to be auto-updated from the admin area.

Update Instructions

Login to your WordPress admin area. Go to Appearance => Themes, and activate any theme other than Designfolio Pro.

Delete the Designfolio Pro theme. (There is red text under it that will say “delete”)

Under Appearance => Themes, click the “Install Themes” tab at the top, then click the blue “upload” text.

Upload and activate the new version

Update WordPress to the latest version (if necessary)

Note: You do not need to update bonus designs or child themes unless that is specifically mentioned.

IMPORTANT notice if you are using a child theme

If you are using a child theme with a modified comments.php page template, you will need to make a small update to this file in your child theme after updating. If you are not using a child theme, ignore this notice.

After updating to Designfolio 1.3, you must edit this line at the top of the comments.php page template IN YOUR CHILD THEME:

1

<?php global $theme_object; ?>

Change to:

1

<?php global $pc_theme_object; ?>

That’s it! DO NOT edit any files in the Designfolio Pro theme itself, this only applies if you have copied the comments.php page template into a child theme before updating.