Code Monkey home page Code Monkey logo

socialwork's Introduction

UW School of Social Work WordPress Theme

Custom WordPress theme for UW School of Social Work. Based on the UW WordPress Theme.

Getting started

To get started using this theme, all you have to do is install it and the UW WordPress Theme on your WordPress website. Make sure you activate this child theme.

  1. Download zip files for both the UW WordPress Theme and this child theme. Please note: You may need to update the name of the zip file. If it includes -master in the file name (e.g. uw_wp_theme-master.zip), you will need to REMOVE the -master part. The file name you upload to WordPress in the next step needs to be uw_wp_theme.zip.

  2. Log into your WordPress admin.

  3. Go to Appearance > Themes and click the Add New button.

  4. Click the Upload Theme button.

  5. Drag and drop the UW WordPress Theme zip file to the file upload area and click the Install Now button.

  6. Do not activate this theme! You're not quite done yet.

  7. Go back to Appearance > Themes and click the Add New button.

  8. Click the Upload Theme button.

  9. Drag and drop the UW School of Social Work zip file to the file upload area and click the Install Now button.

  10. Click the Activate link.

You're all set and ready to go!

All of the settings, shortcodes, widgets, and templates from the parent theme are available to you here in this child theme. Additionally, you can extend and override the theme as needed from within the child theme.

Override with caution. If you stray too far from the original theme, it will make updating the parent theme difficult to impossible without also updating your child theme code.

Developer tools

Included are a few tools that can get you started for advanced coding with the theme. Includes

Requirements for dev tools:

  • NodeJS and NPM installed before you start. We recommend using the latest versions or any stable supported version.
  • A command line/terminal tool
  • (Optional) Local installed and running for use with BrowserSync.

Setting up dev tools

  1. Copy all the files out of the /dev/ folder and into the main socialwork folder. (delete the /dev/ folder when you're done.)

  2. Update the style.scss file with your desired theme information.

  3. Open uw_wp_child_theme in your terminal application.

  4. Install the node packages using npm.

npm install
  1. Open gulpfile.babel.js and edit line 20 http://your-site.local to match your Local development site URL.

  2. Run gulp in the command line to start building your files.

Once you've done those steps you can start using Gulp to create stylesheets. Gulp can also be expanded to run other tasks for the theme.

Guidance for using this child theme

  1. Follow Child Theme best practices from WordPress

  2. Follow WordPress best practices for theme development

  3. Code to the WordPress Coding Standards for PHP, HTML, CSS, JavaScript and documentation

  4. Don't code the way we coded just because we coded it that way. Do what makes sense for your situation. Will your code make sense to you in 6 months or 6 years? What about another developer in 6 months or 6 years? Make sure it makes sense!

  5. Use the tools that make sense for your project.

  6. Document! Keep a record of the changes you are making in the child theme. Make comments in your code so you and other devs know what you were trying to accomplish.

Our (loose) recommendations

These are some of the tools we've found useful as we've worked on the theme. These are particularly helpful if you are working with at least 1 other dev on the same codebase.

  1. Use Local for local development

  2. Use VS Code or Sublime Text as your IDE

  3. Use the WordPress Coding standards (see #3 above) with PHP_CodeSniffer. This can be difficult to get set up right, but it's worth it once you do.

  4. Use some kind of automation workflow tool like Gulp

  5. Save your work in git

socialwork's People

Contributors

jeffbrockstudio avatar lcaple avatar tjsuw avatar tifsev avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.