Looking for a Tutor Near You?

Post Learning Requirement »
x
x

Direction

x

Ask a Question

x

Hire a Tutor

Presentation On WordPress

Loading...

Published in: Wordpress Training
57 Views

WordPress Installation and Theme Development

Rami M / Dubai

4 years of teaching experience

Qualification: BCA, MCA(COMPUTER APPLICATION)

Teaches: Computer Science, Science, Social Studies, Maths, Computer, Mathematics

Contact this Tutor
  1. Theme Development Presented By Ramiyunnisa T K
  2. Contents Introduction • • Features ofCMS Installation • • WordPress - Dashboard Developing Wordpress-Theme • Screenshots • • Advantages Dis-advantages Conclusion • References • 2
  3. • Introduction WordPress is an open source Content Management System (CMS). The Content Management System (CMS) is a software which stores all the data such as text, photos, music, documents, etc. and is made available on your website. *It helps in editing, publishing and modifying the content of the website. 3
  4. • Features of CMS User Management Media Management Theme System Extend with Plugins Search Engine Optimized Multilingual Importers
  5. • Installation System Requirements for WordPress • Database — MySQL 5.0 • Web Server — Apache • Operating System — Cross-platform • Browser Support — IE (Internet Explorer 8+), Firefox, Google chrome, Safari, Opera • PHP Compatibility - PHP 5.2+ 5
  6. • Installation When you open the link https://wordpress.org/download/, you will get to see a screen as the following snapshot WORDPRESS.ORG S'—-ase Theme Phens Sumrt Download WordPress Blog latest release (Vérzic.n 4.3 ) two formats the link: to right. have no idea what to do with 'hi; signing up with one Of our partners that Offers a of Wordpres or getung a Whaes Nut? S-mimAe setting •s sm.ple IC you the pnxess, got guide A-ad Should you the •u' supped "'urns e •pet" to gel Of 62 yo Release Notification hardy a Stable 6
  7. •Installation • WordPress requires MySQL database. So create a new empty database with user/password.
  8. • • Installation Logging You are username Email Address Me Back to wordoress 8
  9. • WordPress - Dashboard After logging in you are on the main administration screen called Dashbord. Dashboard Welcome to WordPress! We'æ asÆmbled me links to get bm Mite rißt uog site Actions LMn At a settings 9
  10. WordPress - Dashboard The WordPress Dashboard is a first screen which will be seen when you log into the administration area Display the overview of the website. You can customize your needs by using some quick links such as writing quick draft, replying to latest comment, etc. 10
  11. N/A
  12. WordPress - Dashboard Dashboard Menu The WordPress Dashboard provides navigation menu that contains some menu options such as posts, media library, pages, comments, appearance options, plugins, users, tools and settings on the left side. * Screen Options The dashboard contains different types of widgets which can be shown or hidden on some screens. It contains check boxes to show or hide screen options and also allows us to customize sections on the admin screen. 12
  13. WordPress - Dashboard Welcome Customize Your Site , creating a blog post, creating a page and view the front end of your website. Quick Draft Mini post editor which allows writing, saving and publishing a post from admin dashboard. It includes the title for the draft, some notes about the draft and save it as a Draft. WordPress News Displays the latest news such as latest software version, dates, alerts, news regarding the software etc. from the e icial WordPress blog. 13
  14. WordPress - Dashboard Activity Includes latest comments on your blog, recent posts and recently published posts. It allows you to approve, disapprove, reply, edit, or delete a comment. It also allows you to move a comment to spam. At a Glance This section gives an overview of your blog's posts, number of published posts and pages, and number of comments. When ou click on these links, you will be taken to the respective creen. 14
  15. • Developing Wordpress-Theme What is WordPress Theme? Collection of files that work together to produce graphical interface. Functionality of website without changing the basic WordPress software. 15
  16. • Developing Wordpress-Theme • Before touching any code, First create the themes directory, named "CakesGarden" (Theme Name). 16
  17. •Developing Wordpress-Theme Basic files for a theme, style.css index.php 17
  18. •Developing Wordpress-Theme Define theme description on style.css Theme Name: CakesGarden Author: Rami Version: 1.0 18
  19. •Developing Wordpress-Theme files for theme development header.php (displays headers and navigation, contains HTML code) • index.php • footer.php 19
  20. • • • • • •Developing Wordpress-Theme page.php (individual pages) single.php (individual posts) sidebar.php (displays sidebars, which can be set up in functions.php) functions.php style.css 20
  21. •Developing Wordpress-Theme • Activate your theme from the WordPress Dashboard . Add a Header and Footer to The Custom Theme 21
  22. •Developing Wordpress-Theme The functions.php file in WordPress does many things for the theme. • It is the file where you place code to modify the default behavior of WordPress. 22
  23. •Developing Wordpress-Theme Create a function in functions.php file to include the style.css file into the theme. <?php function CakesGarden_resources() { wp_enqueue_style('style', get_stylesheet_uri()); 23
  24. •Developing Wordpress-Theme Registering Menus register_nav_menus() registers multiple custom navigation menus in the new custom menu editor of WordPress. This allows for the creation of custom menus in the dashboard. // Navigation Menus register_nav_menus(array( 'primary' ( 'Primary Menu 'footer' => ( 'Footer Menu 24
  25. •Developing Wordpress-Theme Menus Footer Menus Links (Currently set to: Footer Menu) Menu primary Menus Links (Currently set to: Prima ry Menu) Create New Menu 25
  26. •Developing Wordpress-Theme register_sidebar() builds the definition for a single sidebar and returns the ID. Call on "widgets_init" action. function ourWidgetsInit() { register_sidebar( array( 'name' => 'Sidebar', 'id' => 'sidebar I 'before _ widget' => '<div class="widget-item">', 'after _ widget' => '</div>', 'before_title' => '<h2 class="widget-title">', 'after title' => '</h2>', 26
  27. Sidebar Archives Reorder ss : Salam's South Bazar 670002 •Developing Wordpress-Theme Widgets MT WT F SS 1234 56789 1011 12131415161718 19202122232425 262728293031 + Add a Widget Email o: Fac ebook • Tuittcr • Instagram • August 2019 27
  28. •Developing Wordpress-Theme Featured Image Support Themes have to declare their support for post thumbnails before the interface for assigning these images will appear on the Edit Post and Edit Page screens. Do this by putting the following code in the functions.php file // Add featured image support add theme support('post-thumbnails'); add add add image image image size('small-thumbnail', 180, 120, true); size('square-thumbnail', 80, 80, true); size('banner-image', 920, 210, array('left', 'top' 28
  29. •Developing Wordpress-Theme Customize Appearance Options function CakesGarden_customize_register( $wp_customize ) 29
  30. •Developing Wordpress-Theme • Settings are represented by a control and can only belong to a single section • add_setting() adds a new theme setting that can be customized using the Theme Customization API. This is a method of the WP_Customize_Manager() class It can only be accessed through the $wp_customize object within the stomize_register action hook. 30
  31. •Developing Wordpress-Theme add_control() Displays a new controller on the Theme Customization admin screen. Control represents the value of section • Controls serve two purposes: - they create a "physical" control that allows a user to manipulate a setting, • also binds a pre-defined setting to a pre-defined section. 31
  32. •Developing Wordpress-Theme add_section() adds a new section to the Theme Customization admin screen. 32
  33. •Developing Wordpress-Theme Customizing Standard Colors Link Color Button Color Select Color Button Hover Color ColM Header Background Color Color Footer Background r Select Color 33
  34. •Developing Wordpress-Theme Custom Page Templates Method of define custom Template <?php /* Template Name: special layout */
  35. •Developing Wordpress-Theme Page Attributes parent (no parent) _d Template Special Layout Order Need help? Use the Help tab above the screen title. 35
  36. •Developing Wordpress-Theme • Custom Background image function CakesGarden_theme_features() { 36
  37. •Developing Wordpress-Theme Customizing Background Image Background Image Remove Change image Preset Fill Screen Image Position 37
  38. •Developing Wordpress-Theme • Custom Widget area register_sidebar() 38
  39. •Developing Wordpress-Theme You are customizing Widgets Sidebar Footer Area 1 Footer Area 2 Footer Area 3 Footer Area 4 39
  40. •Developing Wordpress-Theme • Screenshot Create a screenshot for the theme. The screenshot should be named screenshot.png, and should be placed in the top level directory. The screenshot should accurately show the theme design and saved in PNG format. 40
  41. •Developing Wordpress-Theme Cakes Garden Theme Details Latest Optill Active: CakesCarden Custom' 41
  42. •Developing Wordpress-Theme Basic functions defined by WordPress • Posts the_title (outputs the title of the post) • the_excerpt (outputs the post excerpt) • the_content (outputs the full post content) • the_category (outputs the post categories) 42
  43. •Developing Wordpress-Theme Basic functions defined by WordPress (Cont...) • the_author (outputs the post author) • the_date (outputs the post date) • the_post_thumbnail(outputs the post image); • the_tags (outputs the post tags)
  44. • Advantages Easy to use Plugins Themes Menu management
  45. • Dis-advantages Modification requires knowledge of PHP Graphics modification requires knowledge of CSS and HTML PHP security 45
  46. • Conclusion WordPress is a very good CMS to create a simple website. WordPress Themes are files that allows the user to create the design and functionality of a WordPress site. Each Theme may be different and offers many choices for site owners to change their website look. 46
  47. •References By Aaron Kili I Published: August 24, 2016 1 Last Updated: December 6, 2017 How to Install WordPress 4.9 On Ubuntu 16.10/16.04 Using LAMP Stack Retrieved from: https://w ww.tecmint.com/install-wordpress-on-ubuntu- 16-04-with-lamp/ • PostedApril 24, 2014 How To Install Wordpress on Ubuntu 14.04 Retrieved from https://www.digitalocean.com/community/tutorials/how-to-install-wordpress-on- ubuntu-14-04 Wordpress tutoroal Retrieved from http : //www.tutorialspoint.com/wordpress/wordpress_tutorial.pdf ordPress Theme Development Tutorial Step By Step Retrieved from 47 ttps://vegibit.com/wordpress-theme-development-tutorial-step-by-step/