我最近和安迪·惠特利完成了一个网站重新设计项目。IT-IS International Ltd.该项目涉及重新设计和重建itsint.com,and used the WordPress application to cover the core functionality of the site.Let's take a look at the process of tweaking WordPress to transform it from a blogging platform to taking on the job of a typical Content Management System.

View the new IT-IS International website

The Client:

The old IT-IS International website

IT-IS International are a small research and development company working in the life science industry,they develop software and instrumentation for the analysis of DNA (PCR- Polymerase Chain Reaction).听起来很复杂,正确的?!

The new IT-IS International website

Andy was a fantastic example of an awesome client,在整个项目中提供完全的创作自由和极好的反馈。It's lines like this in an email every designer dreams of –

I hope that this project might be something you could really get your teeth into (free reign on the design).


网站的关键要求是在团队更新的同时展示公司的创造力和创新。The structure was pretty simple with a collection of static pages,a news archive and a client only area.

The Solution:

我非常喜欢WordPressapplication,我在每个网站上都会用到它,不管是不是博客。WordPress has some amazing versatility,and can easily take on the role of CMS,eCommerce and more!

The IT-IS International site could easily be ported into WordPress.The static pages could be listed as WordPress pages,新闻部分可以利用WordPress的博客功能,and the Client Area could be tackled with a mix of the default WordPress user hierarchy and a handy plugin or two.

The Design:

该设计采用了IT-IS国际有限公司的蓝色企业配色方案,grey and white.I took inspiration from the typical website design styles of web apps that use subtle details,and white space to create a fresh concept.

作为一个更关注项目WordPress部分的主题,I'll not go into too much detail on the design and coding stages,但这里有一个截屏视频I recorded of the process of cutting and coding up the concept into a working XHTML/CSS page.

Building the WordPress Theme:

Once my coded concepts are complete,I'll then move onto the WordPress theme creation.我的机器上保存了一个基于默认主题的方便模板,but with the majority of the HTML removed,leaving the collection of PHP snippets ready for insertion in the relevant areas of the theme.



A little customisation was required in the navigation bar to allow the active link state to show on each item.The home link was inserted manually,接着是WordPress的默认值list_pagestag.每当用户查看某个类别时,需要激活新闻区域,an archive or a single post so条件标签用于调整活动链接类的外观。客户区部分也需要进行类似的调整;This area uses sub pages,因此,当页ID 12的子级处于活动状态时,菜单也需要处于活动状态。


Coding the date stamps

蓝色的小日期邮票很容易用CSS和the_timePHP tag.The whole date is contained within the paragraph tag with a class of date;在这一范围内,包含每个帖子的月份。有多种选择可供PHP date function,所以这是一个简单的选择哪个字母代表我需要的日期类型的情况。I needed a good old number (d),followed by the shortened display of the month (M).

Custom Pages

Coding the custom page templates

要将自定义样式应用于单个页面,我用过自定义页面模板to specify a unique title graphic,确定页面是否有一列或两列。自定义页面模板还可以方便地将地图插入联系人页面,允许嵌入代码直接插入到代码中,safely keeping it away from the WordPress editor.

Activating the custom page template

This page template could then be attached to the specific page in the WordPress admin area.

Client Area

Configuring the Member Access plugin

To create a hidden client only area on the site I employed a mix of plugins to work alongside the default WordPress user system.The relevant pages were created,然后一个叫做成员访问allowed permissions to be set on a per-page basis.This covered the main chunk of functionality that was required,但是用户仍然需要能够登录…

Sidebar login

这是第二个插件的位置。侧栏登录creates a username/password login form that can be placed anywhere in the template with a little template tag.Once the user logs in,a collection of links are displayed in place of the login form,允许用户访问WordPress仪表板中的个人资料,or to log back out.


A mix of new CSS styling and some tweaks to the HTML in the plugin file soon tailored the appearance of the form to match the rest of the site.
To completely finish off the login screen for both front end users and the IT-IS admin,the awesomeBM Custom Login允许超级简单的自定义默认WordPress登录屏幕,提供与网站其他部分相关的品牌外观。


58 Comments submitted Add yours!
Subscribe receive beplay全方位手机移动娱乐平台Spoon Graphics newsletters

Subscribe to my newsletter to be the first to hear about new posts


  1. Thank you for this post.That helps me a lot for my current project.But how are you handling images on the custom page templates?我一直对此有意见。你是使用WordPress中的自定义字段还是如何使用?这个问题有插件吗?

  2. Great post as the others said.

    Was wondering what the MHTL editing app you are using in the screencast is?

  3. Shockingly I only learned about Custom Page Templates the other week /shame but since then I've been looking into applying them to a project I have coming up.Should be fun.

  4. Great post.我正在一个使用wp的网站上工作。我没有设计它,但我仍在尝试头脑风暴的方法,设计它的人可以使它更好地满足我们的需要。这是一个良好的开端。

    Also,I'd love to hear any suggestions on this if anyone has them: This site is a Nintendo fan site.We have a lot of reviews that we've already put up (as WP posts).然而,WP doesn't let us alphabetize them,which is what we'd like to do.Any workaround so that people could view the reviews alphabetically?

  5. constantly amazed at how perfect your timing is with these tutorials!我也在写一个Wordpress网站。



  6. Hi Chris I really enjoyed this post and how you showed what you do in a typical WordPress package.

    Say,how did you inserted an active class state for the links generated by WordPress' default list_pages tag?

  7. 好帖子。it's always cool to see how different people handle wordpress designs/coding.

    @Ted Goas – the default list_pages code usually spits out a class item for the active page.The class item it automatically adds to each of the li's that are active is "current_page_item"

  8. OMG!!哇…我能问一个问题吗?Where do I learn to make websites like this one??I'm not kidding,you're amazing!!O___O I'm a graphic designer and work some web design too with PS and Flash,but css and xhtml are still unknown to me,could you please recommend me some tutorials or starting points to this awesome art??非常感谢您抽出时间来阅读本文!恭喜你! !:)

  9. Great article,我一直很想知道伟大的设计师(像你一样)是如何遵循程序来解决定制设计过程中出现的问题的。Thanks.

  10. 谢谢你的好话,克里斯,it was awesome to be able to work with a true professional.The workflow was seamless and you delivered on point without fail,frequently exceeding expectations.I think the outcome speaks for itself and needless to say you left us,客户,大的,我们脸上洋溢着灿烂的笑容):如果有人有机会和克里斯一起工作,那就双手抓住机会,I can guarantee you won't be disappointed!

  11. Great design!不过,如果我能发表评论的话?The font color is a little bit too light (not enough contrast against the bg color).由于对比度低,我不得不眯着眼睛看文字,there may be others who will have the same issues.Just a thought,否则,我真佩服你的工作。

  12. I told this so many times,你就是那个人!
    This tutorial really kick ooshies!我过去害怕面对这样的设计,好,不再了!.

  13. thanks for the article it was very interesting and helpful.I'm searching high an low for as much info as i can get on transforming wordpress templates from just a blog to a cms,and on designing them myself.do you have any sources you recommend


  14. Am I the only one who downloaded the video and went through it bits at a time?++


    Chris,thanks for all your great tutorials and ideas.

    Continued success!

  15. 嗨,克里斯,
    2 I am curious… what is the content of the client area?只是一页一页的图片/文本/多媒体还是有一些服务?

  16. 这对于那些想在CMS上使用wp的人来说是一个非常有用的wp教程。Thank you.


Comments are now closed