WORDPRESS WEB DESIGN GUIDE 1. Plan your site > Site map 2. Select theme / design style > Identify free theme > Appearance > Theme – 2013 3. Identify graphics and pictures > Header> Slider > banners > icons 4. Permalinks 5. Adding pages 6. Setting Menus 7. Appearance > Customize 8. Widgets 9. Media 10. Adding posts 11. Post categories 12. Portfolios and galleries 13. Footer 14. Plugins: a. Plugin CSS b. Ultimate shortcodes c. Form manager by Campbell Hoffman d. User Registration e. Buddypress f.
All-in-one-seo
g. Menu editor pro h. Social sharing i.
Image slider
j.
Sidebar
k. Widget plugins l.
Google map plugin
15. Wordpress standard CSS 16. Appearance > Customize theme> CSS>Responsive 17. User types 18. Template PHP files of wordpress a. Adjusting header elements b. Footer elements c. Sidebar elements d. Widget elements e. Menu element f.
Creating new template
19. Image Cropping 20. HTML page slicing
PLAN YOUR SITE Website planning is about knowing exactly what you are going to create. 1. Purpose of website. First thing we do understand the purpose why website is being created. Most people create websites for: a. Only showcasing their products. b. Selling the products online c. Generating leads / enquiries for product or service. 2. Requirement study. First read all the client emails and documents. 3. Competition study. Then study a few competitor websites to find out what the clients business is all about. Note the following points while doing competition study:
a. Featured products / services b. Featured content c. Focus area d. Benefits of product or service 4. Create a detailed list of page elements for each page. It is a good practice to draw all these elements and spread them on the page as they would appear in a browser. Main elements are: a. Site Map b. Slider / header images c. Featured content boxes and their images d. Footer e. Sidebar elements f.
Forms
SELECT THEME / DESIGN STYLE Wordpress websites should always be created using wordpress themes. There are a lot of free and paid themes available for wordpress.
For paid themes, there are sites likes www.themeforest.com For Free themes, there is a section in wordpress admin APPEARANCE > THEMES Here you see two links on the top. Go to INSTALL THEMES. Again there are a few links on top. Upload – This is used for uploading paid themes purchased from sites like themeforest.com. You get a zip file that can be uploaded from here and it automatically gets installed on wordpress. Other links like search featured newest and recently updated are to find free themes. On searching, it displays a number of themes that can easily be installed by clicking the install button below it. Before installing a theme, you need to preview the theme and understand its features in detail. The “details” link will tell you the features theme contains. Please remember that you will never get an exact theme to suit your website as it is. It requires modifications at various places to suit our requirements. At this stage, we can only think of a few broad things that our theme should contain. 1. Menus: Do you require one single menu or two menus? 2. Widgets: what type of widgets does the theme come with? 3. Footer: what type of footer does the theme have? 4. Logo placement: Does the theme have a logo placement to suit your style? 5. Full screen / fixed width? 6. No. of columns. Is the theme a two column or a three column theme? Colours and fonts etc can be changed in the theme at later stages, so we do not focus on them while deciding the theme. Once you find a theme that suits your requirements, you can install the theme by clicking install now. Installed theme needs to be activated before it could be used. Once activated, the theme shows up on the frontend. Sometimes a theme does not get installed due to version clash in wordpress. Such themes should be avoided. If such an install causes fatal error in wordpress, you are required to delete the theme folder using FTP connection. Contact systemadmin regarding this.
Selecting a theme can sometimes be a tedious process and you may have to install and test a few themes till you get the right one that suits your website. But it is very important to get the right theme as it makes the site development very easy and saves a lot of time.
IDENTIFYING GRAPHICS AND PICTURES Graphics and pictures are an important element of wordpress websites. Since everything else is controlled by theme functions, images are the only element that brings about a difference and identity to a wordpress website. We use stock images and photos from www.depositphotos.com You are required to select images from depositphotos and give their image number to the designer, along with text that needs to be written over the images / sliders / banners to make them communicate the message. The statements / words to be used on sliders and banners have to be carefully chosen. In many cases, the client tells us exactly what content needs to come there. In other cases, clients leave it to us to decide the same. In the second case, you need to view competitor websites and see what they are writing, and create a write-up accordingly. In many cases we use product, service benefits, highlights or differentiators as banner or slider text. Alongwith the image ids, you can also give refrence URLs of banners and sliders that you like.
PERMALINKS Before you move any further, its important to set the page URLs (to be created) in a form that is good for SEO and easily understandable. This is done using permalinks. GO TO Settings > Permalinks Under “common settings”, we set the option to “Postname”. You can give custom structure also. Save the options before leaving this page.
ADDING PAGES Now we start creating the pages using the sitemap. To add a new page, GO TO Pages > Add new. The first Field on the page says “Enter title here”. Here you have to enter the page name from your site map. Next step is to select a Template (Right Column 3 rd item) from a drop down list. These templates are a part of the theme and control overall page blocks. Generally templates are like “full width”, “left sidebar”, “home”, “default” etc. It is a standard practice to use one template style for all website pages except for “homepage”. The content of the page can be added in the BIG text Box in center of the page. There are many ways to add content and we should always make use of “shortcodes” while adding content. A standard plugin that we use is “shortcodes ultimate”. This can be installed from plugins section. Images can be added to the page using “Add Media” button. Once all content and images are added to the page, it can be “saved as draft” or “published” using links on RHS top box. The “parent page” and “order” settings should not be used as we control these with MENUS discussed later. Likewise, create a new page for all sitemap items.
SETTING MENUS After adding the pages, GO TO Appearance > Menus This page controls the navigation structure of your wordpress site. The first thing on this page Top Left is a BOX named “Theme Locations”. In this box it shows how many menus are supported by your theme. There will be drop down selections equal to the number of menus supported.
The next step is to create a new menu by typing the menu name in the field against this label. We generally give identifiable menu names as “main navigation”, “footer navigation”, “top products” etc. The very first menu we create is often the “main navigation”. For this, you need to select the pages you want to add to this menu and click “add to menu”. Your pages will appear in the big box on the center of screen. Pages can be controlled by dragging them to make them appear as sub pages of a main page and you can create as many levels of sub pages you like. Once done, save this menu. Final step is to select the new menu created in the TOP Left box drop down selection, and SAVE it. Repeat same steps if there is more than one “MENU Location” available for your theme. You can create as many menus as you want to and use them at many places in your website using widgets, in sidebars and in footer etc.
APPEARANCE CUSTOMIZE With the new version of wordpress, now it’s possible to override your theme limitations for the HOMEPAGE. Go TO Appearance > Customize Here you will find 4-5 standard options. The last one is regarding your HOMEPAGE. Here you can chose your homepage as a static page and design that page using “add new page” under pages.
WIDGETS Widgets are a block element on a wordpress site. It is controlled by GO TO Appearance > Widgets Here you will find all the default wordpress widgets and the ones that come included with your theme. New widgets can also be added using plugins like.. Widgets are generally elements contained in sidebars and therefore help building up page elements. Generally widgets can be used to place links, banners, forms and other such elements on pages, especially sidebars and footer. When you place a content block using a widget, if there is a change in that content, you don’t have to change every page. Just change it in the widget and change reflects everywhere.
MEDIA Wordpress contains all media items like images, videos, animations etc in a separate location called media. In this location, the media elements are arranged by dates. You can upload media items from your desktop and it gets stored in this location. Whenever you want to use the media item, you can browse it from media library and use its link wherever you want on the site.
POSTS AND POST CATEGORIES You can add pages to wordpress site in two forms PAGES and POSTS. POSTS are generally used as a blog part of the wordpress website. First we create a page called “Blog” and select a Blog Template for that page (if available). All the post created will come automatically under this page. Posts are added in the same manner as Pages. You need to GO TO Posts > Add New to add a new one. The main difference between posts and pages is the way they are structured. Pages are independently structured whereas posts have a hierarchical structure. You can create categories and select one or more category when creating and saving a “POST”. Post CATEGORIES can be created by
GO TO Posts > Categories. Generally there are different widgets for posts and pages. So, you will mostly have to separately set widgets for posts.
PORTFOLIO AND GALLERIES Many wordpress themes have a portfolio template option when saving a page. This template works differently for different themes and you have to check it out separately for every theme. For themes that don’t have a “portfolio” template, you can install a plugin like.. The plugin will self install by first browsing the Plugin by GO TO > Plugins > Add New You can search for plugins by name or feature and install it the way you install a theme. A plugin generally adds a menu item on the LHS or creates a link for itself under SETTINGS. The portfolio plugins generally pick items from your “media” and showcase it in posts. Often these posts or their categories are reserved for this plugin. There are many plugins available for other functionalities and we will discuss some commonly used ones.
WORDPRESS CSS There is no wordpress CSS as such. Access to this is only required for changing the admin look and feel which is mostly not required. To change any other stuff, you need to look for Theme CSS or Plugin CSS
PLUGIN CSS Go TO Plugins > Editor > Select Plugin to Edit (top right) Example: Contact Form 7 It shows a lot of file on the right column but many times we don’t have the access to css files. Then we have to go via FTP. GoTO > wp-content > plugins > plugin name > styles All CSS have their own nomenclature which is mostly described in detail on plugin website. To find the plugin website Go To > Plugins > Installed Plugins Under the plugin name, there is a link to “visit plugin site”
THEME CSS GO TO Appearance > Editor > Select Theme to Edit > Style.css OR Stylesheet.css For some themes, you will be able to see the style files here and edit them. For other themes, you will see only a dummy file and will have to GO TO FTP > wp-content> themes> theme name> style.css Best way is to read the help file that comes with the theme or is available on the theme site.
MAKING CHANGES TO THEME ELEMENTS Go to > Firefox > right click on the element (menu, widget, font, footer etc) > inspect element This You Tube tutorial shows the details on how to do it. http://www.youtube.com/watch?v=qlrOmvfL5eE
CREATING A NEW TEMPLATE Select TEMPLATE page in the editor. Generally these pages are named as template_rightsidebar.php) The wordpress PHP functions used in the template are self explanatory. You have to copy a template, make required changes to it, generally by commenting the PHP code and saving it as a new file. The new file should be stored in the same location as other theme templates. The TOP of the template page is where you give the name to your template as it appears on the right side “drop down menu� when you add a new page.
MAKING THE SITE RESPONSIVE http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/ http://www.1stwebdesigner.com/css/responsive-website-tutorial/
ULTIMATE SHORTCODES
FORM MANAGER BY CAMPBELL HOFFMAN