[et_social_follow icon_style="flip" icon_shape="rounded" icons_location="top" col_number="auto" counts="true" counts_num="0" total="true" outer_color="dark" network_names="true"]
Prerequisites for WordPress Theme Development / Web Project
Have you ever thought about ‘House Building Process’? With each web project, we go through the same process (almost). House building is a need. My need. Your need. Or it can be any client’s need. Right? So, before we start building, we consider a few things beforehand. We try to get as many details as we can. We discuss budget etc. Budgets vary and the building process varies along with it. The core will always remain same. However, the use of resources and the outcome will let us know that heavy investments were made in the building proces.
To create or build any WordPress Theme from Scratch, we go through the same process. Following is a list of steps that we usually take to make a WP Theme.
- Idea – Preliminary Thoughts – Brainstorming
- Pencil Sketch – Raw Prototype – Reference Sites
- Color Palette – Typography – Icons – Images –
- Markup / Structure / Sections, Divs and Classes etc
- CSS – Styles as per brainstormed design
- Interactivity / Animations / Effects etc
- Programming (CMS based website or Non-CMS based Website). Theme Building / Plugin Development / Addon etc
- Production – Staging – Live (Git etc)
- Preparing to Move from Localhost to Live Server / Migration / Manual or Automated Process
- Feedback – Revisions – Updates etc
- Final Product – How/ When and Where to Deliver/ Invoices / Payment / For Sale or One Time Product
USEFUL RESOURCES / ASSETS 2019 for #WPSPARTANS300
NOTE: Please Watch Task # 73 for additional info – https://www.youtube.com/FreelancePakistan
Prototype / Wireframe / Mockup
- https://moqups.com/
- https://balsamiq.com/
- https://atomic.io/
- https://www.adobe.com/products/xd.html
- https://www.figma.com/
- https://www.framer.com/features/components/
- https://www.invisionapp.com
- https://www.uxpin.com/
- https://webflow.com/
- https://principleformac.com/
Typography / Fonts
- https://fonts.google.com
- https://www.fontsquirrel.com/
- https://www.fontspace.com/
- https://www.dafont.com/
- https://www.1001fonts.com/
- https://fonts.adobe.com/
Color Scheme Generators
- https://color.adobe.com/
- https://pigment.shapefactory.co/
- http://www.schemecolor.com/
- https://colorhunt.co/
- https://coolors.co/
- https://www.colourlovers.com/
- https://color.hailpixel.com/
- https://colourco.de/
- https://sipapp.io/
- http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
Icons / SVGs
- https://github.com/stephenhutchings/typicons.font
- https://material.io/tools/icons
- http://www.entypo.com/
- https://fontawesome.com/
- https://fontlibrary.org/
- https://pixabay.com/
- https://unsplash.com/
- https://stocksnap.io/
- https://www.pexels.com/
- https://deathtothestockphoto.com/
- https://www.vexels.com/
- https://www.freepik.com/
- https://www.vecteezy.com/
- https://freedesignfile.com/
- https://www.vectorportal.com/
Animations / Effects
- https://github.com/rikschennink/shiny
- https://github.com/alexfoxy/laxxx
- https://github.com/jshjohnson/Animate
- https://wowjs.uk/
- https://fancyapps.com/fancybox/3/
- https://greensock.com/gsap
- https://revealjs.com/#/
- https://animejs.com/
- https://dimsemenov.com/plugins/magnific-popup/
- https://sweetalert.js.org/
- https://sweetalert2.github.io/
- https://feimosi.github.io/baguetteBox.js/
- http://www.bestjquery.com/
- http://kristofferandreasen.github.io/wickedCSS/
- https://daneden.github.io/animate.css/
- http://shakrmedia.github.io/tuesday/
- https://greensock.com/
- http://bouncejs.com/
- https://vincentgarreau.com/particles.js/
- http://maxwellito.github.io/vivus/
- https://connoratherton.com/loaders
WordPress Code Generators
- https://www.wp-hasty.com/
- https://generatewp.com/
- https://www.nimbusthemes.com/wordpress-code-generators/
- https://metabox.io/online-generator/
- https://includewp.com/
- https://exygy.com/the-wordpress-admin-account-generator/
WordPress Useful Snippets
- https://www.sktthemes.net/wordpress/useful-code-snippets-for-wordpress/
- https://managewp.com/blog/enhanced-performance-code-snippets
- https://akosweb.com/15-useful-wordpress-snippets/
- https://www.noupe.com/wordpress/the-26-most-useful-and-most-functional-wordpress-snippets.html
- https://www.wpkube.com/code-snippets-wordpress/
- https://premium.wpmudev.org/blog/shun-the-plugin-100-wordpress-code-snippets-from-across-the-net/
- https://www.wpbeginner.com/wp-tutorials/25-extremely-useful-tricks-for-the-wordpress-functions-file/
- https://www.wpexplorer.com/useful-wordpress-snippets/
Educational Resources / Assets
- https://tympanus.net/codrops/
- https://onextrapixel.com/
- https://hakim.se/
- https://codyhouse.co/
- https://bootsnipp.com/
- https://startbootstrap.com/snippets/
Boilerplate / Blank HTML Markup
- http://htmlshell.com/
- https://html5boilerplate.com/
- http://html5blank.com/
- http://www.initializr.com/
- https://developers.google.com/web/tools/starter-kit/
- https://mobirise.com/
Boilerplate / Blank WordPress Themes
- https://roots.io/sage/
- https://github.com/tommcfarlin/WordPress-Widget-Boilerplate
- http://underscores.me/
- https://foundationpress.olefredrik.com/
- http://jointswp.com/
- https://themble.com/bones/
- https://themehybrid.com/hybrid-core
- https://github.com/DevinVinson/WordPress-Plugin-Boilerplate
- https://github.com/infinum/wp-boilerplate
- https://github.com/mthchz/gutenberg-block-boilerplate
- https://github.com/JimSchofield/Guty-Blocks-2