270 likes | 400 Views
Customizing your Wordpress. Dr Yi Zhou (yzhou@scm.uws.edu.au). Content. Basic techniques A bit more Advanced topics. Content. Basic techniques A bit more Advanced topics. Basic Techniques. Theme Sidebar Menu Background Header Footer. Theme. Pick up a right theme. Sidebar.
E N D
Customizing yourWordpress Dr Yi Zhou (yzhou@scm.uws.edu.au)
Content • Basic techniques • A bit more • Advanced topics
Content • Basic techniques • A bit more • Advanced topics
Basic Techniques • Theme • Sidebar • Menu • Background • Header • Footer
Theme Pick up a righttheme
Sidebar Choose the widgets you want
Menu • Create one/many customized menu in wordpress • Go to “Appearance Menu” • Create a new menu • Drag the pages into that menu • Apply the new menu
Background • Customize your background in wordpress • Go to “Appearance Background” • Set a different background picture and color
Header • Customize your header in wordpress • Go to “Appearance header” • Set a different header image
Footer • Customize your header in wordpress • Go to “Appearance footer” • Widgets can be applied to footer as well
Content • Basic techniques • A bit more • Advanced topics
More Techniques • HTML • CSS • Colors • Code Localization • Templates for Categories • Add Media • Managing comment • Change permalink structure • Email newsletter
HTML HyperText Markup Language: still the mainmarkup languages for Web Markup: <blah> …… </blah> <html>: document type <head>: header <p>: paragraph <h1>: headings <b>: bold <a>: hyperlink Attributes <abbr id="anId" class="jargon" style="color:purple;" title="Hypertext Markup Language">HTML</abbr> HTML tutorial http://www.w3schools.com/html/
CSS Cascading Style Sheets: a style sheet language defining the presentation of a block .comment-content th { font-size: 11px; font-size: 0.785714286rem; line-height: 2.181818182; font-weight: bold; text-transform: uppercase; color: #636363; } CSS in Wordpress Themes theme editor style.css CSS tutorial http://www.w3schools.com/css/
Colors Color: corresponding to 6 digits HEX numbers e.g., #000000 The correspondence: http://www.2createawebsite.com/build/hex-colors.html Get the color of a pixel Using add-ons, e.g., colorzilla http://www.colorzilla.com/ Color tutorial http://www.w3schools.com/html/html_colors.asp
Code Localization It is important to figure out what’s the corresponding part in the webpage source code for a given block, e.g., header, footer, menu, paragraph, etc.. Using Add-ons e.g., firebug for firefox Google Chrome can do this by itself
Templates for Categories One of the most important features For some themes, when editing a page/post, you can select to use particular templates in page attribute
Add Media Media, e.g., images, files, videos, is of course important for websites. • For images and files, • click the “add media” in the editor, • upload the targeting file, • configure it, e.g., the alignment • For videos, • upload it to a host, e.g., youtube • right click the uploaded video • select “copy embeded html” • in the editor, chose the “text” edit mode • paste the html code
Change Permalink Structure Sometimes you may wish your link addresses to be more relevant Change the permalink structure through “settings” “permalink” Be careful, as the whole system may collapse. Always backup your system before any critical change
Manage Comments Comments are valuable as those who comment on your pages are really interested in your website. Change the comments setting through “settings” “discussion” See and manage the comments through “comments”
Email Newsletter Sometimes you want to automatically send emails to registered users (for retention and email marketing) Use an email newsletter plugin
Content • Basic techniques • A bit more • Advanced topics
Advance Topics • PHP • Understanding wordpress • Theme editor • Color scheme • Horizontal menu, dynamic menu • Navigation links • Customizing header and footer • Customizing read-more and log-in • Customizing 404 • Design new themes