I recently started learning to build webpages and custom themes with Wordpress using Timber, twig and Advanced Custom Fields and I don't really know how to organize everything. So far I've been tinkering with everything in the same place (.php and .twig separated) but I can really see that becoming a mess.
So the answer to this is obviously very subjective. There is no convention for how best to organize your folder, files and project/theme. A great starting point is the Timber Starter theme, which is made by the people who make Timber. You can find that here: https://github.com/timber/starter-theme
I am also going to share with you a project I recently completed with Timber and show you how it is organized. Unfortunately, I cannot share the repo with you as it was for work and the repo is private, however the file and folder structure is all that really matters here.
I started this project, and all Timber projects with the Timber starter theme, so that is my starting point. Inside of the Templates folder, I have the following
CPT = stands for Custom Post Types. Each CPT has its own folder inside of this folder and all of my .twig files for that specific CPT go there. For example: CPT > Staff > image.twig, biography.twig, etc.
components = this file contains things like the header, footer, navigation, mobile navigation, etc. These are all .twig files that are used throughout various pages on my site.
pages = this folder contains folders for each page. I like to break each page specifically into "components" and place each page specific component into its page specific folder.
For example, inside of this pages folder I have a folder called "home-page." This contains all of the components for the home page. So I might have a hero.twig, home-page-slider.twig, mission-statement.twig etc. I break each piece/component of the home page down and create a specific .twig file for each and place them within this folder.
I repeat this process for each and every custom page/template I am making.
That is about it, at least for this project anyways. I hope this gives you a general idea about how best to organize your files. The key, is to do whatever makes sense to you, and if you are working as a team, whatever you and your fellow team members agree upon.
For example you might want to rename what I called my "components" folder to "partials" as you might be more familiar with that terminology. It honestly does not matter what you do as long as it makes sense to you and whomever is going to be in this code base. Remember, what makes sense right now, may not make sense 6 months to a year from now. So think ahead too.
The way I approach all of this is what is the simplest way to convey what each file's role is. I shouldn't have to think or look at a readme. The filenames, folder names and structure should be as self explanatory as possible. I like to remind myself of the KISS principle in these situations... "Keep it simple stupid!"
https://en.wikipedia.org/wiki/KISS_principle
Hope that helps.
Related
I want to build a personal website on wordpress.com
I have found a website that I really like the look of and want my website to look extremely similar to that website, maybe with just different assets.
I have some experience in Java and C but none in html. What would be the best way to replicate the source website onto my own website. I know I can inspect the element and look at the source code but it is really unintuitive. Is there a better way? How do I find the themes the original site used? Is there any way to copy the html code onto my own website?
Are you sure you want to build it on WordPress.com? It's hosted by WordPress, but also very limited and you can't really modify the themes.
If you want more control, you should do it using self-hosted WordPress.org package.
To check what kind of theme is used, go to source code and search for "wp-content/themes/theme-name" or find the main CSS file (often style.css) as there will be commented details that are shown by WordPress in Themes menu.
There are 2 options:
The website you like is a custom design and there is no easy way to copy that and it can be even illegal if you don't ask the owner. If you really want to copy the source, there is only a manual way - you download the source styles and scripts and modify it. Tough and risky way, because the sources are often minified.
The website is using a free or premium theme, available to buy, that's going to save you hours of work and probably allows a lot of customization, so you only have to spend some time to adjust it to your needs, upload photos etc. You will probably even don't have to look at the code.
(extra) If you still don't know what theme it is - ask the owner
is it possible to have a website that contains 2 app.css files?
I have a website and want to build a new (but related) website under the same domain. So I guess you can consider the main hub more like a landing page of sorts, and then the two related "websites" would then branch off of the main domain. Each of the websites are going to be styled differently though. So I'm unsure of what is best - to create a single combined app.css file and list each style according to each website, or can I create a new one that sits beside the original?
You can do a separate css file for each site, or have them both point to the same file. Since you want different styling between the 2 sites, I'd recommend a different css file for each site.
You can create and use as many css file as you want. If both sites will be style differently, create a file (or even multiple files, them import) for each site.
Though the websites are related, it's better to create two separate css files as it will be easy to make changes(in future) to styles and debug incase of any issues. It also increases readability of the code so that in future if you may have to refer this code for any modifications, you can understand it easily and make required changes :)
I have a html template that has multiple pages like home, about us,contact,services,... and I want to convert it to a joomla template.I spent a lot of time for searching a good tutorial in google like this:
http://www.learning.asarayan.com/education-website-design/joomla-training2/334-convert-html-to-joomla-template
but non of them can answer my question: how can I convert ALL pages of html to joomla??I mean that I can convert one page for example home to joomla and define its position but what about other pages?
can anybody introduce me a COMPLETE tutorial???
sorry for my poor english
thanQ
You may start with tutorial posted at below address
http://www.tobacamp.com/tutorial/5-easy-steps-converting-html-template-to-joomla-template/
There is no automatic converter or out of the box solution for this, neither any tutorial to help you.
The best way to sort out the issue is by duplicating the template with the help of Artisteer. You can just recreate the template design and feel with Artisteer. Download link: www.artisteer.com/?p=downloads
You need to change your mindset from that for a static template to that for a dynamic template.
In joomla templates there is a base layout called index.php as you know. But that is very skeletal usually, is just defines some locations on a page, includes your css and javascript that is common to all of your pages. This gives your site a common look and feel and ensures a good user experience.
For your css for the individual pages you would normally just include that in the template.css file or similar.
Within the index file you will see places that say jdoc:inlcude. These are the places that actually include the layouts that provide detailed html for specific blocks on the page, typically there will be one component jdoc (there cannot be more than one) and many modules and module ones as well as some others.
The html for these documents is found in the components/com_componentname/view/viewname/tmpl folders.
To override the core layouts you use the template override system by placing same named files in the html folder of your template. You can look at the included templates to see how this works. There is pretty good documentation of this on the joomla documentation site.
http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core will get you started.
Also this may be a point of confusion. In a CMS you strive to separate content from presentation. So if you enter the core information in the cms, i.e enter the contact information in com_contact, and enter most of your current content into individual articles you will start to see how it actually works. I would usually recommend first entering all of your static content into the appropriate places, then work on making the rendered pages look exactly the way you want them to.
I ran into a site structure that I found interesting. It went something like the following:
All pages on the site were index.html, however all the pages(index.html) on the site resided in their own folder and even within some folders there were other folders where an index.html file resided. Does this type of site structure make good sense.
http://www.stpaulsschool.org.uk/ follows this type of structure.
Thanks
Not sure, but it looks like the site is rewriting URLS.
So they are changing
something/php?id=1
to
normal_folder/
The site is probably using a content management system to do this.
If you don't need a CMS, then I would stay away from this.
EDIT
As per the comment below...
Some Web site building systems (Wordpress, etc.) will automatically generate URLs when they create new pages. Often, those URLs are ugly and don't work well for link sharing or for Search Engine Optimization. So, you can rewrite the URL paths so that the URLs are prettier, like what you showed above.
If you are not using a system like that and you are not generating your URLs from a database (where that could also happen), then you should stay away from creating a site with one page in each folder. It is difficult to maintain and not great for user navigation.
It just looks like normal URL rewriting to me. I highly doubt those apparent folder structures exist in their web root.
The site isn't using this at all. Its probably using a rewrite system which lets you decide which page to fetch for which url. the directory structure you think its using is very bad and should not be used.
I'm trying to create a theme for a CMS, but it's proving nearly impossible, as I have no understanding of PHP or ASP.NET. I can put a site together via CSS and HTML, but I want clients to be able to add and edit content themselves. I'm about ready to give up on designing one altogether and just use an existing theme.
I've had a go at trying to understand the inner workings of Wordpress, SilverStripe, Umbraco and Pixie, but the tutorials have left me confounded. Are there other CMSes I should be looking into for a more simplified theming process?
I'd really love to be able to just drop a chunk of code into the content area of a given HTML page, and make that region editable from a WYSIWYG front end that the client can log into. Is there such a thing?
Anything but DotNetNuke.
I'd recommend giving Wordpress another try.
I'm no web developer, just a an average Java/C# programmer who needed a web site and has some basic knowledge of HTML and CSS. What I did was find a theme that was similar to what I wanted, then started tweaking it incrementally. My theme is pretty basic, but before long I got a pretty good grasp of "The Loop" and printing out category and page links and such.
How about Movable Type?
You can (and should) edit the templates via the web interface, they are divided into separate modules, so you can concentrate on one area of the site, styling is of course handled via CSS.
It took me a few hours without any prior experience with this CMS to completely port a Wordpress theme to MT - I found the documentation very helpful and didn't even have to look elsewhere.
An awesome thing about MT - it generates static pages based on the templates you defined. Meaning, very low load on the server, you don't need to query the database on every request, etc. You could probably do the same/similar by activating the cache plugin (or is it built in now?) in Wordpress, but here it's the default modus operandi so it's more stable and integrated with the CMS.
Drupal with the zen theme (or a "lighter" version of it: Starkish theme) seems like a popular choice (and well deserved, too). It gives you a good starting point, it has great documentation and many modules available.
PS: I've added this as an additional answer so that it can be voted upon separately from my other suggestion - I just could not stop myself from bringing up the Drupal + zen combo :)
I worked with Joomla, it is really easy to have a theme for it without knowing any programming language. When you install it using a simple installer, there will be a folder named templates. There are three simple themes each in its own folder. Just copy one of them,change XML data for that theme ( just to name it and have some details, no programming ) and change the contents of CSS and HTMLs. every where you see something unrelated to HTML like , copy them!! Names are descriptive. so you can guess what do they do. give it a try!
I'd really love to be able to just drop a chunk of code into the content area of a given HTML page, and make that region editable from a WYSIWYG front end that the client can log into. Is there such a thing?
The only system I've come across with this kind of functionality is Perch.
Just create your website using HTML/CSS as usual and chuck in a few small php tags where you want editable content. These areas are then added to an admin area for your clients to edit.
The only drawback is it costs £35 per site - I don't know if there's a free/open-source CMS with this functionality...
It's difficult to say which CMS will be the best one for you (maybe your question should be made into a community wiki question).
I have a little experience with mojoPortal, and found it to be easily customizable. There's a lot of documentation about how to skin your CMS and there a lots of complete skins that you can use as a starting point.
There is also a demo site, where you can see how the CMS works for an end-user.
Take a look at Joomla. That was the first CMS that I really used, and I still think its templating engine is better than most of the others out there.
Its template system essentially lets you build a standard web page, and then use some simple tags to define where the content and modules would go. You can override the output of most external components and modules without too much trouble, and the vast library of third-party extensions should help you add a ton of functionality to your site without much coding on your part. Joomla also has a fairly easy-to-use administrative backend, so your clients should like it too.
This page for themeing Wordpress helped me a lot:
Theme Development
UPDATE
Xichael,
If you know HTML and CSS pretty well, but you just don't want to spend time learning the Wordpress framework, then I think this is a good option for you (again, I can relate to your situation). Use Wordpress with the new Toolbox starter theme. It's super minimal.
Toolbox: An HTML5 WordPress Starter Theme
Here's an example of what it looks like. Just "View page source" and go to town on the CSS!
I've thought about writing my own very simple CMS just for handling pages, i.e. you have some sort of template, and then a <div> in the middle to drop in text from a WYSIWYG editor. You could even use XML as the data store to eliminate having to set up a database to store the page content.
It would sort of be re-inventing the wheel though, because there is so much polished CMS software out there already, but it wouldn't be that hard because it wouldn't have 99% of the features most systems have. However, what happens when your client wants to add something in the future that's already standard in an existing CMS or plugin?
If you are looking for a simple CMS tool, CMSimple is as basic as it gets. A small PHP based CMS system that does not even require a database or XML.
"CMSimple is the ideal tool for a single user to maintain a website."
Original version here: CMSimple.ORG
Original plus 2 enhanced versions here: Download CMSimple
117KB content manangement system
no database required; the entire site is stored in a single HTML file
built in WYSIWYG
no modules or widgets, no blog, no comments, etc., just basic pages
uses PHP (but no database)
Get themes here: dotcomwebdesign.com