This page explains/illustrates how to do a number of common things within WordPress/You Dashboard, including adding social widgets on the margins, modifying the site by using CSS Editor, using images thoughtfully, customizing site design/layout, and integrating media within your pages and posts.Note that the purpose of these guidelines is to help you use the tools in order to execute the rhetorical decisions that you make toward enhancing your professional portfolio. Let the medium serve the content and message of your site. For learning more about the tech/tools, go to Edublog’s “User Guide” page (click on image).
How much content is expected in my pages?
A page should look like a page, mainly “full,” when viewed on a medium-size/resolution screen. If you have more content than a page-full, either break it up into multiple pages and use “child pages” or (say, when you don’t have enough for an additional page), organize it better within the current page. Consider using i) the expand/collapse function if you can find a way to do this, ii) more function, and/or iii) visual elements as described (below).
What multimedia should I integrate and how?
Other than a) images, b) blog widgets, c) social media widgets/connections (see below), you can add d) videos. If you have original videos that you created, that can showcase your skills; if you have a quality video that includes you image/voice and you want to include it, that can give visitors an opportunity to “meet” you in a certain way. You can also add your e) CV/Resume as a .pdf file (which serves more than one purpose). And you can use other media such as e) icons, f) animations, g) embedded videos carefully selected from the web if and where they could meaningfully enhance your pages or blog posts. Remember that meaningful use of h) color, i) font size and style, and j) emphasis (bold, heading, etc) can also enhance your site in similar ways as integrated multimedia assets. But, again, this project is not so much about the media as it is about the content and message, so use media to enhance substantive, thoughtful, professionally polished text/message.
How can I use images for enhancing the blogfolio?
Use a good header image (choose very thoughtfully; be professional). You can also add another permanent image using a Text widget (see below). And then you can use specific images within your pages and blog posts. Ideally, you should try to add an image on all “pages”; you should also add images to your blog posts. Make sure that you link images to their original and distinct source, caption them, or cite them at the end of your page or post. When you insert an image, align them right or left (which you can do by clicking on an image and going into the image’s edit view, which provides a lot of edit options).
How can I create a “child page”? That is, how do I create a menu within a page?
If you want one or more pages to show as drop-down menu when you hover over a main page (e.g., under Education, you can include Major/Minor, Awards, Courses). Create sub-pages only if you have more than a full page worth of materials on the landing page.
How can I make my “pages” visually appealing?
As indicated above, visual appeal in a professional portfolio doesn’t come from how fancy a page looks, how many media types you’ve added: it comes from the balance and meaningful reinforcement between message/content and media/visual elements, with the message being high quality and engaging. So, make sure that ALL of your static pages look “full”; and make sure that the content is fully edited and proofread as well as thoughtful, concise, well-organized.
>>Second, assume that the reader will only “look at” the pages first, so start by using a few (not too many) visual cues such as headings/subheadings, bolded text at the beginning of paragraphs, colored font, etc, in order to help the reader get the big picture (literally, and that of ideas) without having to read too much of the details. That is, while you are able to (and you should) add a lot of substance to the online version of your resume, you should use organizing strategies in order to minimize the visitor’s browsing time; you can add more substantive materials for readers who want to go deeper into the site (by placing them in pages that are two or three clicks away), and you should provide substance in your blog posts.
>>Third, DO NOT include the comments section under your “pages” please! (Save anything you’ve already received and keep pages clean).
>>Fourth, DO NOT use bullet points inside pages, except if you have a strong rhetorical reason to do so. Instead, use paragraphs with headings and bold-faced beginnings. Use “horizontal” space, as well as vertical, in order to enhance content with spacing.
>>Fifth, DO NOT make the row of “share” buttons appear at the top of your pages–unless you do mean to say, “Please share this page on your Facebook page!” or something like that. The social media buttons are best used with blog entries, which contain ideas that you would discuss; with “pages,” share buttons don’t make a lot of sense even if they’re only placed at the bottom of the pages.
>>There are many more things that you will find when you spend the time and explore the affordances of the web for making an impact on readers. The above are just starting points.
How can I make my pdf resume available on my site?
Upload your resume from Dashboard> Media, copy the file URL (from right column), and hyperlink text or, much better, an image of a down arrow or resume screenshot by using that link. Remember NOT to include your email or phone number at the top of the online copy of your resume (just include “Email: …..” and “Phone: …..”).
What widgets should I place in the margin? Remove (or don’t add) any widgets that don’t have a clear/significant purpose from the perspective of the visitor or from yours. For example, if you only have 5-6 blog entries, it makes no sense to add the “categories” (even if you’ve written about multiple different themes) or “archive” widget (even if you’ve written for more than one month) because all your blog entries can be made visible with the “recent posts” widget. In fact, even without “recent posts” widget, visitors can simply scroll down and see all of your blog entries; if you want to use the “recent posts” widget to “highlight” your blog posts or provide a “table of contents,” that’s a rhetorical decision you should make. Especially if you are someone who uses (or are starting to use) social media for professional or academic purposes, adding social widgets like Twitter and Facebook on the margin will make sense. If you don’t have or want to add social media feeds, then you should consider adding blogs you follow, RSS feed, and other connections to show your professional interest and abilities.
How can I add widgets that are not available on the Dashboard>Widget page? You can add “plugins” from the Dashboard, and those plugins will become available for you to drag/drop and activate/customize in the Widgets area. Jetpack is an official collection of plugins and widgets from WordPress/edublogs, so start by activating jetpack and explore what it adds to your tool set. You can also add a variety of widget, such as Twitter and Facebook feeds, by customizing the seemingly useless “Text” widget–especially if Jetpack doesn’t add what you need.
Let us start with Facebook and Twitter. If you don’t want to feature your personal social media accounts on the public web (though no one can see what is private without being in your network), pick any professional network you are a part of, or simply use social media feeds of the class as follows. For creating a Facebook feed widget, drag and drop the “Text” widget to your margin (from Dashboard>Widget) and add the following text inside the box:
<div data-href=”https://www.facebook.com/pages/Write4Pro/737094236314761″ data-width=”260″ data-height=”300″ data-colorscheme=”light” data-show-faces=”true” data-header=”true” data-stream=”false” data-show-border=”true”></div>
For adding class Twitter stream (by using the same Text widget), use the following code:
<a href=”https://twitter.com/write4pro” data-widget-id=”457934614640590849″>Tweets by @write4pro</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>
You can do other great things with the Text widget, but just to add one more, you can add an image or linked image to the margin of your side by doing the following. Go to Dashboard>> Media, then upload the image you want to feature in the margin (e.g., your headshot, a logo, etc). While you’re doing so, look on the right and copy the “file URL” (you can also go back to the Media archive to get the link of any file later). Then, add a Text widget; give the widget an appropriate title, or leave it blank; and add the following code for adding an image within the Text widget body: <img src=”IMAGE URL”> More significantly, you can make that image a hyperlink to a page/post or external site where you want to take the visitor! Just add this code: <a href=”DESTINATION PAGE/POST URL”><img src=”IMAGE URL”></a> Notice that the latter code says this: start link, insert image, stop link.
Adding an image within a widget (esp. when placed at the top) allows you to have a prominent image across all pages/posts on the site without having to make it a banner.
How can I customize site design/layout?
No theme will be perfect for you (unless you created it!), but it is also hard to give advice because your decisions (as well as any theme’s customizable features) will be unique. However, here are some general suggestions.
>>First, when customizing your theme, add an effective title (your name?) and an effective subtitle (site description or something creative about you).
>>Second, consider selecting a color that fits your style, but be professional (not fancy) and use something like a calm blue or university’s official color.
>>Third, while you are on the Customize tool, for the front page, select “static page” (if this option is accessible from the “customize” tool), and pick the Home/Welcome page; if you do this (instead of making the latest blog post appear on your home page), you must create an empty page (titled “Blog”) and select that empty page as the “posts page” so that your blog is accessible from a distinct tab on the navigation bar (alongside other pages).
Now, let’s move to a different area of the Dashboard, the Appearance> Widget area. Most of the power of blog-based websites lies in the widgets (and plugins, most of which you add to the widget area so you can activate to let them appear on the front end). See sections on Widget above.
How can I expand/collapse text in my pages? — DOESN’T WORK ANY MORE, NEED TO FIND ANOTHER WAY TO DO IT
When you find it rhetorically effective, you can use the hide/show script to let the visitor expand and collapse text that you consider secondary. Remember not to overuse it (for instance, by putting too much information inside hidden sections or even using the function too early as the reader is trying to engage with your portfolio).
First, copy the following script in “text” view of any page/post (put it at the beginning):
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script><script type=”text/javascript”>// <![CDATA[
function createToggler(contentId, linkId) { $(‘#’ + contentId).hide(); $(‘a#’ + linkId).click(function() { $(‘#’ + contentId).slideToggle(400); $(this).text($(this).text() == ‘hide details’ ? ‘view details’ : ‘hide details’); return false; }); } $(document).ready(function() { createToggler(‘content1’, ‘slick-toggle1’); createToggler(‘content2’, ‘slick-toggle2’); createToggler(‘content3’, ‘slick-toggle3’); createToggler(‘content4’, ‘slick-toggle4’); createToggler(‘content5’, ‘slick-toggle5’); createToggler(‘content6’, ‘slick-toggle6’); createToggler(‘content7’, ‘slick-toggle7’); createToggler(‘content8’, ‘slick-toggle8’); });
// ]]></script>
Then, wherever you want to hide/show additional text, copy the following script in “text view” again and then go to “visual view” in order to replace the indicated text with what you want to hide/show.
<!– toggle 1 begins –>
[<a id=”slick-toggle1″ href=”#”>view details</a>]
<div id=”content1″ style=”background-color: #ffffff; padding: 10px 10px 10px 10px;”>
Replace this text with your own. Once you copy the code (starting <!–toggle begins … and ending … toggle ends –>) to the “text” view of your page/post, if you go to the “visual” view, you will only see this paragraph. So, when you replace this text in the visual view, be careful to not delete the background script that will make the text toggle. You can also replace this text in the text view, switch to visual view, and then format/design it.
</div>
<!–toggle 1 ends–>
Important: If you have multiple toggles in the same page, change the slick-toggle number and div id number incrementally (you need unique and corresponding number for each toggler). As you can see if you read the code (really, it’s very simple), slick-toggleX will call up the command in the corresponding script above and when you click the content within a similarly numbered div, the text will expand and collapse alternately. The first and last lines are coder’s notes, but it’s a good idea indicate where each toggle begins and ends (for your sanity if you have multiple similar codes in the same page).
How can I use “read more” function in my posts?
This is super easy. When you are “edit” (visual) view in any page or post, click on the icon that looks like three lines with a dotted one in the middle. Insert that thingy wherever you want to break and let the reader click on the “read more” button if they want to continue reading.
How can I modify the site by using CSS Editor?
Go to Dashboard>Appearance>Custom CSS, and insert CSS code to overwrite anything in your theme’s style. For example, you can change the terribly dull color/font of widget headings by simply copying the following code in the CSS editor (and ignoring the error message!):
h3.widget-title {
font-size: 20px !important;
color: #f00000 !important;
text-shadow: 1px 1px #777777;
font-weight:bold !important;
}
Similarly, you can change the size of headings in pages/posts–this is magic–by simply adding this in the CSS Editor:
h1 {
font-size: 30px;
}
And, if you’re as annoyed as I am when a useless search bar sits right under the menu bar, you can boot it out of the site by adding this magic code in the CSS Editor: .search-form { display: none; }
Yep. None. The power of CSS is unlimited but this is just a writing class and this writing teacher neither knows it all nor wants to 🙁