Usually I set up pages in Wordpress by putting all the HTML in and the client will edit the content in the WYSIWYG editor
This is great, until they accidentally delete a div or break something.
What is the correct way to go about this making it idiot proof, so that they can change titles, paragraphs etc without potentially deleting parts of the structure?
If your client does not know HTML, and you know this going into the project, the only things he/she should be inputting in the page editor are words, uploaded media, and elements that can be inserted using the visual editor. It's a pain in the butt, but your theme should be the part that's "idiot proof".
Build your theme to wrap the_content(); in a div, and style all the potential elements that can be input accordingly. Only rely on elements that can be added using the CKEditor.
e.g. (within the loop, in a theme template file)
<div id="myContentDiv">
<?php the_content(); ?>
</div>
Then your CSS:
#myContentDiv p {
}
#myContentDiv ul {
}
etc.
There's a few options that comes to me right now:
Use jquery plugins to get columns (which is pretty bad IMHO)
Use a plugin with shortcodes (so you wrap each column with them), which is good but user may screw it up yet
Use custom fields (like one text area "Right column content", then you have another text area "Left column content" and so on)
All these 3 are quite easy to implement! :)
[]'s
Related
I'm drupal beginner, and can't solve problem with landing page. I create landing page with panels, set custom css code to it but it doesn't look how I want. I see default elements from my theme (header, nav-menu, etc.) on it. I want that layout fill all my page, how can I achieve it?
I have it
I want do like it
well, I found solution for this problem. I use bootstrap 3 sub theme, and there is file who provide page template, it calls node.tpl.php. I just remove string <div class="main-container <?php print $container_class; ?>"> and now it works well.
go to page.tpl.php file, remove the lines that render the header, the logo and the title. They would usually be in an if statement and the varibles are $logo, $site_name, $main_menu, $title.
I’m inside the New Post page on WP-Admin, where you can create a new post.
At the right column, there’s the category selector, in which you select the category for that new post.
I have something like 15 categories, and therefore the category box is showing with a scrolling bar. Since I need to automate some post creation, I need all the categories to be visible right away, without having to scroll.
So I found the css file that manages the height of the category box (it’s inside /wp-admin/css/edit.css and //wp-admin/css/edit-rtl.css) and there I changed the CSS files to allow a bigger height by default on that box.
However when I open the new post page, it still shows the small box in categories, and when I see the CSS rule, the change I made is not visible. It’s like the CSS is cached or something. I already made sure that my browser is not caching it.
The problem I think it’s because the CSS rules are not pulled directly from CSS files, but from this file:
http://www.website.com/wp-admin/load-styles.php?c=0&dir=ltr&load%5B%5D=dashicons,admin-bar,buttons,media-views,common,forms,admin-menu,dashboard,list-tables,edit,revisions,media,themes,about,nav-menu&load%5B%5D=s,widgets,site-icon,l10n,wp-auth-check&ver=4.7
That file seems to go and gather the CSS information from some place (which I assumed was the CSS files in the wp-admin/css/ folder, in which I could find the exact same CSS rules that were applied to the category box) but for some reason, it’s not retreiving the updated CSS file. Or something else is happening (Server side caching the PHP response and therefore retreiving all the time the old response?)
I wouldn't recommend tampering with core admin files, as any changes you make could be lost from a WordPress update.
The proper way to do it is through a custom function added to your theme or child-theme functions.php file:
add_action('admin_head', 'custom_admin_css');
function custom_admin_css() {
echo '<style>
/* remove scrollbar from categories panel */
.categorydiv div.tabs-panel { max-height: none !important; }
</style>';
}
Another options that will allow you to have CSS for individual pages is to use this OH header/footer plugin. Once you install the plugin you can then add your CSS in the header textarea of the pages admin. Just make sure you enclose your CSS within a <style></style> tag.
So I am working on making a child theme of the "twenty fifteen" theme.
So far I have made custom post types with custom fields. It is imperative that I use custom fields for adding Soundcloud embedds. I have used the "Advanced Custom Fieds" plugin to do so.
Now, the problem I have is that whenever I use the custom field to add a soundcloud widget (just by pasting the link) it seems that the WYSIWYG Editor is adding the link inside a paragraph like this
<p>https://soundcloud.com/skitofficial/skit-ghost-dog</p>
This causes (I think) a white line (a new paragraph) to appear below the Soundcloud widget.
As you can see in the picture below, if I open the code view of the WYSIWYG I can spot the paragraph lines being added around the link.
So all in all, the main problem for me here is the white space below the soundcloud widget. Perhaps it does not have to do anything with the paragraph tag, but either way I the space below the widget looks bad, unprofessional and I need to remove it somehow. Now you may say "why don't you just remove those paragraph tags?" and that is the problem, even if I remove them, they are added automatically.
So, any suggestions would be very appreciated. I have worked my head on this for three days without any progress.
Edit: this question is old and I do not have the site anymore.
I would just add this style to a global stylesheet:
.SoundcloudEmbedd p { margin: 0; }
seems safe
Wordpress WYSIWYG pops in <p> tags. If you're not careful, it will <p> all over your content.
https://codex.wordpress.org/Function_Reference/wpautop
Pop this into your functions.php
remove_filter( 'the_content', 'wpautop' );
EDIT
If you're using ACF, the text area field type has an option for whether or not to add the <p> tags. As mevius suggests, depending on your use case, you may want to consider using the URL field type.
OR, you can use this when calling the field in your theme.
the_field('wysiwyg_field', false, false);
It's possible that the WYSIWYG is adding those <p> tags, due to WordPress's wpautop function.
Rather than completely disabling wpautop, you could remove the <p> tags using a combination of get_field() and wp_strip_all_tags():
echo wp_strip_all_tags( get_field('field_name'), true );
EDIT: On second thought, why are you using a WYSIWYG for this at all? If you're just pasting a link, you should consider using a text field, or a url field.
I did not have access to the code, nor I had access to any plugins, hence I tried this only using the WYSIWYG editor.
To remove the any unwanted paragraphs from any particular web element like div just follow these steps:
add a class to your div (the div which is containing that unwanted paragraphs).
Write a javascript function using querySelectorAll.
Example Below:
var blankps=document.querySelectorAll('.removePara p');for(var i=0;i<blankps.length;i++){blankps[i].remove();}
<div class="col-xs-12 col-md-3 removePara">
<p></p>
How to Remove Empty Paragraphs. Solved.
<p></p>
</div>
Note: This will remove all the paragraphs inside any div which has class="removePara".
Hope this helps someone.
i'm using the twentytwelve theme and i have to write custom content into my example template.
I want to maintain my header content so the main structure is the following
header = id page, wrapper
ex.page = primary, content
footer = close wrapper, close id page
If i have understood correctly, if i want to insert content into the middle of my page i have to do it into my template page (that is a copy of the main page.php), that is in the middle between my header and my footer
For example i want to insert a div into which insert the loop of such category.
The problem is that it displays me nothing, like i've wrote nothing. I can only see the contents if i erase all the originary div, but it's not what i want to do, just because the only div is the page which is my container.
I can't catch what i have to do.
Can you tell me what i forgot to do?
Thanks,
Alex
page.php is a "master" document. header.php, footer.php and (if it exists) sidebar.php are all imported into page.php. Twenty Twelve also uses atomized content templates. You may need to add your div to content-page.php, which is also imported into page.php. content-page.php is used inside the wordpress loop, and encapsulates the code that pulls in the actual article elements from the wordpress database.
If you are trying to add straight HTML to the templates, ensure that you are not adding code between the php brackets:
<?php // don't add html here ?>
<div>do add html here</div>
Depending upon the type of wordpress page you are trying to display, you may need to consult the Wordpress Template hierarchy to determine the proper Wordpress naming convention for your template file (the copy of page.php).
Technically speaking, everything in content-page.php can be put into page.php replacing the get_template_part function. All the 'content' pages are totally not required and can be combined into one file if you want simplicity.
In my opinion, it's easier to start from scratch when learning Wordpress rather than try and re-work something. The default wordpress themes don't lend themselves to be beginner friendly.
I have recently started on Drupal (v 7) to create a small company website.
After much reading and watching tutorials, I have started to create my new theme from scratch. I have defined regions and customised the page.tpl.php file to place them into the template (and node.tpl.php etc). All these changes are working and the layout is looking good, and any item I add appears in the main content output.
In my footer region, I have created a block in which I would like links to appear. I have also created a content-type called footer links (with relevant fields) and I have created a couple items of content for it.
The block is showing fine (the title and block body appear). However, despite scouring the documentation, I am not sure what needs to be done to make the items of content (footer links) appear in this block.
Any help appreciated, thanks!
info file snippet for a region
regions[footer_one] = Footer Column One
... and code in page.tpl.php
<div class="one">
<?php if ($page['footer_one']): ?>
<?php print render($page['footer_one']); ?>
<?php endif; ?>
</div>
If you just need simple footer links, no need to create a content type for this, you can simple create a menu and add a menu block in footer.
If you really want to use your own content type for these links, you can create a view (with views module) to display what you want in a block.
About creating a theme from scratch, did you try before to create a sub theme ?
PS: I don't think drupal is a good cms for "small company website".
Views is really powerful and sounds like it will do exactly what you need. Otherwise, you can create a menu for your items and place that menu in your region as well.
Regarding your original code, you'd probably need to grab the information about the nodes from the database in order to construct a list on your own, but views basically does that for you :)