Published on

Powerpoint regarding how to create wordpress web application easily

Published in: Education, Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. This learning objective will teach you the basics of WordPresstheme creation. We should start by reviewing word pressobjectives. Our goal is to make learning easy and enjoyable. Noprior experience with CMS, database or server-side scripting isrequired. However, you should be comfortable coding withHTML and CSS.HTML 2 WordPress features video screencast tutorials.
  2. 2. ObjectivesHTML WordPress teaches web designers and front-end developers, with no priorexperience on CMSs, how to set up WP, to convert an HTML site into a basicWP theme and to add simple customization into their themes. Learners will beable to:Set up a mySQL database for WP and install WPMake WP site secureBreak apart HTML files and modify WP header, sidebar, containers, footer andcomments form templatesInstall plug-ins to enhance the site’ viewing experienceInsert short code snippets to add extra features into their WP template
  3. 3. Benefits of using WordPress1. Cheap or Free: Using WordPress for your website means it’s cheap or free. WordPress itself is free.2. It’s That Easy: WordPress is easy to use.3. Do It Yourself: With WordPress you enter the Do-It-Yourself world. No more waiting for and paying a programmer to fix a tiny error, saving you time and money.4. Many Users, Many Places: WordPress is online and offers multiple users, which means you’re not the only one who can fix something in a pinch and you can access it from anywhere. Which means if you’ve got Internet access in Town , you could work from there. That also means your important site is backed up on a secure server with multiple redundancies, not some high school kid’s laptop.5. Climb the Search Results: WordPress also makes it easier to optimize your search engine results.
  4. 4. Tutorial OR Quiz Assessment
  5. 5. ContentsSetting up a WAMP Server Read •Installing a local Apache server Read •Setting up a mySQL database for WP and installing WP ReadMaking your WordPress site secure ReadBreaking apart HTML files and modifying WP templates Read •Header template Read •Sidebar template Read •Footer template Read •Comments Form template ReadExtra for enhancing site viewing experience •Installing plug-ins Read •Installing Themes Read •Inserting short code snippets Read Back to Main Menu
  6. 6. WordPress ObjectivesThe aim of this presentation is to provide some guidelines oninstalling the Wordpress CMS within a Uniserver installation in alearning manner which would be easy to apply.Assumptions: WAMP stack installed - wampserver or uniserver Installation based on the previous WAMP presentation. No Wordpress installed. A database does not exist. Using chrome browser (download screen shots)Necessary Requirements to Install WAMP Server: WAMP servers up and running Archiving software To extract Wordpress, as in: 7-Zip - http://www.7-zip.org/ To download WAMP server go to www.wordpress.com
  7. 7. Download WordpressOpen the link to http://wordpress.org and click the download button.Then click on the button similar to this. Download the word pressto use and create a website. Choose the folder where you want the download to take place.
  8. 8. Download Wordpress Download the Wordpress link – Right click on the download folder. Double click on download archive to open the download folder.Drag the Wordpress folder to uniserver inC:uniserverwww to install the Wordpressthese were the first steps towards theInstallation.
  9. 9. Checking the ServersAfter downloading the Wordpress following steps should be taken to start theserver .Open t he Apache Server – Program -3.1.1Make sure that both Apache and MySQL are working – click on Start BothMake sure that the indicator by the Apache and MySQL has turned intogreen.To view wordpressdatabase click onphpMyAdmin.Click on View wwwto start the installationand to start creatingthe wordpress
  10. 10. Installing Wordpress to StartStep 1: Click on Wordpress link under ServedSubdirectories in the window.Step 2: Click on Create a Configuration FileButton to start the process.Step 3: Then Click on Let’s go to start settingup the database details.
  11. 11. Database configuration Enter root in both username and password fields .DO NOT use these identification for a creationsetting. Leave other settings as it is. Switch over to the Uniserver relieve to setup the root user password – it evades to no password. Wordpress expects a password to be resetset. Leave the password as root. Click change password option and close the dialog box . Switch back to the browser.
  12. 12. Create Database Select the phpMyAdmin tab from Apache server. Select Databases Enter in Wordpress under the Create new database Click Create. A Wordpress database will appear on the left if it is created successfully. Switch back to the Wordpress browser tab and press the Submit button. Submit After a number of seconds the success page will appear and you can now start configuring Wordpress...click Run the Install
  13. 13. WordPress Configuration Use any site title Username is for the administrator – username- admin is ok Use ―password― for the admin’s password and there is NO way of retrieving a forgotten password even if you supply an email address. Click Install Wordpress to continue.... Back to Contents
  14. 14. Step 1: WAMP Installation Download and install WAMP. WampServer2.2a-x32.exe or Coral_8_0_0.exe are the current versions. The wampserver should place the following shortcut onto your desktop. Uniserver does not create a shortcut on to the desktop but will ask for a folder for extracting in . Dont forget this folder location – C: is a good choice.
  15. 15. Step 2: Wampserver Installation Steps Step 1 Step 2Starts up with welcome wizard and then press Next . Check the I acceptthe Licence Agreement radio button and then press Next .
  16. 16. Step 2: Wampserver Installation Steps Step 3 Step 4Tick both checkboxes of select additional tasks and then press Next . Selectthe destination location by browsing for the folder and then press Next .
  17. 17. Step 2: Wampserver Installation Steps Step 5 Step 6If you are to Install the wampserver and then press Next .When finished installing and then press Finish .
  18. 18. STEP 3: Wampserver installation completion 2. This icon in the system tray should be green. If it is yellow or red then there may be another application conflicting with WAMP and it means it is not working 3. Left click on the icon to bring up this dialog. Localhost will point your browser to the default webpage.1. Leave this checkbox checked4. If the installation wassuccessful you will havethe following page loadedup in your browser.
  19. 19. Step 4: The Uniform Server 2. A dialog like this will appear during the extraction then disappear. 3. Using explorer locate1. Double click on the the c:uniserver folder.Coral_8_0_0.exe or newer. The contents should be asChange the extract path to reflected in the screenreflect c: and click Extract. capture.4. Double click on 5. An installation conflict willStart_as_program.exe to load the give you the above message.server up as a program and not a Click on Start Both – the twoservice. Installation is ok if you get red squares should turn greenthe above message. Leave thedatabase password as is.
  20. 20. phpmyadmin Both servers support the phpmyadmin database management tool, accessible through the system tray menu.
  21. 21. STEP 4a: CMS installation in uniserver Download the latest wordpress distribution – at the time of writing it was version 3.0.5 – it is currently 3.1 now. Open the uniserver system tray menu and click on the 1. Before the wordpress is installed. ―WWW Root‖ menu to open the website in your browser. Never delete any of the files in this folder yet. Extract the wordpress archive into this folder. Copy the contents of the c:uniserverwwwwordpress folder into the c:uniserverwww folder. The c:uniserverwww folder you will be your working copy and the c:uniserverwwwwordpress will be your backup. Switch to your browser and refresh the page. 2. Files in c:uniserverwww 3. Files in c:uniserverwww before the wordpress is after the wordpress is extracted. extracted.
  22. 22. STEP 5: CMS initial configuration1. Click the button tocreate the configurationfile. 2. Click to continue. 3. The database configuration needs to be set up before wordpress will work. • Set the username to root and the password to root. •The database host and table prefix can be left as it is. Click the submit to continue. Back to Contents
  23. 23. Step 1: Switch off & on the Apache Servers Ensure both the Apache and the MySQL servers have been stopped – red indicators. If you used Ensure both the “Start_as_a_program”Apache and the MySQLservers has been If you used “Start_as_a_service”started – green indicators. Back to Contents
  24. 24. Securing Wordpress SiteStay Updated – Wordpress should always be automatically or download thewordpress package and install it.Create Custom Secret Keys for your wp-config.php File – All the confidential detailsfor your wordpress site are stores in the wp-config.php in your wordpress root directory.Secret key are one of information which is stored in that file.Change the database Prefix – lot of basic sit setup stuff for wordpress is the sameacross lots of sites. This is super convenient.Hide your wordpress version – another good idea is to remove generator for yourwordpress.Install Wordpress security Scan plugin - this is good plugin which scans yourwordpress installation and give the suggestion accordingly. This plugin will checkPassword, File permissions, Database Security and Wordpress Admin protection.Limit the number of failed Login Attempts – the plugin can also limit the attempts offailed login. It is important is those cases where someone is trying to have a guess onyour password manually or using the root.Ask the Apache password t Protect - you can protect your site with 01authorization in easy steps. Back to Contents
  25. 25. Breaking apart HTML files and modifying WP templates Before we can take our HTML-based site to modify the wordpress templates, we need to select a theme for wordpress. We should first understand how WP creates a page. It is very simple. WordPress builds a page like we build something in Lego. We need to break things down into the basic chunks and then WP will put the right pieces together based on what page we’re on. (Refer to the WP Codex — Template Hierarchy for more information.) So the overall structure of a single page looks like this:
  26. 26. Breaking apart HTML files and modifying WP templates There are 8 main types of basic container pages index.php: for your default and blog home page single.php: for displaying a single post page.php: for display static ―page‖ content archive.php: for displaying listing of old posts archives.php: for displaying a hierarchical list by post date or categories search.php: for displaying search results image.php: for displaying image galleries links.php: for displaying listing of links Each container page must include the following chunks layout header (header.php) layout sidebar (sidebar.php; optional) layout footer (footer.php)
  27. 27. Breaking apart HTML files and modifying WP templates Additional things a specific page might have, includes: search box (searchform.php; typically found in the header or sidebar template) comments display and post form (comments.php; typically found in the single and page templates) And that is the basic structure to WordPress. Converting a HTML layout into a WP theme is just a matter of dividing your layout into their corresponding layout chunks and making sure your container pages load all the right bits. That wasn’t so bad was it? Back to Contents
  28. 28. Header Template – Blog InfoFirst step is to do a setup of blog info. And following are two ways todo this:You set the blog or website title and description in the Administration> Settings >General panel, and WordPress does the rest. ORThe WordPress Classic Theme features the header code look like thisin thewp-content/themes/classic/header.php template file:<div id="header"><div id="headerimg"> <h1> <a href="<?php echo get_option(home); ?>"> <?php bloginfo(name); ?></a> </h1> <div class="description"> <?php bloginfo(description); ?> </div> </div></div>
  29. 29. Header Template - Styling HeaderThe styles for the header are contained within the h1, header, headerimg, anddescription CSS selectors. These are all found within the style.css, though may befound in the styles in the header.php of the Theme which you are using. You willhave to check both places.In the Classic Theme, the CSS for the header are found in one selector, the #header.#header { background: #90a090; border-bottom: double 3px #aba; border-left: solid 1px #9a9; border-right: solid 1px #565; border-top: solid 1px #9a9; font: italic normal 230% Times New Roman, Times, serif; letter-spacing: 0.2em; margin: 0; padding: 15px 10px 15px 60px;}
  30. 30. Header Template - Styling HeaderThe background color is set to a green shade and there is a border all the way aroundthe header which changes colors and also shadow effect. The Times font is set with asize of 230% with a wider than normal letter spacing. The padding on the left sideindents the text in from the left.All of these can be easily changed, giving the border a thicker width and making it allthe same color, changing the background color, the font size and style, the letterspacing, and more by modifying the information in each style attribute.The same is true of the Default WordPress Theme header, except there are more stylesto think about and they are found within the header.phps "head" tag and the style.css,though once you have your styles set, you can move the information into your stylesheet.
  31. 31. Header Template - Styling HeaderThe styles that control the headers look are found within the h1, header, headerimg, anddescription CSS selectors. Just like the Classic Theme, find these references and makeyour modifications there to change the look.Changing the header image of the Default WordPress Theme has been simplified withthe introduction of a utility called Kubrickr. It simply asks you to supply a new imagefile name for the header and then switches it for you, so you do not have to dig into thecode. If all you want to change is the header image, this is an extremely useful and easytool.If you do want to get your hands into the code, dig into your header styles and make thechanges. Below is a simple tutorial on changing just the header image manually
  32. 32. Header Template –Changing the Header ImageThere are many different header images and header art available for you to use tochange the image in the header in wordpress. The styles for the header image for theDefault or Kubrick WordPress Theme, and any Theme based upon that Theme, aremore complicated to change than those for the Classic Theme. The styles are foundwithin the styles in the header.php "head" section, as well as in the styles.css. To changeonly the header image reference, open the header.php template file and look for thestyles like this:#header { background: url("<?php bloginfo(stylesheet_directory); ?>/images/wc_header.jpg") no-repeat bottom center; }#headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }Click on the icon given below to see the changes to the header image
  33. 33. Changes to header’s ImageBack to Contents
  34. 34. Footer TemplateThe footer links within our themes can be edited very easily using the WordPressAppearance Editor. They are not encrypted code, but editing the footer will requirea very basic understanding of HTML.1. Navigate to the Appearance > Editor within the WordPress admin.2. Choose the ―Footer‖ template from the list of templates on the right.3. Within the template, you will need to edit the HTML code. An HTML link within the footer will look similar to this:<a href="http://www.organicthemes.com/themes/" target="_blank"><?php _e("Organic Theme Name",organicthemes); ?></a>4. Change the URL, title and theme name, or you can simply delete the code to remove the link from the footer.5. Do NOT delete any <div> tags, unless you are familiar with the code.6. Update the file, and refresh your site to see the changes. Back to Contents
  35. 35. Sidebar – Adding Extra sidebarAdding Extra Sidebar to your WordPress ThemeOh!… What’s this?? The theme has only one sidebar!You need more than one and it is now too late toswitch to the theme with more than one sidebars. Butwait!! Let me teach you how to add an extra sidebaror sidebars to your favourite theme. People whoknow PHP will find it easy to follow as it is easy touse the code that I have provided in this Quiz. I amassuming that you already know HTML and a bit ofCSS.Put this code into that file :- if ( function_exists(register_sidebars) ) register_sidebars(2);To start the Quiz press and to skip the quiz press?>
  36. 36. Sidebar – Adding Extra sidebarYou can increase this number if you wantmore sidebars and if your theme’s layout canaccommodate it. Now, when you go to yourWordPress admin section and browse to thewidgets under the menu item calledpresentation, you will see two sidebars listedthere. You can drag your widget items intoany of the sidebars.Now comes the part where we actually buildthe sidebars. If your theme has only onesidebar, try to locate a file called sidebar.phpin your theme folder. In this example, wherewe are trying to modify the theme for twosidebars, let’s rename sidebar.php tosidebar1.php and make a new blank filecalled sidebar2.php. Put this code intosidebar2.php and save the file. Back to Contents
  37. 37. QuizTo begin the tutorial, extract your theme into a folder and open it to see allthe files. If your theme has only one sidebar, then most probably you willNOT find a file called functions.php in your theme folder. In that case youwill have to create this file yourself. Just open notepad or any other codeeditor to start a new file. Put this code into that file :- if ( function_exists(register_sidebars) ) register_sidebars(2);Save the file as functions.php and put it in your theme folder. This piece ofcode actually tells WordPress to register two sidebars for you (Seeregister_sidebars(2) in the code).Press the icon to go to next icon Back to Main Menu
  38. 38. Quiz Download Wordpress and Install Wordpress Download theme ―On Demand‖ and install into wordpress. Download plugin from google and install into wordpress And insert short codes into the plugin. Back to Main Menu
  39. 39. Comment Form The comments form are found within the comments.php or commentspopup.php. In the Default WordPress Theme, they look like this when viewed as a generated web page, click to viewWhile individual sections of the comments feature styling reference, the DefaultTheme has no general comment division or group style reference, though one couldbe easily be added.The #commentform is the wrapper for the whole form, though the styles above itmay influence the #commentform as part of the CSS parent/child relationship.As with the search form, you can style this with either a background color or image,you can add borders, and you can change text color, font-family, font weight, textdecoration, etc. You are better to define width on each of these layout elements.Remember, like the search form, the width of the column in which the commentsreside influences the width of the comments. If they are fixed, they mayoverlap the sidebar. Back to Contents
  40. 40. <h3 id="comments">One Response to "Hello world!"</h3> <ol class="commentlist"> <li class="alt" id="comment-1"> <cite><a href="http://example.org/" rel="external nofollow">Mr WordPress</a> </cite> Says:<br /> <small class="commentmetadata"> <a href="#comment-1" title="">Date and Time</a> </small> <p>Hi, this is a comment.</p> </li> </ol><h3 id="respond">Leave a Reply</h3><form action="http://example.com/blog/wp-comments-post.php" method="post" id="commentform"> <p> <input name="author" id="author" value="" size="22" tabindex="1" type="text"> <label for="author"> <small>Name (required)</small> </label> </p> <p> <input name="email" id="email" value="" size="22" tabindex="2" type="text"> <label for="email"> <small>Mail (will not be published) required)</small> </label> Next -
  41. 41. </p> <p> <input name="url" id="url" value="" size="22" tabindex="3" type="text"> <label for="url"> <small>Website</small> </label> </p> <p> <small><strong>XHTML:</strong> You can use these tags:....</small> </p> <p> <textarea name="comment" id="comment" cols="100" rows="10" tabindex="4"> </textarea> </p> <p> <input name="submit" id="submit" tabindex="5" value="Submit Comment" type="submit"> <input name="comment_post_ID" value="1" type="hidden"> </p></form></div> Back to Comment
  42. 42. Install ThemesWord Press users may install and switch between themes. Themes allow users tochange the look and functionality of a Word Press website or installation withoutaltering the informational content. Themes may be installed by using the Wordpress "Dashboard" administration tool, or by uploading theme folders via FTP.[8]The PHP and HTML code in themes can also be edited for more advancedcustomizations. Steps to follow: Download the theme from Google search for free Word press themes.Then click the download button or link and you should be downloading a .zip file. Extract the .zip file on your PC. Upload the complete folder of your template to your Word Press installation Now that the files are uploaded, you just need to activate the template. To activate it simply login to your WP installation on yourwebsite.com/wp- login. php and go to Appearance > Themes and just select the new theme. Click “Activate”. Now when you refresh your website, it should load with the new Word Press theme. Back to Contents
  43. 43. Installing PluginsWordPress Plugins install in two ways. Automatic and manual.To automatically install a WordPress Plugin, you must have the following FTPaccess information ready.Server Hostname for FTP accessFTP Username (not the same as your WordPress password)FTP PasswordConnection Type (FTP,FTPS (SSL) )Go to Plugins > Add New and enter the name orsearch term to find theWordPress Plugin youwish to add.
  44. 44. Installing PluginsTo install the WordPress Plugin manually:Download the latest version of theWordPress Plugin to your computer.With an FTP program, access your site’sserver.Upload (copy) the Plugin file(s) or folder tothe /wp-content/plugins folder.In your WordPress Administration Panels,click on Plugins from the menu at the top.You should see your new Plugin listed. Ifnot, with your FTP program, check the folderto see if it is installed. If it isn’t, upload thefile(s) again. If it is, delete the files and uploadthem again.To turn the WordPress Plugin on, clickActivate on the far right side of the list.Check your Administration Panels orWordPress blog to see if the Plugin is working. Back to Contents
  45. 45. Inserting ShortCode to PluginEasily insert any complicated HTML and JAVASCRIPT code or even custom PHPoutput in your WordPress article. Adsense is a website where you can find shortcode for any complicated plugin or HTML You can manage multiple code entrieseasily.After the installation of plugin you would setup the HTML or JavaScript entries inthe Code Insert Box Settings menu. Simply define a unique name and paste thecomplicated codes copied from AdSense into the text area. Then click on theCreate a new entry button.After the creation, you can find that the newly added entry is shown in thebottom. Copy the usage code example and insert it in your article in the HTMLtext area. Thats all To view this please click on the given link.
  46. 46. Back to Contents
  47. 47. Assessment To download the word press and install it onto the uniserver. Install the WAMP server Switch on and off the Apache server Securing word press site Breaking apart HTML files and modifying WP templates Editing Header layout template Editing Footer layout template Adding/Deleting and Updating Sidebar template Comment Form Installing Plugins Inserting shortcode to installed plugins Back to Main Menu