I have a problem with my custom Wordpress theme and need a solution.
The goal is to create an about us page which has multiple sections. Let's say the page has to have 4 sections.
Short info about the company
Short info about the company history
Info about how the company works with clients
Section about the team.
I want this info to come from the Wordpress "page" itself.
The dream scenario for the "client" would be that in the "pages" -> editor, there would be 4 different sections with content that can be dynamically changed at any point. How do i do that?
There has to be content between the different sections. Different HTML containers to each section so they can be seperately styled with CSS. But at this point all i see is the_content(), which can show the content on the "page" itself.
But obviously the code can't be like this. But you get the idea i hope =D
<div class="section1">
<?php the_content();?>
</div>
<div class="between-sections"></div>
<div class="section2">
<?php the_content();?>
</div>
So how do i show different sections of the content on the page itself on specific places. So the only thing an admin has to do is go to "pages" -> the page -> edit the different sections.
I know a solution would be to make the pages empty and instead show the content with customize settings and sections. I could add a Section in Wordpress with the name "About us" and there have the different content / images that can be changed at any point. The problem might be that it's not located in the pages where people might expect all the content to be.
Another solution is different meta boxes where you would show the different meta boxes under the editor and have them named after their places on the page. Then show the different meta boxes on the page. But i feel like meta boxes is more for shorter stuff like email / phone number / or smaller one sentenced data.
Another solution might be custom fields but again i feel like it should be smaller stuff instead of large amount of text. But this is the solution i am leaning towards.
So is there any way of doing this in the custom theme without page builders? Or maybe a whole other solution. I am not 'new' to Wordpress but this has been on my mind for a while now and i can't seem to find a solution that makes sense.
The only sensible solution in my head would be to create custom fields to the pages with first_section, second_section etc. and then post the content there.
Follow the following steps:
1. create the Template and inside the template create the four different section http://prntscr.com/pzi0io
Use ACF to create four Content Editor for the different section https://www.advancedcustomfields.com/
By default wordpress supports only one content edit block for pages, articles etc. I'd say the easiest solution is to add the other edit blocks as custom fields. And the easiest tool for this is Advanced Custom Fields plugin which has long list of different content type fields (including WYSIWYG like default edit block) and you can define where to add them, ie. in this case for the default page template.
To make it dynamic I would use the ACF Repeater field with predefined classes-dropdown and a WYSIWYG. So the end user can add as many content blocks as they want with different predefined styles. You just need to loop through the repeater field in the template and add the selected style class & content to the page.
End user view on the edit page:
Default edit block
Repeater field >> Add row
-- Select class (like "black", "white", "blue") & type content
The idea on the page template:
foreach($repeater as $row) {
echo '<div class="content-block content-'.$row->class.'">'.$row->content.'</div>';
}
And the result code would be like (with two rows created):
<div class="content-block content-black">
Test text, images, links, stuff
</div>
<div class="content-block content-blue">
Test text2, images2, links2, stuff2
</div>
It's also possible to create the custom fields with code by yourself on the theme but with ACF it's so much easier so I'd recommend using it.
Related
Is it possible to have dynamic content in wordpress? I know that navigation, footer, and sidebar is dynamic. But what about the content? What if my content is within a 3 col grid? How can I add a 3 col grid to wordpress if I am only provided with one paragraph box within editing page? If i add the html code in my php file, it will be static and not dynamic. I have studied resources and not found a solution. In result I am asking here to clarify. Therefore, how can I make the content within the body dynamic?
Some of the sources I studied
Nav Walker
Dynamic Template
It totally depends on your needs and the time you can spend on this. Here are some guidelines:
If you always going to follow a specific layout for a page then you can have meta boxes for the content and style is applied by default.
Examples:
Advance Custom Fields (ACF) is most popular and easy to use. Alternatively, you can create custom meta boxes.
If you wanted to give more control then you can create your own layout snippets and define as shortcodes.
Examples:
In one of my recent project, I create my own shortocodes and that can be used in any page and will be automatically formatted before displaying on frontpage like
[video_right]
[testimonial]some content[/testimonial]
[one_fifth]columns[/one_fifth]
BTW, you can also use any visual builder like Visual Composer etc.
New to WordPress theme design, and my google searching is not returning what I am after.
I have a theme I have created and its fine, but the text is all hardcoded into the theme.
I want there to be options in the theme appearance settings? (right place?) where a user can e.g. enter their 'about us' text.
But I have no idea what I should be searching or how to pull in that information into my theme.
Im no a beginner to PHP, but just the way WordPress works itself.
A link, search term or quick start is all I need.
I think you might find the (Free) Advanced Custom Fields plugin useful: http://www.advancedcustomfields.com/
You can add unlimited custom fields and create user interfaces for non-technical people to add content to your theme without them touching any code.
If you set up a field named 'about_text', calling it in your theme would look like this:
<?php the_field('about_text'); ?>
First, you should learn how wordpress is working to display the content. In back office, under Settings > Reading you'll find an option that let you tell how you want Wordpress to deal with the front page : is it a listing of the posts, or a static page?
If you choose the first options, it will use the index.php template from your theme folder. If it's a static page, you'll have to select which page to use for displaying the home (a page you created under the Menu page). The template that will be use then is front-page.php.
For every post / page (page is a post_type, just a variation of post) there will be a title field, a wysiwyg content and a featured image which will be displayed in a template. That's all you can manage by default. To display the title you can use the_title, the content the_content and for the featured image you will need the_post_thumbnail - note that those functions will need to be used inside the loop.
In order to display some more fun, you have many tools at your disposal:
Widgets : widgets are displayed in a sidebar - don't take it literally, it's just a zone of your template. You can register a sidebar with register_sidebar (use this inside your functions.php file, within an init hook). Then in your template you can display the sidebar with dynamic_sidebar.
In WP back office, go then under Appearence > Widgets. You will find your brand new sidebar where you can put any kind of widget you want. If you need a wysiwyg widget, I recommend you to install the Black Studio TinyMCE widget.
Custom fields : any post_type (a post type is an entry in wp_posts) in Wordpress have some associated metas store in wp_postmeta. A meta is defined by a key and a value - it's like any post have an associated array that you can customize.
There is two ways to work with custom fields. First, you can use the default Wordpress feature: when editing a page, click on the screen options button on the top right and enable "custom fields". You will now have a new area to work with on the bottom of the page : you can add fields by name (by default it will list the existing fields names but you can add your own) and value. It's good enough to simple text fields. Then in your template, you can get that value with the get_post_meta function.
The other way is to use a custom fields plugin, which allow you to have wysiwyg fields, loops, media uploader, datepicker... Two popular plugins are Advanced Custom Fields and Custom Field Suite. They both allow you to easily create set of fields for any page / post_type from the back office, and provide their own functions to manipulate fields in templates (but you can still use the WP functions if you want). For example, to get a custom field with Custom Field Suite you do: CFS()->get('my_custom_field').
Custom Post Types : sometimes, custom fields and widgets are not really convenient when you deal with a lot of data with possibly associated pages. In that cases, you can create your own post types just like posts or pages, but you can define which capabilities they have. Use register_post_type to define your new post type (still in init hook), that will make a new section available in your back office, just like posts. Then in your template you can query them with get_posts, the WP function that you will probably the most use when you'll start to play with Wordpress. I suggest you to read the WP_Query documentation in order to learn more about it.
And, at last but not least, you can create your own template that you can associate with any pages. For that, create a php file named whatever you want in your theme folder, paste into it the content from page.php and add this PHP comment on top :
/*
Template Name: My Template
*/
Then choose this template in the dropdown when you edit a page (on the right sidebar).
I think you will have enough to play with, but if you want learn more I recommend you to read about Wordpress hooks and the Widget API to create your own widgets.
Have fun with Wordpress!
It has been a few years since I properly worked with WordPress. Now I have a proposal to build a WordPress site where every page has a custom design and only some areas of each page is editable.
The reason for this is to build a bespoke layout on each page which cannot be messed up by someone non-technical editing it in the CMS, except for small areas which they can customise.
e.g. A page contains one div which has some text in it, which can be edited in the WP admin backend, but the rest of the page cannot be edited.
Can this be done? How?
Edit: There needs to be multiple editable areas not just one. I know how to make custom pages/templates.
One method may be to create new page templates. Just create a new file in your main theme folder (or the templates folder if there is one). As long at the top of that file contains the line:
/*
Template Name: <your template name>
*/
You can design the page however you want. The data pulled from the admin section will go wherever you invoke
the_content();
The rest of the page can be hardcoded.
Then on the post edit page, on the right side (usually), you can choose the template with your template name for that page. It may be a good idea to copy the current post.php or single.php into your custom file and work from there.
For restricting access you can look at setting up user levels and keep your content contributors as "Authors" instead of "admins" so they can't change themes or edit settings.
(See https://codex.wordpress.org/User_Levels)
For creating specific unique pages with an area that gets changed you should look into custom Page Templates. You can create a page template by dropping a php file with the right naming structure into your theme hierarchy and it will get picked up by the back-end as template option when you create a page.
(See https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/)
I solved this problem using a plugin called Advanced Custom Fields which does exactly what I required.
This is my first Wordpress build so bear with me whilst I try to explain the issue.
I'm building a site for a hotel. 3 of the pages of the site all feature the same content (a heading, a paragraph of text and a gallery) and all feature a 'box', the content of which differs slightly from page to page. For example, on the 'accommodation' page the box will simply have paragraph text in, but on the 'restaurant' page the box will have links to downloadable PDF menus.
I've built a custom template file for these pages called 'standard-page'. My question is, what would be the best way to tackle this box issue? I'm guessing there is an easier way than creating a separate template for every page? The box does need to be content editable, so for each page the backend fields will differ (the restaurant page will require a file upload facility for example).
I've been following a Treehouse tutorial so far, but this isn't really covered in it. I've been using Custom Fields if that helps.
The only idea I can think of is having the box as a separate file (e.g. content-box) and having a WP_Query which calculates and displays different fields based on the page.
Here is an example of the different style boxes. The one with the offer is for the homepage.
using a content-box.php would probably be your best bet and inside it - target the pages by name.
inside of the content-box.php:
<?php if(is_page('accommodation')) {//show accommodation box}?>
<?php elseif(is_page('restaurant')) {//show restaurant box }?>
etc.
I am currently teaching myself WordPress and working on my own CMS site.
My site will consist of approximately five pages where the header/sidebar menu/footer will be seen on all these five pages.
Beginner here and questions are as follows:
All these five pages will consist of different content, for example, every page will have a image banner representing the menu option just clicked, for example, "About Us" on page 5, "Promotions" on page 4 etc and then some text beneath that and then possibly some images inside a carousel set up.
Within WordPress, how would I tackle this, i.e. do I just create a page in WordPress, position the banner image at the top of the page, then have a few breaks and then insert the carousel of images - is this correct?
If not, do I need to create a separate php file called aboutUs.php that has this markup and then somehow link it to a WordPress page?
On my landing page of my site ONLY (page 1), just above the footer, I want to display a div section that displays all the sponsors of the website along with a URL to click to their websites - how would I go about doing this in WordPress?
Furthermore, with my menu, how do I link my menus to point to the WordPress pages relating to that menu option?
If you use the 'default' template that comes with WordPress you could do something like this to generate different content on different pages without creating separate php files (this would go in page.php):
<?php if(is_page('About Us')) { ?>
<?php $about_query = new WP_Query('category_name=aboutus-&showposts=1');
while ($about_query->have_posts()) : $about_query->the_post(); ?>
<?php the_content();?>
<?php endwhile;?>
Essentially, in this you could just create a post and an 'aboutus' category to reference it. The page of 'About Us' (referenced through is_page()) would contain the content you wanted to display.
First, some background. Wordpress has a number of ways to display stuff, such as images, text, and query results; here's a list:
THEMES
You can modify your theme files directly to do whatever you like. This will probably involve learning a lot about PHP and the Wordpress internals, but there are plenty of books, and the Wordpress Codex to help you. You can get themes from the Wordpress theme directory.
PLUGINS
There are huge numbers of Wordpress plugins, any one of which might fit your need. Plugins will require configuration, but generally won't involve learning PHP -- just how to install and configure them. Most of the SEO (Search Engine Optimization) plugins will allow you to place custom HTML in the templates (nominally for ad placement, but you can do anything you want with it). You can get plugins from the Wordpress plugin directory.
WIDGETS
The base Wordpress software and many plugins provide Widgets. A widget is a display element that can be docked in one or more widget areas. Typically a widget will be a chunk of HTML (often an unordered list) that has the theme's style sheet applied. Widgets are often used for ad placement, navigation elements (menus, dropdowns, breadcrumbs) or to provide tag clouds, category lists, calendars, etc.
SHORTCODE
A shortcode is a macro that can be placed in a page or post, that will return a chunk of HTML. Shortcodes can take parameters that will affect what the shortcode returns. The base Wordpress software provides some shortcodes, but many plugins will provide shortcodes as a way to get more functionality without the need for widgets or theme modifications.
With all of that in mind, here's my answer(s) to your question(s):
Modify your theme to include a page template, and add your image selection code to the template. Then create your individual pages, and then select your template while editing the page.
The 'landing page' can be any page (instead of the default blog index page); create a 'home' page and a 'home' page template that includes your advertisements. Alternately, use a SEO plugin to add the ads above the footer.
I don't know what theme or plugins you use, but generally you can configure a navigation menu to work from a list of pages, specifying either which pages to include or which pages to exclude. If your theme doesn't include this functionality, I'd recommend choosing a different theme.
Look into Wordpress "page templates". The Wordpress codex can help you understand this.
If you edit a post in WP you will notice the option to use a template. That is your goal. Learn how to work with them.
Wordpress themes are composed of multiple files. One of them is the header.php file which contains the header content. The footer.php file contains the footer and the sidebar.php contains the sidebar. These are the usual conventions. They're not strict. There will be a couple of main files which include these (e.g., index.php - Used for articles, page.php - Used to display pages etc.)
If I were making a setup like yours, I'd make five "pages" (using the backend) and then customise my page.php file to present it properly. I'd still keep the header, footer and sidebar separate from the page.php file since they'd be there for pages like 404s etc. as well.
Just put something in the content of the landing page to display this.
IF you're doing theme development, the right place to look at is http://codex.wordpress.org/Theme_Development